Hexo系列文章已经完成上传： 一、Hexo准备---Node.js、Vue 二、Hexo、主题、部署上线 三、Butterfly美化 四、Hexo之更换背景及透明度 五、Hexo-使用阿里iconfont图标 六、PicGo：搭建图床 七、Hexo-域名设置+收录

首先提示，本文量特别大哦！基本上有所有的美化，还在持续更新ing，谨慎入坑.........

最最最开始的，好不容易搭建了自己的个人博客，当然要写上自己的名字、签名......，证明身份。而且身为一个Chinese，还是中文舒服，所以主目录下_config.yml的配置文件：

主题支持以下三种语言：

主目录下\source\_data--butterfly.yml:

（如果没有这个文件夹，创建一个_data，把\themes\butterfly也就是主题文件夹下的_config.yml移动到_data文件夹下，重命名为butterfly.yml，以后只需要修改这个文件。这样为了留个备份，你搞坏了配置，还可以重新换成最开始的状态） ↓： 名称: /xxxx/ || 图标

主目录下/source/_data--butterfly.yml:

然后找到 Hexo 配置文件_config.yml，将line_number改成false:

需要安装插件，不然hexo g直接报错：

本次修改基于Butterfly主题 3.0.0 ！

将图标更换为“太空飞船”。

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

icon-top常用数值：

-20px：图标位于分割线上方

-10px：图标位于分割线中间

0px：图标位于分割线下方

会在\source中创建对应的文件夹和index.md

这个页面不用创建，自动已经带了

命令行输入：

出现source/tags/index.md文件：

以后上传文章的md文件中，可以在标题头中加入tags，包含 标签 文章的例子：

命令行输入：

出现source/categories/index.md文件：

以后上传文章的md文件中，可以在标题头中加入categories，包含 分类 文章的例子：

命令行输入：

出现source/messageboard/index.md文件：

命令行输入：

出现source/link/index.md文件：

在Hexo目录中的source/_data，创建一个文件link.yml，内容如下：

命令行输入：

出现source/timeline/index.md文件：

命令行输入：

出现source/about/index.md文件：

命令行输入：

出现source/myself/index.md文件：

如果没设置副标题，上面的description：签名，就是显示在主页面。而设置的话，签名自动不显示，副标题出现。

在\source\_data中的butterfly.yml:

这个他们可以设置以下，打字效果可以开启，个人感觉不错，但是需要注意：

我尝试了转义字符，但是会到“，”时，可能会有点卡，可以用空格代替。

在\themes\butterfly\source\css\_layout中的head.styl:

图片可以使用网上的图片(即使用该图片链接)，也可以使用\themes\butterfly\source\img下的图片。

在\source\_data中的butterfly.yml修改：

文章封面设置：

一个:

多个:

此时会随机选择一张。

or文章内

主目录下/source/_data--butterfly.yml:

这是两种方式，只能选择一个 或者 两个都不选

1.新增hexo-lazyload-image模块

2.在主目录配置文件_config.yml增加配置

这个就是图片没加载出来的时候，出现一个动图转转转。

（↑这个相信大家都见过，不演示了）

在底部会出现对应的作者、链接、声明

在\source\_data中的butterfly.yml修改：

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

在\source\_data中的butterfly.yml修改：

在文章最下面，会出现相关信息文章的推送。

在\source\_data中的butterfly.yml修改：

在你每篇文章的結尾，可以添加打赏按鈕。对应二維碼可以自行配置。

没有提供二维码的，可配置icon图片，然后在link上添加相应的打赏链接。用户点击图片就会跳转到对应链接去。

link可以不写，会默认为图片的链接。

在\source\_data中的butterfly.yml修改：

在\source\_data中butterfly.yml修改：

left：侧边框出现在左侧

right:：侧边框出现在右侧

在\source\_data中butterfly.yml修改：

图中icon图标使用的阿里iconfont图标

具体可参考：本站文章--Hexo-使用阿里iconfont图标

在\source\_data中butterfly.yml修改：

在\source\_data中butterfly.yml修改：

在\themes\butterfly\source\css中创建一个css文件，将以下代码复制进去：

接着，在\source\_data的butterfly.yml引入：

忽略以下图片，可以自行尝试。

在\source\_data中butterfly.yml修改：

静态彩带

在\source\_data中butterfly.yml修改：

点击页面，彩带会进行变化。

动态彩带

在\source\_data中butterfly.yml修改：

这个彩带可以动态变换。

canvas_nest

在\source\_data中butterfly.yml修改：

这个可以鼠标自动吸附。

在\source\_data中butterfly.yml修改：

开启后，在你设置的位置会有可爱的小弹窗出现。

大家可以尝试一下，按个人爱好开启。

在 butterfly.yml中配置：

1.找到自己心仪的404页面，这个网站很多很多呦。

https://404.life/

2.在\source中创建一个404文件夹和一个404.html

3.修改404.html内容

​ 红线的地方，可以自行选择是否修改

​ 红框的地方，必须修改 (可以按照图片中修改)

4.设置404跳过渲染，在主目录_config.yml中：

5.butterfly.yml 可以关掉默认的404页面

1.创建一个css文件移动到\themes\butterfly\source\css目录下。

2.引入方式

将以下代码复制到你所创建的css文件,引入即可。

将以下代码复制到你所创建的css文件,引入即可。

可参考：修改滚动条部分中的引入方式

将以下代码复制到你所创建的css文件,引入即可。

可参考：修改滚动条部分中的引入方式

老规矩，复制到你所创建的css文件,引入即可。

当然这是我的博客背景。

如果你想更改，具体可以参考本博客文章：Hexo之更换背景及透明度

\themes\butterfly\source\css\_third-party\normalize.min.css添加如下css代码：

本次修改基于Butterfly主题 3.0.0 ！

实现：增加社交图标RSS，点击可查看网页RSS。

1.下载插件hexo-generator-feed

2.在hexo的主配置文件_config.yml中任意位置添加以下代码：

3.修改butterfly主题配置文件_config.yml ，添加RSS的图标：

在\source\_data中的butterfly.yml修改social：

(可以选择使用fa fa-xxx图标，也可以选择使用阿里iconfont图标)

具体可参考：本站文章--Hexo-使用阿里iconfont图标

此处要注意：

​ 很多人不知道自己上方填的网址怎么找

​ RSS上面有教程，Giuhub、Github、CSDN、bilibili直接个人主页网址就可以

​ QQ：下方 xxxxxxx 填上对应的qq号码即可

​ 移植于next主题：可以在\source\_data中的butterfly.yml修改：

​ 该标签有两种使用方法。

​ 默认模板：

一、simple

更多可以在我的个人博客观看

可以根据图片长度自行排列

例如：

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）

这个可以提供一个按钮，点击它，显示你隐藏的文字、图片等。

Inline

这个可以隐藏文字，仅限于此。( content不能包含英文逗號，可用‚)

content: 文本內容

display: 按钮显示的文字(可选)

bg: 按钮的背景颜色(可选)

color: 按钮文字的颜色(可选)

Demo

Block 这个也是提供一个按钮，而他可以隐藏文字、图片、代码块等。( dispaly不能包含英文逗號，可用‚)

content: 文本內容

display: 按钮显示的文字(可选)

bg: 按钮的背景颜色(可选)

color: 按钮文字的颜色(可选)

Demo

Toggle 如果你需要展示的內容太多，可以把它隐藏在收缩框里，需要时再把它展开。

Demo

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）

mermaid标签不允许嵌套于一些隐藏属性的标签外挂

例如: tag-hide內的标签外挂和tabs标签外挂，也不能压缩代码

这会导致mermaid图示无法正常显示，使用时请留意。

使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文檔 在\source\_data中的butterfly.yml中修改:

写法：

Demo

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）

Demo1------默认方式

Demo2------预设选择``tabs`

Demo3------没有预设

Demo4------自定义Tab名、 只有icon、icon和Tab名

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）

模板：

More styles:

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）

分享功能有两种：

第一种：

如果你不知道 sharejs，可以查看说明

主目录下/source/_data--butterfly.yml中修改:

第二种：

如果你不知道addtoany，可以查看说明

主目录下/source/_data--butterfly.yml中修改:

通用设置

在butterfly中，有几种内置的在线聊天工具。

简单的，打开chat_btn，在右下角开启小按钮。

为了不影响访客体验，可以开启chat_hide_show，开启后，只有向上滚动才会显示聊天按钮，向下滚动时会隐藏按钮。

如果使用工具自带的聊天按钮，位置可能会遮挡右下角图标，可以配置``rightside-bottom`调整右下角图标位置

chatra 在chatra中注册账号.

可以在Preferences中找到Public key

之后/source/_data--butterfly.yml中修改:

tidio

在tidio中注册账号。

可以在Preferences中找到Public key。

在设置中还可以设置样式。

之后/source/_data--butterfly.yml中修改:

daovoice

在daovoice中注册。

在应用设置----安装到网站 之中的app id

可在聊天设置里可以配置聊天按钮等样式

之后/source/_data--butterfly.yml中修改:

gitter

在gitter中登录上账号。

创建一個community或者room,复制名称到设置去。

crisp

打开crisp，注册账号。

在设置中，找到网站ID。

之后，在butterflt.yml中修改：

开启评论需要在butterfly.yml---comments---use中填写你需要的评论。

支持双评论显示，只需要配置两个评论（第一个为默认显示）

注意：双评论不能是 Disqus 和 Disqusjs 一起，由于其共用同一个 ID，会出错。

以下是举例的我在用的：Valine

1.在LeanCloud中注册账号，并进入。

2.创建应用，命名就随便啦

3.创建成功后，进入设置

4.进入应用Keys

应用Keys中有AppID和AppKey，这两个需要填写到你的butterfly.yml中

5.填写butterfly.yml

​ 持续更新ing~~

个人博客为： MoYu's Github Blog MoYu's Gitee Blog