为什么要改造
- 由于我对博客美化进行了改造,导致更新主题后,自己的美化都失效了,更新主题的成本太大,荒废精力。
- 博客未启用自动部署,每次部署都需要在本地渲染
public
文件,异地编写成本太大,反而降维。 - npm、配置文件混乱,未使用的插件也写入了
package.json
中,对后续自动部署造成不必要的影响。
Hexo 标签的痛点在哪
- 某些标签语法的确美化页面,但对于以后移植性而言,它做不到兼容,因此,我强调
去Hexo标签化
,尽量减少使用非Markdown
渲染代码,减少日后移植难度。
Butterfly 主题的痛点在哪
- 配置文件项多,配置文件内容随版本更新变化大。
- 配置文件的部分选项没有开关,原作者意识到需要将非核心组件移除时已经太晚,而且移除需要修改配置文件(这是在写配置文件的时候没有考虑好,最起码你得支持向下兼容,更新太混乱!)对以前的用户非常不友好。
如何改造
- 整理npm、整理配置文件
- Vercle自动部署。
- 主题使用npm引入方式,编写脚本,通过
cp
命令,将改造代码复制到主题对应文件处,自动部署时启动此脚本。
改造后的结果
- 插件清晰,可随时update。
- 自动部署,异地更改只需要在
GitHub
上提交就热更新。 - 主题可随意大胆更新,不影响自己美化部分。
init blog
1 | #博客根目录 |
npm
我的配置,根据自己使用情况配置。
1 | # 主题 |
配置文件内自行去主题官网找,都有。
美化改造
博客根目录创建文件夹 extra
,自定义美化文件复制到此文件夹下,比如我需要hexo编译时使用到script,需要自定义美化的js文件为 btns.js
。
前提一,获取此文件相对地址:extra/js/btns.js
前提二,复制到主题内的相对地址:node_modules/hexo-theme-butterfly/scripts/tag/btns.js
自动部署
需要连接GitHub,并import(vercel不会配的看我置顶文章)。注意私有化仓库!注意私有化仓库!注意私有化仓库!
根目录编写复制脚本 generate.sh
1 | !/bin/sh |
在 vercel
中:
FRAMEWORK PRESET : 选择
hexo
BUILD COMMAND : 输入
sh generate.sh
Root Directory : 选择博客根目录
以上三点必须满足才可,或者自行更换相对文件地址。
或者不选择脚本,直接在 BUILD COMMAND
中输入脚本的内容也行,建议配一个启动脚本,以后改这个脚本文件即可,一劳永逸。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Leopold's Blog!
评论