不是太美观,遂放弃
hexo博客搭建的基础配置
基础环境的搭建
尝试使用隐藏条
- 通过
nvm
[1]安装管理nodejs
和npm
;注意修改nodejs的镜像地址和设置全局环境变量。参考文章csdn Coderz1 nvm文档 - 更改npm镜像源;安装
git
与GitHub
建立通信;全局安装hexo
;初始化hexo项目;安装butterfly
主题;部署到GitHub项目[2]。参考文章Fomalhaut-Hexo博客搭建基础教程(一)
Fomalhaut-Hexo博客搭建基础教程(二)
butterfly.config
在blogroot备份配置;备份源码;备份素材- 基于GitHub账号注册
vercel
、netlify
、cloudflare
;购买域名
butterfly主题的简单配置
- 主题
nav
与footer
;主题图片相关;主题侧边栏;主题文章页;主题菜单栏;主题个人信息展示相关配置[3]。参考文章Fomalhaut-Hexo博客搭建基础教程(三
) - 主题效果增强,本地搜索;
inject
;pjax
;全局字体和颜色;社交图标;加载动画等等
优化建议
- 静态资源加速,异步加载css和js;合并
index.css
;合并js[4]。参考文章akilar-Hexo博客静态资源加速
- 静态资源压缩,字体压缩;图片压缩;
gulp
代码压缩[5]。参考文章Fomalhaut-网站性能优化的一些小技巧
- 利用
git action
自动化部署减少渲染和部署时间,源码私有化仓库,网页开源[6]。参考文章akilar-使用Github Action实现全自动部署
- 利用
git action
搭建自动化npm
资源库包,便于第三方加速[7]。参考文章akilar-使用github-action推送博客部署仓库至NPM
- 多平台部署静态仓库,分流多线路部署[8];巧用第三方CDN加速[9]。参考文章
akilar-Hexo博客优化蓝图
张洪Heo-Butterfly CDN链接更改指南,替换jsdelivr提升访问速度
安知鱼-目前可用cdn整理
主题魔改之路
自定义系列
- 自定义
nav
,导航栏显示标题;自定义全局文字[10]。参考文章Ariasaka-关于Butterfly的导航栏的一些教程
- 自定义随机文章,采用
baidu-sitemap
的方式随机生成文章[11];自定义文章统计图和标签云。参考文章Leonus-随机访问一篇文章的实现
- 自定义鼠标样式;自定义鼠标悬停效果[12];参考文章
Fomalhaut-博客魔改教程总结
- 自定义霓虹灯效果;自定义卡片样式亚克力模糊效果;自定义个人信息卡片渐变色;自定义背景特效(流星、雪花、樱花、树叶);自定义四适配背景图;参考文章
Fomalhaut-博客魔改教程总结
- 自定义侧边栏一言卡片;自定义侧边栏今日诗词卡片[13];自定义顶部加载条;自定义小猫挂绳效果
张洪Heo-Butterfly美化:今日诗词侧边栏小组件,中国传统诗词文化
- 自定义复制弹窗;自定义欢迎弹窗;自定义
f12
弹窗,禁用f12;自定义fps
显示;自定义禁止右键菜单[14]。怕冷爱上雪-hexo主题butterfly顶部复制提示弹窗
第三方轮子的使用
hexo-abbrlink
文章添加唯一链接;hexo-admin
博客网页端编辑;hexo-blog-encrypt
页面加密功能;hexo-filter-nofollow
博客超链接防追踪;hexo-algoliasearch
更换本地搜索;hexo-tag-aplayer
音乐插件;hexo-butterfly-envelope
留言板信封;live2d-widget-model-hijiki
添加看板娘;hexo-filter-gitcalendar
GitHub提交日历;hexo-butterfly-wowjs
添加动画效果;tidio
配置在线聊天服务hexo-butterfly-categories-card
首页分类卡片;hexo-butterfly-swiper
首页置顶轮播图;hexo-butterfly-tag-plugins-plus
标签外挂;hexo-renderer-kramed
更换渲染插件;- 外挂标签的插入和使用[15]。 参考文章
Fomal-Markdown语法与外挂标签写法汇总
本地记录
试错记录
- 子页面在本地可以显示在离线显示404
解决:子页面需要目录下有index.md
文件才能被渲染 git action
自动部署npm仓库可否手动或筛选push
解决:可通过条件触发;on
设置为push 特定tag时才触发- 怎么建立博客门户页面
解决:可通过新建仓库page
页面cname
二级域名的方式添加;亦同部署到三方平台绑定二级域名 - 境外访问博客国内cdn确极慢
解决:同上新建博客CDN改为国外或直接GitHub本地绑定二级域名,境外通过二级域名访问博客 - 标签外挂中相册使用出现404
解决:相册配置指向的是另一个子页面,子页面使用图片外挂 - 标签外挂中bubble效果出问题
解决:CDN中版本号用latest改为1.0.17
(最新版本),渲染插件识出问题就在md中直接用html源码endraw不渲染 - 使用CDN的
metingjs
后全局音乐插件失效
解决:butterfly为了适配使用的是旧版本的metingjs - 自己fork的
gitcalendar
接口失效
解决:原作者的api失效,找到相同fork的用户更新的api内容,修改自己的 import/*.css
失效,并且import font.css失效
解决:修改需要的css为styl,impot/;font.css单独import- 自收集的网页源码不被主题渲染
解决:在config
中可设置skip render
此文章版权归adongchong所有,如有转载,请註明来自原作者