记录一次hexo及butterfly版本更新，以及对博客魔改的恢复

前言

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

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

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

准备新版框架

安装新版nodejs

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

1. Win菜单中搜索Uninstall Node.js卸载程序，运行卸载程序。

   

2. 删除C:\Users\用户名\AppData\Local\目录下的npm-cache

3. 在nodejs官网下载最新版安装包

   

4. 双击下载的msi文件，安装新版nodejs

   

   这一步不需要勾选安装必要工具

5. 查看是否已自动配置环境变量

   

6. 更改缓存及安装包的存放位置

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

   在管理员身份下打开cmd命令窗口，输入下面两条指令

   npm config set prefix "D:\nodejs\node_global"
   npm config set cache "D:\nodejs\node_cache"
   

   

7. 新建环境变量

   在node_global目录下新建node_modules文件夹

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

   变量名：NODE_PATH

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

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

   在系统变量的Path中新增%NODE_PATH%

   

8. 执行node -v 查看版本

   

安装新版hexo

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

npm install -g hexo-cli

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

执行hexo init命令初始化博客

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

hexo cl
hexo g
hexo s

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

安装新版butterfly

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

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渲染器

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

安装成功！

修改ymal配置文件

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

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

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

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

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

安装依赖包

1. 安装share.js分享功能

   npm install social-share.js
   

2. 安装Aplayer音乐插件

   npm install --save hexo-tag-aplayer
   npm install aplayer --save
   

3. 安装图片管理插件

   npm install hexo-asset-img --save
   

4. 安装live2d插件

   npm install --save hexo-helper-live2d
   

   复制原博客的live2d_models文件夹到新博客的根目录下

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

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

6. 安装本地搜索插件

   npm install --save hexo-generator-search
   

7. 安装git部署插件

   npm install hexo-deployer-git --save
   

8. 安装字数统计插件

   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

添加下面的代码

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

重新魔改

直达底部按钮

butterfly/layout/includes/rightside.pug文件

代码末尾添加

    button#go-down(type="button" title="直达底部" οnclick="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')

外挂标签

checkbox

将原博客themes/butterfly/scripts/tag目录下的checkbox.js文件复制到新目录的相同位置

将原博客themes/butterfly/source/css/tags目录下的checkbox.styl文件复制到新目录的相同位置

气泡注释

将原博客themes/butterfly/scripts/tag目录下的bubble.js文件复制到新目录的相同位置

将原博客themes/butterfly/source/css/tags目录下的bubble.styl文件复制到新目录的相同位置

关于页面

将原博客themes/butterfly/layout/includes/page目录下的about.pug文件复制到新目录的相同位置

修改themes/butterfly/layout目录下的page.pug文件，在合适位置添加如下代码

when 'about'
	include includes/page/about.pug   

装备页面

将原博客themes/butterfly/layout/includes/page目录下的equipment.pug文件复制到新目录的相同位置

修改themes/butterfly/layout目录下的page.pug文件，在合适位置添加如下代码

when 'equipment'
	include includes/page/equipment.pug   

自定义页面宽度

具体可以参考之前写的下面这篇文章

butterfly主题修改单页的背景及宽度