目录
前言
最近放假闲来无事,想着更新一下博客使用的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
自定义页面宽度
具体可以参考之前写的下面这篇文章