Hexo+Butterfly系列：主题魔改（二）

此文档是基于 Butterfly文档 整理的，请知悉！

Hexo官网上提供了丰富的主题资源 https://hexo.io/themes/ ，具体操作请查看你选的主题官方文档（GitHub或主题网站会提供）。

我选了Butterfly主题，Butterfly博客地址：https://butterfly.js.org/ 。这个网站还提供Butterfly文档：https://butterfly.js.org/archives/ 。对应的GitHub地址：https://github.com/jerryc127/hexo-theme-butterfly 。我们应该先熟悉这些文档，再修改主题。

修改主题之前先看下Hexo项目结构：

打开WebStorm，选择创建好的Hexo项目，直接在终端中输入下列命令：

Github在国内网速不太稳，下载失败就继续输入命令，直到下载成功为止，如下图：

在WebStorm打开网站配置文件 _config.yml，修改默认主题：

在WebStorm，把themes/butterfly目录下_config.yml复制到Hexo根目录下并改名为_comfig.butterfly.yml，作为Hexo的主题配置文件，操作如下：

如果没有 pug 以及 stylus 的渲染器，需要安装，在WebStorm终端输入：

如果有升级需求，请参考：https://butterfly.js.org/posts/21cfbf15/ 升级建议。

测试主题是否成功更换，WebStorm终端输入下列命令：

访问 http://localhost:4000/ ，Hexo Butterfly主题页面效果如下图：

前往你的 Hexo 博客的根目录

输入hexo new page tags

你会找到source/tags/index.md这个文件

修改这个文件：

记得添加 type: “tags”

前往你的 Hexo 博客的根目录

输入hexo new page categories

你会找到source/categories/index.md这个文件

修改这个文件：

记得添加 type: “categories”

前往你的 Hexo 博客的根目录

输入 hexo new page link

你会找到source/link/index.md这个文件

修改这个文件：

记得添加 type: “link”

友情链接界面可以由用户自己自定义，只需要在友情链接的md档设置就行，以普通的Markdown格式书写。

图库页面只是普通的页面，你只需要hexo new page gallery创建你的页面就行

然后在gallery使用标签外挂 galleryGroup，具体用法请查看对应的内容。

子页面也是普通的页面，你只需要hexo n page xxxxx 创建你的页面就行

然后使用标签外挂 gallery，具体用法请查看对应的内容。

主题内置了一个简单的404页面，可在主题配置文件中开启

本地预览时，访问出错的网站是不会跳到404页面的。

如需本地预览，请访问 http://localhost:4000/404.html

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改博客根目录的_config.yml

修改 主题配置文件

必须是 /xxx/，后面||分开，然后写图标名。

如果不希望显示图标，图标名可不写

注意： 导航的文字可自行更改

例如：

查看效果：

参考：Butterfly 安裝文檔(三) 主題配置-1 | 代码

修改 主题配置文件

我选的是mac：

代码块mac风格效果如下：

Butterfly支持 font-awesome v5图标.

书写格式 图标名：url || 描述性文字

图标名可在这寻找

自动节选和文章页description

因为主题UI的关系，主页文章节选只支持自动节选和文章页description。

在butterfly里，有四种可供选择

description： 只显示description

both： 优先选择description，如果没有配置description，则显示自动节选的内容

修改 主题配置文件_config.butterfly.yml

description在front-matter里添加

如果不要显示顶部图（banner），可直接在主题配置文件配置 disable_top_img: true

上面是顶部图，主题配置文件改为disable_top_img: true即可关掉顶部图，效果图如下：

其他的请参考：Butterfly 安装文档（三） 主题配置-1 | 顶部图

想要在首页置顶某篇文章，只需在文章头部信息添加以下内容：

数字越大，置顶优先级就越高。

在文章修改：

排版问题请参考：Butterfly 安装文档（三） 主题配置-1 | 文章封面

我觉得Butterfly排版挺好看的，就不修改了。

参考：Butterfly 安装文档（三） 主题配置-1 | 文章页相关配置

修改主题配置文件：

我不改了，按默认配置显示。

参考：Butterfly 安装文档（三） 主题配置-1 | 文章版权

不修改，按默认的来。

参考：Butterfly 安装文档（三） 主题配置-1 | 打赏

在文章页，会有一个目录，用于显示TOC。

修改主题配置文件：

相关文章推荐的原理是根据文章tags的比重来推荐

默认的主题配置文件：

如果6个文章的tags都是一样的，剩下的5个文章都会推荐给你看：

开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题ID进行替换（注意： 每替换一次，会留下一个历史记录。 所以如果一篇文章有很多锚点的话，网页的历史记录会很多。 )

修改主题配置文件

我已经把false改为true。

可设置是否显示文章过期提醒，以更新时间为基准。

修改主题配置文件

limit_day： 距离更新时间多少天才显示文章过期提醒

message_prev ： 天数之前的文字

message_next：天数之后的文字

我已经改为true，还改了提示。

可设置标签的逻辑，也可以关闭标签显示

主题配置文件

我改为

修改 主题配置文件

我修改为

可配置网站是否可以复製、复製的内容是否添加版权信息

修改主题配置文件

我把默认的limit_count: 50改为limit_count: 200

博客年份

since是一个来展示你站点起始时间的选项。它位于页面的最底部。

修改 主题配置文件

我改为：

右下角会有简繁转换按钮。

修改 主题配置文件

我把true改为false，把简繁互关功能关掉

右下角会有夜间模式按钮

修改 主题配置文件

V2.0.0 开始增加一个选项，可开启自动切换light mode 和 dark mode

autoChangeMode: 1 跟随系统而变化，不支持的浏览器/系统将按照时间晚上6点到早上6点之间切换为 dark mode

autoChangeMode: 2 只按照时间 晚上6点到早上6点之间切换为 dark mode,其余时间为light mode

autoChangeMode: false 取消自动切换

閲读模式下会去掉除文章外的内容，避免干扰閲读。

只会出现在文章页面，右下角会有閲读模式按钮。

修改主题配置文件

可以改变字体大小（最小隻能到 10px，最大隻能到 20px）

修改 主题配置文件

我把默认的false改为true

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。

修改 主题配置文件

访问 busuanzi 的官方网站查看更多的介绍。

修改 主题配置文件

我都改为false，反正没人逛我的网站🤣

修改 主题配置文件

我把默认的false改为true，并加上时间

参考：自定义侧边栏

标签外挂是Hexo独有的功能，并不是标准的Markdown格式。

以下的写法，只适用于Butterfly主题，用在其它主题上不会有效果，甚至可能会报错。使用前请留意

标签外挂虽然能为主题带来一些额外的功能和UI方面的强化，但是，标签外挂也有明显的限制，使用时请留意。

修改 主题配置文件

参考：Butterfly 安裝文檔(三) 主題配置-1 | 标记插件

标记插件很有用，Markdown经常会用到，值得看一看。

参考：Butterfly 安裝文檔(四) 主題配置-2 | 美化/特效

可以修改大部分UI顏色，修改 主題配置文件：

上面是我改的。

butterfly提供三种效果：静止彩带、动态彩带、canvas_nest

我选的是动态彩条，修改主题配置文件：

会改变ol、ul、h1-h5的样式，修改 主题配置文件：

修改主题配置：

要为配上字数统计特性， 你需要如下几个步骤：

打开 hexo 工作目录

输入：npm install hexo-wordcount —save or yarn add hexo-wordcount

修改 ：主题配置文件

butterfly主题提供两个模式：fancybox、medium_zoom

fancybox：放大图片查看时带有关闭、左右查看等一些操作按钮，需要点击空白处或者关闭按钮才能回到文章页。

medium_zoom：不带任何操作按钮，看完点击大图就能回到文章页。

显然medium_zoom很符合我的需求。

修改主题配置文件：

当鼠标悬停到链接上超过 65 毫秒时，Instantpage 会对该链接进行预加载，可以提升访问速度。

修改主题配置文件：

如想添加额外的js/css/meta等等东西，可以在Inject里添加，支持添加到head（标签之前）和bottom（标签之前）。

请注意：以标准的html格式添加内容

主题配置文件例如：

留意: 如果你的網站根目錄不是’/‘,使用本地圖片時，需加上你的根目錄。例如：網站是https://yoursite.com/blog，引用css/xx.css，則設置為

修改主题配置文件：

Butterfly主题内置了Font Awesome V5图标，目前已更新到 5.13.0，总共有1，588个免费图标。 由于是国外的图标网站，对于国内的一些网站Icon并不支持。 如有需要，你可以引入其它的图标服务商。

参考：Butterfly 安裝文檔(六) 進階教程 | iconfont

主题配置文件：

我把true改为false，即把分享按钮取消，看下图：

参考：Hexo 博客之 butterfly 主题优雅更换背景)

注意：如果网站背景还是不生效，请在主题配置文件background后面补上 “#efefef”：