Butterfly美化

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

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

基础配置

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

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

代码块样式

主目录下–:

然后找到 Hexo 配置文件，将改成:

本地搜索

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

分割线图标更换

本次修改基于Butterfly主题 3.0.0 ！

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

修改butterfly主题配置文件– ：

常用数值：

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

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

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

创建标签文件夹

会在中创建对应的和

1.归档

这个页面，自动已经带了

2.标签

命令行输入：

出现文件：

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

3.分类

命令行输入：

出现文件：

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

4.留言板

命令行输入：

出现文件：

5.友链

5.1、创建友情链接页面

命令行输入：

出现文件：

5.2、友情链接添加

在Hexo目录中的，创建一个文件，内容如下：

6.日志

命令行输入：

出现文件：

7.关于

命令行输入：

出现文件：

8.myself

命令行输入：

出现文件：

标题样式

1.副标题设置

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

在中的:

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

图片设置

图片可以使用(即使用该)，也可以使用下的图片。

1.网站图标

2.头像

3.主页面图片

4.子标签页图片

5.推荐

1. 主页的顶部图可以在设置
2. ``archivesButterfly.ymlarchive_img`
3. 其他的顶部图可以在各自的md页面设置中的

文章封面设置：

:

:

此时会选择一张。

or

7.图片查看大图

主目录下–:

这是两种， 或者

8.图片懒加载

1.新增模块

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

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

文章页样式

1.复制的内容后面加上版权信息

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

2.文章版权信息

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

在中的修改：

在中的修改：

在中的修改：

5.打赏

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

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

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

在中的修改：

：侧边框出现在

具体可参考：本站文章–

3.公告

在中修改：

4.访问人數和运行时间

特效部分

1.鼠标点击特效

接着，在的引入：

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

3.打字特效

在中修改：

4.页面特效

静态彩带

在中修改：

页面，会进行。

动态彩带

在中修改：

这个彩带可以。

canvas_nest

在中修改：

这个可以鼠标。

Snackbar 弹窗

在中修改：

，在你设置的位置会有出现。

添加404页面

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

https://404.life/

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

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

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

页脚渐变

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

可参考：部分中的

更换背景及透明度

1.透明度

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

可参考：部分中的

2.更换背景

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

当然这是我的博客。

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

移动端优化

添加如下css代码：

查看网页RSS

本次修改基于Butterfly主题 3.0.0 ！

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

1.下载插件hexo-generator-feed

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

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

社交信息设置

在中的修改：

(可以选择使用图标，也可以选择使用图标)

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

​ 上面有教程，、、、直接网址就可以

​ ：下方 xxxxxxx 填上对应的即可

标签外挂

1.Note语法

​ 移植于next主题：可以在中的修改：

​ 该标签有使用方法。

​ ：

一、simple

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

2.图片放置

可以根据自行排列

：

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

3.tag-hide

这个可以提供一个，点击它，显示你隐藏的、等。

Inline

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

• content: 文本內容

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

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

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

Demo

Block
这个也是提供一个，而他可以隐藏、、等。( dispaly不能包含英文逗號，可用)

• content: 文本內容

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

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

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

Demo

Toggle
如果你需要展示的，可以把它在收缩框里，需要时再把它。

Demo

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

4.mermaid

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

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

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

使用mermaid标签可以绘制、、、、和，具体可以查看mermaid文檔
在中的中修改:

：

Demo

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

5.Tabs

Demo1------方式

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

Demo3------没有预设

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

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

6.Button

：

:

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

分享功能

分享功能有两种：

第一种：

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

主目录下–中修改:

第二种：

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

主目录下–中修改:

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

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

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

chatra
在chatra中账号.

tidio

在tidio中账号。

可以在中找到。

在中注册。

在---- 之中的

在gitter中登录上账号。

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

打开crisp，注册账号。

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

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

以下是举例的我在用的：