记录一次hexo及butterfly版本更新

前言

最近放假闲来无事，想着更新一下博客使用的hexo和butterfly版本

不改不知道，先前在原版主题上做的一些魔改已经让更新版本不再是替换文件那么简单了

所以在本文中我打算记录一下这次版本更新的一些经验，并记录一下我做的一些魔改，方便下次版本更新时查阅

准备新版框架

安装新版nodejs

升级nodejs的无脑方法即卸载重装，因为这台电脑的环境中没有装太多nodejs的包，所以卸载起来没有太大心理压力

nodejs重装步骤

Win菜单中搜索Uninstall Node.js卸载程序，运行卸载程序。
删除C:\Users\用户名\AppData\Local\目录下的npm-cache
在nodejs官网下载最新版安装包
双击下载的msi文件，安装新版nodejs

这一步不需要勾选安装必要工具
查看是否已自动配置环境变量
更改缓存及安装包的存放位置

在安装目录下新建两个文件夹node_global和node_cache

在管理员身份下打开cmd命令窗口，输入下面两条指令
1
2
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
新建环境变量

在node_global目录下新建node_modules文件夹

在系统变量中新建下面这条

变量名：NODE_PATH

变量值：D:\nodejs\node_global\node_modules

编辑用户变量中的Path，将默认的 C 盘下 AppData\Roaming\npm 修改成 node_global的路径

在系统变量的Path中新增%NODE_PATH%
执行node -v查看版本

安装新版hexo

在我们存放更新后博客文件的目录下，鼠标右键打开 Git Bush Here，输入npm命令安装Hexo：

1	npm install -g hexo-cli

安装完后，我们可以在nodejs\node_global\node_modules目录下找到安装的hexo-cli

执行hexo init命令初始化博客

我们执行经典的hexo三件套来测试当前框架是否可用

1
2
3

hexo cl
hexo g
hexo s

网页显示正常，说明安装的hexo包可用

安装新版butterfly

进入themes目录，克隆butterfly主题的仓库下的稳定版本

1	git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

将butterfly主题的_config.yml文件复制到博客根目录，改名为_config.butterfly.yml

在根目录的_config.yml配置文件中将主题切换为butterfly

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

重新执行hexo三件套，验证网站是否切换到butterfly主题

可以看到此时执行hexo指令时会显示当前butterfly版本4.12.0

安装pug和stylus渲染器

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

安装成功！

修改ymal配置文件

vscode自带的文件对比功能非常直观，所以我们可以利用它来修改更新后的博客配置文件

右键新_config.yml文件，点击选择已进行比较

右键原_config.yml文件，点击与已选项目进行比较

这样我们就能直观的看到原来的配置文件修改了哪些地方，而哪些地方是新版本增加的功能

同样的，我们还需要用这种方法比较_config.butterfly.yml配置文件

安装依赖包

安装share.js分享功能
1
npm install social-share.js

安装Aplayer音乐插件

1 2	npm install --save hexo-tag-aplayer npm install aplayer --save

安装图片管理插件
1
npm install hexo-asset-img --save
安装live2d插件
1
npm install --save hexo-helper-live2d
复制原博客的live2d_models文件夹到新博客的根目录下

修改默认的 markdown 渲染引擎來实现 MathJax 的效果

1 2	npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save

安装本地搜索插件

1	npm install --save hexo-generator-search

安装git部署插件
1
npm install hexo-deployer-git --save

安装字数统计插件

   npm install hexo-wordcount --save

## 复制源文件

将原博客`source`目录下的文件复制到新目录的相同位置

将原博客`themes/butterfly/source/img`下的图标等图片复制到新目录中

将原博客`themes/butterfly/source/js`下的魔改文件复制到新目录中

将原博客`themes/butterfly/source/css`下的`_custom`文件夹复制到新目录中

修改`themes/butterfly/source/css/index.styl`

添加下面的代码

``` stylus
@import '_custom/**/*.css'

重新魔改

直达底部按钮

butterfly/layout/includes/rightside.pug文件

代码末尾添加

1 2	button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)") i.fas.fa-arrow-down

顶部波浪

butterfly/layout/includes/header/index.pug文件

代码的37行后添加如下代码

section.main-hero-waves-area.waves-area
  svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
    defs
      path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
    g.parallax
        use(href='#gentle-wave', x='48', y='0')
        use(href='#gentle-wave', x='48', y='3')
        use(href='#gentle-wave', x='48', y='5')
        use(href='#gentle-wave', x='48', y='7')