前言

为什么要改造

  • 由于我对博客美化进行了改造,导致更新主题后,自己的美化都失效了,更新主题的成本太大,荒废精力。
  • 博客未启用自动部署,每次部署都需要在本地渲染 public 文件,异地编写成本太大,反而降维。
  • npm、配置文件混乱,未使用的插件也写入了 package.json 中,对后续自动部署造成不必要的影响。

Hexo 标签的痛点在哪

  • 某些标签语法的确美化页面,但对于以后移植性而言,它做不到兼容,因此,我强调 去Hexo标签化 ,尽量减少使用非 Markdown 渲染代码,减少日后移植难度。

Butterfly 主题的痛点在哪

  • 配置文件项多,配置文件内容随版本更新变化大。
  • 配置文件的部分选项没有开关,原作者意识到需要将非核心组件移除时已经太晚,而且移除需要修改配置文件(这是在写配置文件的时候没有考虑好,最起码你得支持向下兼容,更新太混乱!)对以前的用户非常不友好。

如何改造

  • 整理npm、整理配置文件
  • Vercle自动部署。
  • 主题使用npm引入方式,编写脚本,通过 cp 命令,将改造代码复制到主题对应文件处,自动部署时启动此脚本。

改造后的结果

  • 插件清晰,可随时update。
  • 自动部署,异地更改只需要在 GitHub 上提交就热更新。
  • 主题可随意大胆更新,不影响自己美化部分。

步骤

init blog

1
2
3
#博客根目录
hexo init myBlog
cd myBlog

npm

我的配置,根据自己使用情况配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 主题
npm i hexo-theme-butterfly --save

# 地图
npm i hexo-generator-sitemap hexo-generator-baidu-sitemap hexo-baidu-url-submit --save

# 功能性 - 文章
npm i hexo-filter-nofollow hexo-wordcount hexo-abbrlink --save

# 功能性 - 访问
npm i hexo-generator-feed hexo-generator-search hexo-generator-searchdb hexo-generator-cname --save

# 功能性 - Pug
npm i hexo-renderer-pug hexo-renderer-stylus --save

# 功能性 - 压缩
npm i gulp-htmlmin gulp-clean-css gulp-htmlclean gulp-imagemin gulp-uglify --save

# 其他
npm i terser node-snackbar --save

# butterfly 抽象插件
npm i hexo-butterfly-artitalk --save

配置文件内自行去主题官网找,都有。


美化改造

博客根目录创建文件夹 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
2
#!/bin/sh
cp -r extra/js/* node_modules/hexo-theme-butterfly/scripts/tag && hexo ge

vercel 中:

  • FRAMEWORK PRESET : 选择 hexo

  • BUILD COMMAND : 输入 sh generate.sh

  • Root Directory : 选择博客根目录

以上三点必须满足才可,或者自行更换相对文件地址。

或者不选择脚本,直接在 BUILD COMMAND 中输入脚本的内容也行,建议配一个启动脚本,以后改这个脚本文件即可,一劳永逸。