目录
前言准备新版框架安装新版nodejs安装新版hexo安装新版butterfly
修改ymal配置文件安装依赖包复制源文件重新魔改直达底部按钮顶部波浪外挂标签checkbox气泡注释
关于页面装备页面自定义页面宽度
前言
最近放假闲来无事，想着更新一下博客使用的hexo和butterfly版本
不改不知道，先前在原版主题上做的一些魔改已经让更新版本不再是替换文件那么简单了
所以在本文中我打算记录一下这次版本更新的一些经验，并记录一下我做的一些魔改，方便下次版本更新时查阅
准备新版框架
安装新版nodejs
升级nodejs的无脑方法即卸载重装，因为这台电脑的环境中没有装太多nodejs的包，所以卸载起来没有太大心理压力
Win菜单中搜索Uninstall Node.js卸载程序，运行卸载程序。
删除C:\Users\用户名\AppData\Local\目录下的npm-cache
在nodejs官网下载最新版安装包
双击下载的msi文件，安装新版nodejs
这一步不需要勾选安装必要工具
查看是否已自动配置环境变量
更改缓存及安装包的存放位置
在安装目录下新建两个文件夹node_global和node_cache
在管理员身份下打开cmd命令窗口，输入下面两条指令
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：
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配置文件
安装依赖包
安装share.js分享功能
npm install social-share.js
安装Aplayer音乐插件
npm install --save hexo-tag-aplayer
npm install aplayer --save
安装图片管理插件
npm install hexo-asset-img --save
安装live2d插件
npm install --save hexo-helper-live2d
复制原博客的live2d_models文件夹到新博客的根目录下
修改默认的 markdown 渲染引擎來实现 MathJax 的效果
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
安装本地搜索插件
npm install --save hexo-generator-search
安装git部署插件
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
添加下面的代码
@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主题修改单页的背景及宽度