基于 Hexo 从零开始搭建个人博客（六）

阅读本篇前，请先阅读前几篇文章：
基于 Hexo 从零开始搭建个人博客（一）
基于 Hexo 从零开始搭建个人博客（二）
基于 Hexo 从零开始搭建个人博客（三）
基于 Hexo 从零开始搭建个人博客（四）
基于 Hexo 从零开始搭建个人博客（五）

前言

本站基于Hexo搭建，用的 🦋 hexo-theme-butterfly 主题，已经升级到 v4.7.0 。请注意最新的🦋 hexo-theme-butterfly 版本已经更新到 v4.8.1 。

如果你是 v3.7.1 的版本，请移步 v3.7.1 站点进行浏览。

注意：我的博客根目录路径为【G:/hexo-blog/blog-demo】，下文所说的根目录都是此路径，将用[BlogRoot]代替。如果不清楚根目录路径，请回到教程基于 Hexo 从零开始搭建个人博客（二），查看你执行hexo init xxx这条命令时所选择的路径，例如我选择的路径是【G:/hexo-blog】，我的博客根目录即为【G:/hexo-blog/xxx】。

修改站点配置文件_config.yml，路径为【BlogRoot/_config.yml】。

修改主题配置文件_config.butterfly.yml，路径为【BlogRoot/_config.butterfly.yml】。

更新记录

2023-02-14

更新【豆瓣插件】

2023-01-13

2022-11-12

更新【侧边栏电子时钟】教程

2022-11-10

2022-06-05 持续优化

2022-05-29 CDN替换方案

CDN解决方案：请参考基于 Hexo 从零开始搭建个人博客（五）

2021-11-27 valine获取评论失败

新增【valine获取评论失败说明】

2021-11-22 持续优化

2021-08-26 持续优化

2021-04-27 butterfly3.4.0 -> butterfly3.7.1

更新v3.7.1适配方案。
注意一点的是，butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache} 改为 { cache:true }。如果安装的版本较新，可直接忽略这一步。

Butterfly主题美化

生成文章唯一链接

Hexo的默认文章链接格式是年，月，日，标题这种格式来生成的。如果你的标题是中文的话，那你的URL链接就会包含中文。

1	permalink: :year/:month/:day/:title

前往你的Hexo博客根目录，打开cmd命令窗口执行npm install hexo-abbrlink --save。
1
npm install hexo-abbrlink --save

修改站点配置文件_config.yml中permalink属性。

- permalink: :year/:month/:day/:title/
#修改为
permalink: post/:abbrlink.html # post为自定义前缀
abbrlink:
  alg: crc32   #算法： crc16(default) and crc32
  rep: hex     #进制： dec(default) and hex

效果预览

查看步骤

编辑BlogRoot/themes/butterfly/layout/includes/footer.pug文件，

将以下内容

1	©${theme.footer.owner.since} - ${nowYear} By ${config.author}

改为

1	©${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

将以下内容

1	©${nowYear} By ${config.author}

改为

1	©${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

将以下内容添加到 <head></head>标签内：

1	<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

具体放置位置，可以参考下图：

修改标题样式

效果预览

回形针

旋转风车

查看步骤

在BlogRoot/themes/butterfly/source/css文件下新建 css 文件，并命名为 custom.css(命名按照自己喜好去命名，只需在主题配置文件_config.butterfly.yml中引入对应的css文件即可)，将以下代码复制到新建的custom.css中。

如果想自行修改标题样式的话，将content: '\f0c1';中的内容换成自己想要的即可，如要添加动画，参考animation: avatar_turn_around 1s linear infinite;。

#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before,
#post .post-outdate-notice:before,
.fontawesomeIcon,
.note:not(.no-icon)::before,
hr:before {
    display: inline-block;
    font-weight: 600;
    font-style: normal;
    font-variant: normal;
    font-family: 'Font Awesome 5 Free';
    text-rendering: auto;
    -webkit-font-smoothing: antialiased
}
#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before {
    position: absolute;
    color: #f47466;
    /* 回形针 */
    content: '\f0c1';  
    line-height: 1;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    transition: all .2s ease-out;
    /* 若要使用风车效果，请去掉下面的注释 */
    /* content: '\f863'; 
    animation: avatar_turn_around 1s linear infinite; */
}
#article-container h1 {
    padding-left: 1.4rem
}

#article-container h1 code {
    font-size: 1rem
}

#article-container h1:before {
    margin-left: -1.3rem;
    top: calc(50% - .5rem);
    font-size: 1rem
}

#article-container h1:hover {
    padding-left: 1.6rem
}

#article-container h2 {
    padding-left: 1.3rem
}

#article-container h2 code {
    font-size: .9rem
}

#article-container h2:before {
    margin-left: -1.4rem;
    top: calc(50% - .45rem);
    font-size: .9rem
}

#article-container h2:hover {
    padding-left: 1.5rem
}

#article-container h3 {
    padding-left: 1.2rem
}

#article-container h3 code {
    font-size: .8rem;
    top: calc(50% - .4rem);

}

#article-container h3:before {
    margin-left: -1.2rem;
    top: calc(50% - .4rem);
    font-size: .8rem
}

#article-container h3:hover {
    padding-left: 1.4rem
}

#article-container h4 {
    padding-left: 1.1rem
}

#article-container h4 code {
    font-size: .7rem
}

#article-container h4:before {
    margin-left: -1rem;
    top: calc(50% - .35rem);
    font-size: .7rem
}

#article-container h4:hover {
    padding-left: 1.3rem
}

#article-container h5 {
    padding-left: 1rem
}

#article-container h5 code {
    font-size: .6rem
}

#article-container h5:before {
    margin-left: -.8rem;
    top: calc(50% - .3rem);
    font-size: .6rem
}

#article-container h5:hover {
    padding-left: 1.2rem
}

#article-container h6 {
    padding-left: 1rem
}

#article-container h6 code {
    font-size: .6rem
}

#article-container h6:before {
    margin-left: -.8rem;
    top: calc(50% - .3rem);
    font-size: .6rem
}

#article-container h6:hover {
    padding-left: 1.2rem
}

添加豆瓣插件

~~此方法可能不再适用：node 版本过高导致，可以下个 nvm 来控制 node 版本，建议安装较低的 node 版本(推荐v12.18.0)~~

前往博客根目录，打开cmd命令窗口执行npm install hexo-douban --save。

1	npm install hexo-douban --save

修改站点配置文件_config.yml，添加如下代码：

douban:
  id: 228172215
  builtin: false
  item_per_page: 10
  book:
    path: books/index.html
    title: 'This is my book title'
    quote: 'This is my book quote'
    option:
  movie:
    path: movies/index.html
    title: 'This is my movie title'
    quote: 'This is my movie quote'
    option:
  game:
    path: games/index.html
    title: 'This is my game title'
    quote: 'This is my game quote'
    option:
  song:
    path: songs/index.html
    title: 'This is my song title'
    quote: 'This is my song quote'
    option:
  timeout: 10000

id: 你的豆瓣ID(纯数字格式，不是自定义的域名)。获取方法可以参考怎样获取豆瓣的数字 ID ？
builtin: 是否将 hexo douban 命令默认嵌入进 hexo g、hexo s，使其自动执行 hexo douban 命令。默认关闭。当你的豆瓣条目较多时，也建议关闭。
item_per_page: 每页展示的条目数，默认 10 。
path: 生成页面后的路径，默认生成在 //my-blog/books/index.html 等下面。如需自定义路径，则可以修改这里。
title: 该页面的标题。
quote: 写在页面开头的一段话,支持 html 语法。
option: 该页面额外的 Front-matter 配置，参考 Hexo 文档。无特别需要，留空即可。
timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

在主题配置文件_config.butterfly.yml中配置以下内容：

# 如果你有使用hexo-douban，可配置這個
douban:
   meta: true
   movies_img: https://fastly.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg
   books_img: https://fastly.jsdelivr.net/npm/blog-gallery@1.0.0/1/20200206161657.webp
#   games_img:

前往博客根目录，打开cmd命令窗口执行hexo douban。

1	hexo douban

等待命令执行完毕，出现下图所示内容即为成功。

请注意，我的butterfly主题版本不是最新的，导航菜单栏格式请按照最新的格式写。

如下图：

添加访客地图

效果预览

查看步骤

前往 clustrmaps 网站注册一个帐号。

找到Free Tools下面的Website Widget, 点击Get Map Widget。

输入你的博客网址，点击Next。

根据你自己的喜好选择样式Map widget或Globe Widget（本人使用后者）。

找到如下代码，记住 src (****** 的部分):

1	<script type="text/javascript" id="clstr_globe" src="**********************">

在 BlogRoot/themes/butterfly/layout/includes/widget文件夹新建card_map.pug文件，文件内容如下：

.card-widget.card-map
  .card-content
    .item-headline
      i.fa.fa-globe-asia(aria-hidden="true")
      span= _p('aside.card_map')
    script#clstr_globe(type="text/javascript" defer="defer" src="此处填入你自己的代码")

编辑 BlogRoot/themes/butterfly/layout/includes/widget/index.pug文件，在你想要显示的位置插入以下代码（注意格式）：

1 2	if theme.aside.card_map !=partial('includes/widget/card_map', {}, {cache:true})

具体放置位置，可以参考下图：

编辑主题配置文件_config.butterfly.yml，在card_webinfo下面添加一行card_map: true。

编辑BlogRoot/themes/butterfly/languages/zh-CN.yml文件 (请根据你的网站语言选择)，找到card_announcement: 公告 , 在下面添加一行card_map: 访客地图 (后面的文本可自定义),繁体字方法一样，修改BlogRoot/themes/butterfly/languages/zh-TW.yml文件就行。

如果不想显示，直接把主题配置文件_config.butterfly.yml中的card_map: true 改为 card_map: false 即可。

添加Pixiv日榜

效果预览

查看步骤

在BlogRoot/themes/butterfly/layout/includes/widget文件夹新建 card_pixiv.pug文件，文件内容如下：

.card-widget.card-pixiv
 .card-content
  .item-headline
    i.fa.fa-image(aria-hidden="true")
    span= _p('aside.card_pixiv')
    iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0"  style="width:99%;height:380px;margin:0;")

https://cloud.mokeyjay.com/pixiv 使用的是超能小紫提供的服务，也可以自行搭建，搭建方式请看这里。

编辑BlogRoot/themes/butterfly/layout/includes/widget/index.pug 文件，在你想要显示的位置插入以下代码：
1
2
if theme.aside.card_pixiv
!=partial('includes/widget/card_pixiv', {}, {cache:true})
编辑主题配置文件_config.butterfly.yml，在 card_webinfo 下面添加一行 card_pixiv: true，可以通过搜索关键词 aside，找到对应位置添加即可。不想显示，直接把文件中的 card_pixiv: true 改为 card_pixiv: false 即可。
编辑 BlogRoot/themes/butterfly/languages/zh-CN.yml文件 (请根据你的网站语言选择)，找到card_announcement: 公告，在下面添加一行card_pixiv: Pixiv日榜Top50(后面的文本可自定义)。

哔哩哔哩番剧页面插件

效果预览

查看步骤

关于图片加载相关问题

懒加载问题，此插件懒加载可能与你主题的懒加载存在冲突，以下为几种解决方法：

1.全站关闭懒加载，此插件启用/不启用懒加载均可正常运行；
2.如果主题提供单独页面的懒加载配置参数，可在插件配置的extra_option中配置为关。
3.[建议]关闭此插件的懒加载，并按照主题的懒加载图片格式配置srcValue和lazyloadAttrName，例butterfly主题：

bangumi:
  enable: true
  ...
  lazyload: false
  srcValue: '__image__'
  ...

更多详情可见：关于图片加载相关问题

安装依赖

1	npm install hexo-bilibili-bangumi --save

更新依赖库

1	npm install hexo-bilibili-bangumi --update --save

注入哔哩哔哩番剧
修改站点配置文件_config.yml，添加如下代码：
1
2
3
4
5
6
7
bangumi:
enable: true
vmid: 321638084
title: '生命不息，追番不止。'
quote: 'Where there is life, there is life.'
show: 1
loading: '/img/bangumi-loading.gif'
配置说明：
- enable: 是否启用
- vmid: 哔哩哔哩番剧页面的 vmid(uid), 如何获取？
- title: 该页面的标题
- quote: 写在页面开头的一段话，支持 html 语法
- show: 初始显示页面：0: 想看 , 1: 在看 , 2: 看过，默认为 1
- loading: 图片加载完成前的 loading 图片
执行Docs命令
前往博客根目录，打开cmd命令窗口执行hexo new page bangumis。
1
hexo new page bangumis
找到 BlogRoot/source/bangumis/index.md 这个文件，修改这个文件，添加 type: "bangumis"。
1
2
3
4
5
---
title: bangumis
date: 2020-12-14 14:43:39
type: "bangumis"
---
防止请求次数过多插件不再自动获取番剧数据，所以请根据自己的需要在hexo generate或hexo deploy之前使用hexo bangumi -u命令更新番剧数据。
删除数据命令: hexo bangumi -d
获取 uid
登录哔哩哔哩后前往 https://space.bilibili.com/xxx，网址最后的一串数字就是 uid。

添加卡通人物（看板娘）

效果预览

查看步骤

前往博客根目录，打开cmd命令窗口执行npm install --save hexo-helper-live2d。

1	npm install --save hexo-helper-live2d

输入以下命令，下载相应的模型，替换成你想要的模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者

1	npm install --save live2d-widget-model-shizuku

修改站点配置文件_config.yml，添加如下代码：

live2d:
  enable: true
  scriptFrom: local # 默认
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-shizuku  #模型选择
  display:
    position: right  #模型位置
    width: 150       #模型宽度
    height: 300      #模型高度
    hOffset: 20
    vOffset: -20
  mobile:
    show: false      #是否在手机端显示

重新编译运行，即可看到效果。

添加全局吸底APlayer

参考链接：Butterfly添加全局吸底Aplayer教程
此步骤适用于安装了hexo-tag-aplayer插件的人

效果预览

查看步骤

前往博客根目录，打开cmd命令窗口执行以下命令：
1
npm i hexo-tag-aplayer --save
关闭asset_inject
由于需要全局都插入 aplayer 和 meting 资源，为了防止插入重复的资源，需要把 asset_inject 设为false。
修改站点配置文件_config.yml，配置以下内容：
1
2
3
aplayer:
meting: true
asset_inject: false
开启主题的aplayerInject
修改主题配置文件_config.butterfly.yml，将enable设为true和per_page设为true。
1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
enable: true
per_page: true

插入Aplayer html
为了适配hexo-tag-aplayer，主题内置的Meting js仍为1.2版本，并非最新的2.x版本。
Aplayer html 例子（示例中没有显示歌词）：

<div class="aplayer no-destroy" data-id="7427714271" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="true" muted></div>

参数解释如下表：

option	default	description
data-id	require	song id / playlist id / album id / search keyword
data-server	require	music platform: netease, tencent, kugou, xiami, baidu
data-type	require	song, playlist, album, search, artist
data-fixed	false	enable fixed mode
data-mini	false	enable mini mode
data-autoplay	false	audio autoplay
data-theme	#2980b9	main color
data-loop	all	player loop play, values: ‘all’, ‘one’, ‘none’
data-order	list	player play order, values: ‘list’, ‘random’
data-preload	auto	values: ‘none’, ‘metadata’, ‘auto’
data-volume	0.7	default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
data-mutex	true	prevent to play multiple player at the same time, pause other players when this player start play
data-lrctype	0	lyric type
data-listfolded	false	indicate whether list should folded at first
data-listmaxheight	340px	list max height
data-storagename	metingjs	localStorage key that store player setting

require代表着这些参数是必须要使用的，其它的参数则可以根据自己需要配置。
配置全局吸底，data-fixed和data-mini也必须配置，配置为true。
如果使用Pjax，则在class里需添加no-destroy，这样防止切换页面时Aplayer被销毁。

将以下代码插入到主题配置文件（_config.butterfly.yml）的 “inject.bottom” 中

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="7427714271" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="true" muted></div>

运行Hexo就可以看到网页左下角出现了Aplayer。最后，如果你想切换页面时，音乐不会中断。请把主题配置文件的 “pjax” 设为 “true” 。

1
2
3

pjax:
  enable: true
  exclude:

UI 调整

向上调整

1
2
3

#toggle-sidebar {
    bottom: 80px
}

修改主题配置文件`_config.butterfly.yml`，将代码添加到 “inject.head” 中。

1
2
3

inject:
    head:
    - '<style type="text/css">#toggle-sidebar {bottom: 80px}</style>'

向右调整

1
2
3

#toggle-sidebar {
    left: 100px
}

修改主题配置文件（_config.butterfly.yml），将代码添加到 “inject.head” 中。

1
2
3

inject:
    head:
    - '<style type="text/css">#toggle-sidebar {left:100px}</style>'

添加贡献日历

效果预览

查看步骤

我的版本可能比较旧，贡献日历已经更新迭代了，所以直接参此教程：Gitcalendar

主页冒泡特效

效果预览

查看步骤

在BlogRoot/themes/butterfly/source/js目录下创建一个chocolate.js文件。

具体位置，请看下图所示：

直接复制导入如下代码：

/*
 * @Author: tzy1997
 * @Date: 2020-12-15 20:55:25
 * @LastEditors: tzy1997
 * @LastEditTime: 2021-01-12 19:02:25
 */

$(function() {
    // 气泡
    function bubble() {
        $('#page-header').circleMagic({
            radius: 10,
            density: .2,
            color: 'rgba(255,255,255,.4)',
            clearOffset: 0.99
        });
    }! function(p) {
        p.fn.circleMagic = function(t) {
            var o, a, n, r, e = !0,
                i = [],
                d = p.extend({ color: "rgba(255,0,0,.5)", radius: 10, density: .3, clearOffset: .2 }, t),
                l = this[0];

            function c() { e = !(document.body.scrollTop > a) }

            function s() { o = l.clientWidth, a = l.clientHeight, l.height = a "px", n.width = o, n.height = a }

            function h() {
                if (e)
                    for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
                requestAnimationFrame(h)
            }

            function f() {
                var t = this;

                function e() { t.pos.x = Math.random() * o, t.pos.y = a 100 * Math.random(), t.alpha = .1 Math.random() * d.clearOffset, t.scale = .1 .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color = "rgba(" Math.floor(255 * Math.random()) ", " Math.floor(0 * Math.random()) ", " Math.floor(0 * Math.random()) ", " Math.random().toPrecision(2) ")" : t.color = d.color }
                t.pos = {}, e(), this.draw = function() { t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath() }
            }! function() {
                o = l.offsetWidth, a = l.offsetHeight,
                    function() {
                        var t = document.createElement("canvas");
                        t.id = "canvas", t.style.top = 0, t.style.zIndex = 0, t.style.position = "absolute", l.appendChild(t), t.parentElement.style.overflow = "hidden"
                    }(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
                for (var t = 0; t < o * d.density; t++) {
                    var e = new f;
                    i.push(e)
                }
                h()
            }(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
        }
    }(jQuery);

    // 调用气泡方法
    bubble();
})

最后，在主题配置文件_config.butterfly.yml中，引入jquery.min.js和chocolate.js。

inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    - <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script>
    - <script data-pjax defer src="https://npm.elemecdn.com/tzy-blog/lib/js/theme/chocolate.js"></script>

鼠标样式

效果预览

查看步骤

将以下代码复制到custom.css即可。

body {
    cursor: url(https://bu.dusays.com/2022/05/17/6283c365d20dd.png), auto;
}

.hide-block>.hide-button.open,
.hide-inline>.hide-button.open {
    display: block
}

a,
button,
img {
    cursor: url(https://bu.dusays.com/2022/05/17/6283c376afcfc.png), auto
}

鼠标 * 字跟随掉落效果

效果预览

查看步骤

在BlogRoot/themes/butterfly/source/js目录下创建一个cursor.js文件。

/*!
 * Fairy Dust Cursor.js
 * - 90's cursors collection
 * -- https://github.com/tholman/90s-cursor-effects
 * -- http://codepen.io/tholman/full/jWmZxZ/
 */

(function fairyDustCursor() {

    var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
    var width = window.innerWidth;
    var height = window.innerHeight;
    var cursor = { x: width / 2, y: width / 2 };
    var particles = [];

    function init() {
        bindEvents();
        loop();
    }

    // Bind events that are needed
    function bindEvents() {
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('touchmove', onTouchMove);
        document.addEventListener('touchstart', onTouchMove);

        window.addEventListener('resize', onWindowResize);
    }

    function onWindowResize(e) {
        width = window.innerWidth;
        height = window.innerHeight;
    }

    function onTouchMove(e) {
        if (e.touches.length > 0) {
            for (var i = 0; i < e.touches.length; i++) {
                addParticle(e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
            }
        }
    }

    function onMouseMove(e) {
        cursor.x = e.clientX;
        cursor.y = e.clientY;

        addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
    }

    function addParticle(x, y, color) {
        var particle = new Particle();
        particle.init(x, y, color);
        particles.push(particle);
    }

    function updateParticles() {

        // Updated
        for (var i = 0; i < particles.length; i++) {
            particles[i].update();
        }

        // Remove dead particles
        for (var i = particles.length - 1; i >= 0; i--) {
            if (particles[i].lifeSpan < 0) {
                particles[i].die();
                particles.splice(i, 1);
            }
        }

    }

    function loop() {
        requestAnimationFrame(loop);
        updateParticles();
    }

    /**
     * Particles
     */

    function Particle() {

        this.character = "*";
        this.lifeSpan = 120; //ms
        this.initialStyles = {
            "position": "fixed",
            "top": "0", //必须加
            "display": "block",
            "pointerEvents": "none",
            "z-index": "10000000",
            "fontSize": "20px",
            "will-change": "transform"
        };

        // Init, and set properties
        this.init = function(x, y, color) {

            this.velocity = {
                x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
                y: 1
            };

            this.position = { x: x - 10, y: y - 20 };
            this.initialStyles.color = color;

            this.element = document.createElement('span');
            this.element.innerHTML = this.character;
            applyProperties(this.element, this.initialStyles);
            this.update();

            document.body.appendChild(this.element);
        };

        this.update = function() {
            this.position.x += this.velocity.x;
            this.position.y += this.velocity.y;
            this.lifeSpan--;

            this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
        }

        this.die = function() {
            this.element.parentNode.removeChild(this.element);
        }

    }

    /**
     * Utils
     */

    // Applies css `properties` to an element.
    function applyProperties(target, properties) {
        for (var key in properties) {
            target.style[key] = properties[key];
        }
    }
    if ($(window).innerWidth() > 576) {
        init();
    }
})();

然后，在主题配置文件_config.butterfly.yml中，引入cursor.js文件。

滚动条

查看步骤

将以下代码复制到custom.css即可。

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    border-radius: 2em;
    /* background-color: rgba(73, 177, 245, .2); */
}

::-webkit-scrollbar-thumb {
    background-color: rgb(255 255 255 / .3);
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    border-radius: 2em
}

::-webkit-scrollbar-corner {
    background-color: transparent
}

手机侧边栏默认不展开

若主题版本大于 v4.0.0，可直接在子目录里添加 hide ：

menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  List||fas fa-list||hide:
    Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart

v3.7.1 版本中直接默认子目录是展开的，如果你想要隐藏，按下面步骤操作即可。

效果预览

查看步骤

在BlogRoot/themes/butterfly/source/js文件下新建 js 文件，并命名为 custom.js(命名按照自己喜好去命名，只需在主题配置文件_config.butterfly.yml中引入对应的js文件即可)，将以下代码复制到新建的custom.js中。

/* 手机侧边栏默认不展开 */
var mobile_sidebar_menus = document.getElementById("sidebar-menus");
if (mobile_sidebar_menus) {
    var menus_item_child = mobile_sidebar_menus.getElementsByClassName(
        "menus_item_child"
    );
    var menus_expand = mobile_sidebar_menus.getElementsByClassName("expand");
    for (var i = 0; i < menus_item_child.length; i++) {
        menus_item_child[i].style.display = "none";
    }
}

图库

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

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

<div class="gallery-group-main">
{% galleryGroup 'ACG' '那些二次元的故事' '/gallery/ACG' https://bu.dusays.com/2022/11/26/638228a86935a.webp %}
{% galleryGroup '岳阳' '2017年5月岳阳' '/gallery/YY' https://bu.dusays.com/2022/11/27/63831b681e9f8.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

子页面

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

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

{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}

[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]

如果你想要使用/photo/ohmygirl这样的链接显示你的图片内容

你可以把创建好的ohmygirl整个文件夹移到photo文件夹里去

Valine评论邮件回复提醒

由于 Valine 的国际版共享域名将于 2022 年 8 月 1 日起不再向中国大陆的最终用户提供服务，国际版共享域名仅服务于海外用户。本站已弃用 Valine ，改为 Twikoo。如果你更喜欢 Valine 的风格，你可以使用它的国区版。

参考教程

Hexo 优化 — Valine 扩展之邮件通知
 Valine 添加验证码、博主标签及评论微信、QQ 通知

我的表情数据包

这里放上我的valine表情数据，展示如下图：

下载请点击下面按钮：

下载表情文件

改写 menhera 表情样式

去除了dark模式下评论者头像的 border 和 padding（我是默认dark，如果不喜欢，则将css中的第一段去掉）。

因为 valine的默认宽度是 25px ，对于 menhera-chan 表情根本无法看清，所以将它pc端评论后的表情加载设置成300px，设屏宽小于768px的，让它继承继承父元素的100%宽 - 30px ，30px是为了与右侧有一段细微间隔，下图可以看到手机端的时候，表情和盒子最右侧是有一定距离的。

对于浏览选择 menhera-chan 表情时，宽度太小，看不清图片，所以这里调整为设备宽的 21%-22% 。QQ和B站表情保持不变，只对 menhera-chan 表情做出改善。

将以下代码复制到custom.css即可。

/* valine 评论 */

/* 去除了dark模式下头像border和padding */
[data-theme='dark'] .v[data-class=v] .vcards .vcard .vimg {
    padding: 0;
    border: none;
}

[data-theme='dark'] #post .v[data-class=v] .vcontent img {
    display: inline-block;
}

.v[data-class=v] .emoji,
.v[data-class=v] .vemoji {
    vertical-align: text-bottom;
}

.v[data-class=v] .vwrap .vemojis {
    max-height: 260px !important;
}

.v[data-class=v] .vwrap .vemojis i[title|=menhera] {
    width: 22% !important;
    margin: 5px 10px;
}

.v[data-class=v] .vwrap .vemojis img[alt|=menhera] {
    max-width: 100% !important;
}

.v[data-class=v] .vcontent .emoji[alt|=menhera],
.v[data-class=v] .vcontent .vemoji[alt|=menhera] {
    max-width: 300px !important;
    /* vertical-align: middle; */
    margin: 8px 1px;
    display: block !important;
}

@media screen and (max-width: 1200px) {
    .v[data-class=v] .vwrap .vemojis i[title|=menhera] {
        margin: 5px 8px;
    }
}

@media screen and (max-width: 768px) {
    .v[data-class=v] .vcontent .emoji[alt|=menhera],
    .v[data-class=v] .vcontent .vemoji[alt|=menhera] {
        max-width: calc(100% - 30px) !important;
    }
}

@media screen and (max-width: 576px) {
    .v[data-class=v] .vwrap .vemojis {
        max-height: 200px !important;
    }
    .v[data-class=v] .vwrap .vemojis i[title|=menhera] {
        margin: 5px 5px;
    }
}

@media screen and (max-width: 400px) {
    .v[data-class=v] .vwrap .vemojis i[title|=menhera] {
        width: 21% !important;
    }
}

效果如下：

[{"url":"https://bu.dusays.com/2021/08/26/84d3e2911b8ec.jpg","alt":""},{"url":"https://bu.dusays.com/2021/08/26/24353a0e2da4f.jpg","alt":""},{"url":"https://bu.dusays.com/2021/03/05/987c04fdd05f6.jpg","alt":""},{"url":"https://bu.dusays.com/2021/03/05/396f32b981353.jpg","alt":""},{"url":"https://bu.dusays.com/2021/03/05/72321b1f63e2c.jpg","alt":""},{"url":"https://bu.dusays.com/2021/03/05/564b64b674298.jpg","alt":""}]

添加[博主,小伙伴,访客]标签

打开BlogRoot/themes/butterfly/layout/includes/third-party/comments/valine.pug,按指示添加如下字段。

function initValine () {
    const valine = new Valine(Object.assign({
        el: '#vcomment',
        appId: '#{theme.valine.appId}',
        appKey: '#{theme.valine.appKey}',
        placeholder: '#{theme.valine.placeholder}',
        avatar: '#{theme.valine.avatar}',
        meta: '#{theme.valine.guest_info }'.split(','),
        pageSize: '#{theme.valine.pageSize}',
        lang: '#{theme.valine.lang}',
        recordIP: #{theme.valine.recordIP},
        serverURLs: '#{theme.valine.serverURLs}',
        emojiCDN: '#{theme.valine.emojiCDN}',
        emojiMaps: !{emojiMaps},
        enableQQ: #{theme.valine.enableQQ},
        path: window.location.pathname,
        requiredFields: [!{theme.valine.requiredFields ? JSON.stringify(theme.valine.requiredFields).split(',') : ''}],
      master: '#{theme.valine.master}'.split(','),
      friends: '#{theme.valine.friends}'.split(','),
      tagMeta: '#{theme.valine.tagMeta || "博主,小伙伴,访客"}'.split(','),
      metaPlaceholder: !{JSON.stringify(theme.valine.metaPlaceholder || {})},
        visitor: #{theme.valine.visitor}
    }, !{JSON.stringify(theme.valine.option)}))
}

如图所示：

修改主题配置文件_config.butterfly.yml的valine属性。

valine配置项添加 md5加密的博主邮箱，小伙伴邮箱

# valine
# https://valine.js.org
valine:
  appId:  # leancloud application app id
  appKey:  # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder:  # valine comment input placeholder (like: Please leave your footprints)
  guest_info: nick,mail,link # valine comment header info (nick/mail/link)
  recordIP: false # Record reviewer IP
  serverURLs:  # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  emojiCDN:  # emoji CDN
  enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)
master: # md5加密后的博主邮箱
  - d4e7????????????44a14e9a94  #可添加多个
friends: # md5加密后的小伙伴邮箱
  - 5c?????????????e268ad3819c #可添加多个
  - 7c?????????????e2????3919c
tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'
metaPlaceholder:
  nick: 昵称/QQ号(必填)
  mail: 邮箱(必填)
  link: 网址(https://)

如图所示：

在主题配置文件_config.butterfly.yml的CDN配置项添加如下内容。将Valine.min.js替换成魔改版本。

    CDN:
      # comments
      gitalk: https://fastly.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
      gitalk_css: https://fastly.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
-     valine: https://fastly.jsdelivr.net/npm/valine/dist/Valine.min.js
    valine: https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/valine_f/valine.min.js

valine获取评论失败

如下图：

这里并没有加载和渲染 valine 评论数据，但在 LeanCloud 数据存储中是存在评论数据的。

原因：LeanCloud 国际版通用域名失效

打开控制台发现https://us.avoscloud.com/1.1/classes/Comment?xxxxx已经请求失败（net::ERR_NAME_NOT_RESOLVED），域名也无法ping通。

解决办法：

将 Valine 指定自定义服务器URL。在主题配置里的 Valine 的 serverURLs 填入https://xxxxxxxx.api.lncldglobal.com。自定义服务器的URL需要到 LeanCloud后台查看。打开后台之后进入 Settings - App Keys ，Request domain 里面的xxxxxxxx.api.lncldglobal.com就是你需要指定的服务器URL。xxxxxxxx 就是 AppID的前8位字符。

如下图:

经 postman 测试，https://xxxxxxxx.api.lncldglobal.com/1.1/classes/Comment?x=x&xx=xx该接口会正常返回评论数据。

关于valine评论，这里会抽空写一篇详细的教程，敬请期待。

首页分类磁铁

原教程：Categories Magnet

效果预览

插件版教程（推荐👍）

安装依赖，前往博客根目录，打开cmd命令窗口执行如下命令：
1
npm install hexo-butterfly-categories-card --save

添加配置信息，在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

categoryBar:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  column: odd # odd：3列 | even：4列
  row: 1 #显示行数，默认两行，超过行数切换为滚动显示
  message:
    - descr: Ubuntu指南
      cover: https://assets.akilar.top/image/cover1.webp
    - descr: 玩转Win10
      cover: https://assets.akilar.top/image/cover2.webp
    - descr: 长篇小说连载
      cover: https://assets.akilar.top/image/cover3.webp
    - descr: 个人日记
      cover: https://assets.akilar.top/image/cover4.webp
    - descr: 诗词歌赋
      cover: https://assets.akilar.top/image/cover5.webp
    - descr: 杂谈教程
      cover: https://assets.akilar.top/image/cover6.webp
  custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css

参数意义

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable	true/false	【必选】控制开关
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
column	odd/even	【可选】显示列数，考虑到比例问题，只提供3列和4列，odd为3列， even为4列
row	number	【可选】显示行数，默认两行，超过行数切换为滚动显示

旧版教程（不推荐）

修改BlogRoot/themes/butterfly/layout/index.pug

extends includes/layout.pug
block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
  if theme.categoryBar.enable
    .recent-post-item(style='height:auto;width:100%;padding:0px;')
      #categoryBar!= list_categories(site.categories,{class: 'categoryBar',depth: 1})
    +postUI
    include includes/pagination.pug

新建BlogRoot/themes/butterfly/source/css/_layout/categoryBar.styl

if hexo-config('categoryBar.enable')
  #categoryBar
    width 100%!important
  ul
    &.categoryBar-list
      margin 5px 5px 0 5px!important
      padding 0!important

  li
    &.categoryBar-list-item
      font-weight bold
      display inline-block
      height 180px!important
      margin 5px .5% 0 .5%!important
      background-image linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(16, 16, 16, 0) 100%)
      border-radius 10px
      padding 25px 0 25px 25px!important
      box-shadow rgba(50, 50, 50, 0.3)  50px 50px 50px 50px inset
      overflow hidden
      background-size 100%!important
      background-position center!important
      &:hover
        background-size 110%!important
        box-shadow inset 500px 50px 50px 50px rgba(50,50,50, 0.6)
        span
          &.categoryBar-list-count
            &::after
              transition all .5s
              transform translate(-100%, 0)
  a
    &.categoryBar-list-link
      color white!important
      font-size 20px!important
      &::before
        content '|'!important
        color white!important
        font-size 20px!important
      &:after
        content ''
        position relative
        width 0
        bottom 0
        display block
        height 3px
        border-radius 3px
        background-color white
      &:hover
        &:after
          width 90%
          left 1%
          transition all 0.5s

  span
    &.categoryBar-list-count
      display block!important
      color white!important
      font-size 20px!important
      &::before
        content '\f02d'!important
        padding-right 15px!important
        @extend .fontawesomeIcon
      &::after
        padding 5px
        display block!important
        color white!important
        font-size 20px!important
        position relative
        right -100%
  covers = hexo-config('categoryBar.cover')
  for cover,i in covers
    li.categoryBar-list-item:nth-child({i+1})
      background unquote(cover)
  descrs = hexo-config('categoryBar.descr')
  for descr,i in descrs
    li.categoryBar-list-item:nth-child({i+1})>span::after
      content descr!important
  if hexo-config('categoryBar.column') == 'odd'
    li
      &.categoryBar-list-item
        width 32.3%!important
  else if hexo-config('categoryBar.column') == 'even'
    li
      &.categoryBar-list-item
        width 24%!important
  @media screen and (max-width: 650px)
    li
      &.categoryBar-list-item
        width 48%!important
        height 150px!important
        margin 5px 1% 0 1%!important

  $caterow =  hexo-config('categoryBar.row')?hexo-config('categoryBar.row'):2
  .categoryBar-list
    max-height 190px * $caterow
    overflow auto
    &::-webkit-scrollbar
      width 0!important
  @media screen and (max-width: 650px)
    .categoryBar-list
      max-height 160px * $caterow

在主题配置文件_config.butterfly.yml中添加配置项：

categoryBar:
  enable: true
  column:  odd # 显示列数,odd：3列 | even：4列
  row: 2 #显示行数，默认两行，超过行数切换为滚动显示
  descr:
    - Good things to share
    - Back end talk
    - personal diary
    - Front end serialization
    - Butterfly theme
    - Other items
  cover:
    - url('https://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover1.webp')
    - '#abcdef' # HEX格式色值需要用''包裹，不然会被识别成注释
    - rgba(45,67,89,0.7)
    - linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(200,16 , 16, 0) 100%)
    - url('https://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover5.webp')
    - url('https://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover6.webp')

侧边栏电子时钟

效果预览

查看步骤（新版，推荐👍）

✨可参考教程✨：给butterfly添加侧边栏电子钟

如果跑过下面旧版的教程，前往博客根目录，卸载原版电子钟插件，打开cmd命令窗口执行如下命令：
1
npm uninstall hexo-butterfly-clock
安装新的插件，前往博客根目录，打开cmd命令窗口执行如下命令：
1
npm install hexo-butterfly-clock-anzhiyu --save

在站点配置文件_config.yml 或主题配置文件_config.butterfly.yml 中添加配置信息

electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif #加载动画自定义
  clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
  clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js
  ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
  # 和风天气key 默认是 b16a1fa0e63c46a4b8f28abfb06ae3fe
  qweather_key: # 你的key
  # 高得地图web服务key 默认为 e2b04289e870b005374ee030148d64fd&s=rsv3
  gaud_map_key: # 你的key
  default_rectangle: false # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
  rectangle: 112.982279,28.19409 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置

具体参数含义

点击查看具体参数

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
enable	true/false	【必选】控制开关
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为 all
exclude	path	【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.type	id/class	【可选】挂载容器类型，填写 id 或 class，不填则默认为 id
layout.name	text	【必选】挂载容器名称
layout.index	0 和正整数	【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位
loading	URL	【可选】电子钟加载动画的图片
clock_css	URL	【可选】电子钟样式 CDN 资源
clock_js	URL	【可选】电子钟执行脚本 CDN 资源
ip_api	URL	【可选】获取时钟 IP 的 API
qweather_key	text	【可选】和风天气 key
gaud_map_key	text	【可选】高得地图 web 服务 key
default_rectangle	text	【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气
rectangle	text	【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置

【qweather_key】和【gaud_map_key】建议自己申请。

qweather_key 申请流程

qweather_key 传送门
登录后进入控制台(可能要绑定邮箱和手机)
创建项目，项目名称(名字随意)、勾选【免费订阅】、适用平台【 Web API】、KEY的名称（随意填），最后点击【创建】
可在项目管理中，到对应的【key】

gaud_map_key 申请流程

gaud_map_key 传送门
登录后完成一些认证（个人开发），进入控制台
创建应用，应用名称随意，类型选其他
点击【添加】，【key名称】随便填，【服务平台】选择 Web服务，点击提交，就得到【key】了

查看步骤（旧版，不建议）

✨参考教程✨: Sidebar Card Clock

安装依赖，前往博客根目录，打开cmd命令窗口执行如下命令：
1
npm install hexo-butterfly-clock --save

在站点配置文件_config.yml添加配置项：

# electric_clock
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/theme_f/loading.gif #加载动画自定义

更换字体

查看步骤

添加下面这段css即可。

@font-face {
    font-family: 'tzy';
    /* 字体名自定义即可 */
    /* src: url('https://cdn.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/font/ZhuZiAWan.woff2'); */
    src: url('https://npm.elemecdn.com/ethan4116-blog/lib/font/ZhuZiAWan.ttf');
    /* 字体文件路径 */
    font-display: swap;
}

body,
.gitcalendar {
    font-family: tzy !important;
}

局部css优化

查看代码


.categoryBar-list {
    max-height: 400px;
}

.clock-row {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*3s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/

#page-header,
#web_bg {
    -webkit-animation: imgblur 2s 1 ease-in-out;
    animation: imgblur 2s 1 ease-in-out;
}

@keyframes imgblur {
    0% {
        filter: blur(5px);
    }
    100% {
        filter: blur(0px);
    }
}

/*适配使用-webkit内核的浏览器 */

@-webkit-keyframes imgblur {
    0% {
        -webkit-filter: blur(5px);
    }
    100% {
        -webkit-filter: blur(0px);
    }
}
.table-wrap img {
    margin: .6rem auto .1rem !important;
}

/* 标签外挂 网站卡片 start */

.site-card-group img {
    margin: 0 auto .1rem !important;
}

.site-card-group .info a img {
    margin-right: 10px !important;
}

[data-theme='dark'] .site-card-group .site-card .info .title {
    color: #f0f0f0 !important;
}

[data-theme='dark'] .site-card-group .site-card .info .desc {
    color: rgba(255, 255, 255, .7) !important;
}

.site-card-group .info .desc {
    margin-top: 4px !important;
}
/* 代码块颜色 */

figure.highlight pre .addition {
    color: #00bf03 !important;
}

禁止右键及F12等事件

效果预览

查看步骤（新版，推荐👍）

~~旧版教程（已弃用）~~，对于高版本浏览器，可以先打开控制台再进入站点（亲测 Google Chrome v100），因此本站已弃用forbidden_control()，可直接删除。引入的 function.min.css 也可以删除。

下面开始新的教程，如果你不需要 ~~禁用控制台~~ 以及 ~~禁用一些特殊 keyCode 事件~~ ，可直接忽略。

修改【BlogRoot/themes/butterfly/layout/includes/layout.pug】，根据图中位置添加以下 pug 代码（跟 head、body同级）。

script.
  ((function() {var callbacks = [],timeLimit = 50,open = false;setInterval(loop, 1);return {addListener: function(fn) {callbacks.push(fn);},cancleListenr: function(fn) {callbacks = callbacks.filter(function(v) {return v !== fn;});}}
  function loop() {var startTime = new Date();debugger;if (new Date() - startTime > timeLimit) {if (!open) {callbacks.forEach(function(fn) {fn.call(null);});}open = true;window.stop();alert('你真坏，请关闭控制台！');document.body.innerHTML = "";} else {open = false;}}})()).addListener(function() {window.location.reload();});
script.
  function toDevtools(){
    let num = 0; 
    let devtools = new Date();
    devtools.toString = function() {
      num++;
      if (num > 1) {
          alert('你真坏，请关闭控制台！')
          window.location.href = "about:blank"
          blast();
      }
    }
    console.log('', devtools);
  }
  toDevtools();

将以下代码复制到自定义的custom.js

1
2
3

document.onkeydown = function (e) {
    if (123 == e.keyCode || (e.ctrlKey && e.shiftKey && (74 === e.keyCode || 73 === e.keyCode || 67 === e.keyCode)) || (e.ctrlKey && 85 === e.keyCode)) return btf.snackbarShow("你真坏，不能打开控制台喔!"), event.keyCode = 0, event.returnValue = !1, !1
};

重新编译运行，即可看到效果。
注意: 如果自己调试阶段，可注释第一步和第二步中的代码，再进行编译，就可以打开控制台了。部署时放开注释，编译好再丢上去就OK了。

查看步骤（旧版，已弃用）

在主题配置的 inject 的 head 里引入这个 css。

1	<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/css/function.min.css">

将以下代码复制到自定义的custom.js，执行 forbidden_control() 执行即可看到效果。

function forbidden_control() {
    $.extend({
        message: function(a) {
            var b = {
                title: "",
                message: "操作成功",
                time: "3000",
                type: "success",
                showClose: !0,
                autoClose: !0,
                onClose: function() {}
            };
            "string" == typeof a && (b.message = a), "object" == typeof a && (b = $.extend({}, b, a));
            var c, d, e, f = b.showClose ? '<div class="c-message--close">×</div>' : "",
                g = "" !== b.title ? '<h2 class="c-message__title">' b.title "</h2>" : "",
                h = '<div class="c-message animated animated-lento slideInRight"><i class=" c-message--icon c-message--' b.type '"></i><div class="el-notification__group">' g '<div class="el-notification__content">' b.message "</div>" f "</div></div>",
                i = $("body"),
                j = $(h);
            d = function() {
                j.addClass("slideOutRight"), j.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
                    e()
                })
            }, e = function() {
                j.remove(), b.onClose(b), clearTimeout(c)
            }, $(".c-message").remove(), i.append(j), j.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
                j.removeClass("messageFadeInDown")
            }), i.on("click", ".c-message--close", function(a) {
                d()
            }), b.autoClose && (c = setTimeout(function() {
                d()
            }, b.time))
        }
    }),
    document.onkeydown = function(e) {
        if (123 == e.keyCode || e.ctrlKey && e.shiftKey && (74 === e.keyCode || 73 === e.keyCode || 67 === e.keyCode) || (e.ctrlKey && 85 === e.keyCode)) return $.message({
            message: "采用本站js及css请注明来源，禁止商业使用！",
            title: "你真坏，不能打开控制台喔!",
            type: "error",
            autoHide: !1,
            time: "3000"
        }), event.keyCode = 0, event.returnValue = !1, !1
    }, document.oncontextmenu = function() {
        return $.message({
            message: "采用本站js及css请注明来源，禁止商业使用！",
            title: "不能右键/长按喔！",
            type: "error",
            autoHide: !1,
            time: "3000"
        }), !1
    }
}

部分动效说明

查看步骤

请移步此博文 : 特效标签 wow.js

部分页面插入视频

效果预览

实际视频效果请移步: 留言板、友链

查看步骤

下载文件

替换文件或修改文件。
如果你所使用的主题版本是 3.7.1 ，可直接下载文件，将BlogRoot/node_modules/hexo-theme-butterfly/source/css/_layout/head.styl替换成新下载的head.styl，将BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/header/index.pug替换成新下载的index.pug。
如果你所使用的主题版本跟本站（v3.7.1）有所出入，请对比一下两个文件（下载的文件和你的主题文件）之间的差异，可能需要你对BlogRoot/themes/butterfly/source/css/_layout/head.styl该文件做出一些修改：

&.not-home-page
  height: 20rem

  +maxWidth768()
    height: 14rem !important

#page-site-info
  position: absolute
  top: 10rem
  padding: 0 .5rem
  width: 100%
  z-index: 2

  +maxWidth768()
    top: 7rem !important

#post-info
  position: absolute
  ... ...

&.has-video
  position: relative 
  height: 80vh !important
  
  #page-site-info
    top: 50% !important
    margin-top: -1.425em

    +maxWidth768()
      top: 7rem !important
      margin-top: 0
    
  +maxWidth768()
    height: 14rem !important
    
&.not-top-img
  margin-bottom: .5rem
  ... ...

主要针对not-home-page、#page-site-info修改一些属性，并新增了一个名为has-video的类。

在自定义 css 中加入以下样式。也可以直接将这段换成style格式写进 head.styl。

#index-video {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 80vh;
    width: 100%;
    object-fit: cover;
}
@media only screen and (max-width: 768px) {
    #index-video {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .bg-cover {
        background-image: none !important;
    }
}

在想插入视频的页面，一定要有某个属性，可自行配置，如果用 type , 则BlogRoot/themes/butterfly/layout/includes/header/index.pug中则根据对应的 type 类型去写逻辑即可。
比如我的 BlogRoot/source/comment/index.md 配置如下：

---
title: 留言板
type: 'comment' 
---

所以在BlogRoot/themes/butterfly/layout/includes/header/index.pug中的第 23 行加入 page.type == 'comment'

1	- var isHomeClass = is_home() ? 'full_page' : (page.type == 'comment' \|\| page.type == 'link' ) ? 'not-home-page has-video bg-cover' : 'not-home-page'

第 51 - 56 行加入

if page.type == 'comment' 
    video#index-video(autoplay='' loop='' muted='')
        source(src='你的视频地址')
if page.type == 'link' 
    video#index-video(autoplay='' loop='' muted='')
        source(src='你的视频地址')

如果已经用了主页冒泡特效，请将下面这段代码替换之前的chocolate.js。没有使用即可忽略这步。

/*
 * @Author: tzy1997
 * @Date: 2020-12-15 20:55:25
 * @LastEditors: tzy1997
 * @LastEditTime: 2021-11-25 18:15:47
 */
// TODO 获取窗口高度  11-19
var b_h = $(window).height()
var b_w = $(window).width()

$(function() {

    // 气泡
    function bubble() {
        $('#page-header').circleMagic({
            radius: 10,
            density: .2,
            color: 'rgba(255,255,255,.4)',
            clearOffset: 0.99
        });
    }! function(p) {
        p.fn.circleMagic = function(t) {
            var o, a, n, r, e = !0,
                i = [],
                d = p.extend({ color: "rgba(255,0,0,.5)", radius: 10, density: .3, clearOffset: .2 }, t),
                l = this[0];

            function c() { e = !(document.body.scrollTop > a) }

            function s() {
                // TODO 获取窗口高度  ethan_tzy
                var a_c = l.clientHeight
                if ($('#index-video').length > 0 && b_w > 768) {
                    a = b_h * 0.8
                } else {
                    a = a_c
                }
                // o = l.clientWidth, a = l.clientHeight, l.height = a "px", n.width = o, n.height = a
                o = l.clientWidth, l.height = a "px", n.width = o, n.height = a
            }

            function h() {
                if (e)
                    for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
                requestAnimationFrame(h)
            }

            function f() {
                var t = this;

                function e() { t.pos.x = Math.random() * o, t.pos.y = a 100 * Math.random(), t.alpha = .1 Math.random() * d.clearOffset, t.scale = .1 .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color = "rgba(" Math.floor(255 * Math.random()) ", " Math.floor(0 * Math.random()) ", " Math.floor(0 * Math.random()) ", " Math.random().toPrecision(2) ")" : t.color = d.color }
                t.pos = {}, e(), this.draw = function() { t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath() }
            }! function() {
                // TODO 气泡的高度  11-19
                var a_c = l.clientHeight
                if ($('#index-video').length > 0 && b_w > 768) {
                    a = b_h * 0.8
                } else {
                    a = a_c
                }
                o = l.offsetWidth,
                    // o = l.offsetWidth, a = l.offsetHeight,
                    function() {
                        var t = document.createElement("canvas");
                        t.id = "canvas", t.style.top = 0, t.style.zIndex = 0, t.style.position = "absolute", l.appendChild(t), t.parentElement.style.overflow = "hidden"
                    }(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
                for (var t = 0; t < o * d.density; t++) {
                    var e = new f;
                    i.push(e)
                }
                h()
            }(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
        }
    }(jQuery);
    bubble();
})

重新编译运行，即可看到效果。

公告栏两个小人

效果预览

查看步骤

在【BlogRoot/themes/butterfly/layout/includes/widget/card_announcement.pug】下添加如下部分代码。

注意: 将代码复制到【card_announcement.pug】文件以后，不难发现会有重复的一段代码。你要做的一步操作是，删除重复的代码（优先保留你主题版本原有的代码），这里之所以没用 Diff 代码块，是因为怕删除【+】号的时候在格式上特别容易出错。

if theme.aside.card_announcement.enable
  .card-widget.card-announcement
    .item-headline
      i.fas.fa-bullhorn.card-announcement-animation
      span= _p('aside.card_announcement')
    .announcement_content!= theme.aside.card_announcement.content
  .xpand(style='height:200px;')
    canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')
script(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/twopeople1.js')
script(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/zdog.dist.js')
script#rendered-js(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/twopeople.js')
style.
 .card-widget.card-announcement {
 margin: 0;
 align-items: center;
 justify-content: center;
 text-align: center;
 }
 canvas {
 display: block;
 margin: 0 auto;
 cursor: move;
 }

星空背景和流星特效

查看步骤

在BlogRoot/themes/butterfly/source/js目录下新建universe.js，输入以下代码：

1
2

function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()};
dark()

在BlogRoot/themes/butterfly/source/css目录下新建universe.css，输入以下代码：

/* 背景宇宙星光  */
#universe{
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

在主题配置文件_config.butterfly.yml的inject配置项中bottom下填入：

inject:
  bottom:
   # 星空背景
   - <canvas id="universe"></canvas>
   - <script defer src="/js/universe.js"></script>

在主题配置文件_config.butterfly.yml的inject配置项中head下填入：

inject:
  head:
   ## 星空背景
   - <link rel="stylesheet" href="/css/universe.css">

重新编译即可看到效果。

樱花飘落效果

效果预览

查看步骤

在主题配置文件_config.butterfly.yml的inject配置项中bottom下引入sakura.js即可。

inject:
  bottom:
   # 樱花飘落效果
   # - <script async src="https://npm.elemecdn.com/tzy-blog/lib/js/other/sakura.js"></script>

灯笼特效

Hexo-悬挂灯笼

https://fe32.top/articles/Ha5487ng/

外挂标签

基于Butterfly的外挂标签引入

https://fe32.top/articles/0xiipgum/

添加github徽标

https://fe32.top/articles/kfwr2gpa/

自定义右键菜单

参考方向	教程原贴
TZY	Hexo Butterfly 自定义右键菜单（基础）
ZHHEO	Butterfly 魔改：自定义右键菜单
LYX	博客自定义右键菜单升级版

加载动画

可参考 Loading Animation

评论弹幕

参考教程 Butterfly 主题的留言弹幕界面增强版（支持 Twikoo、Waline、Valine）

自定义页脚

效果预览

查看教程

Hexo + Butterfly 自定义页脚

https://fe32.top/articles/hexo1617/

侧边栏公众号

效果预览

查看教程

Hexo + Butterfly 侧边栏公众号

https://fe32.top/articles/hexo1618/

文章加密插件

效果预览

点击 Demo Page , 所有的密码都是【hello】。

查看教程

详见开源地址：hexo-blog-encrypt

在根目录执行以下命令
1
npm install --save hexo-blog-encrypt

Front matter配置方法

---
title: Hello World
tags:
- 作为日记加密
date: 2016-03-30 21:12:21
password: mikemessi
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
theme: xray
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

可以在线挑选你喜欢的主题,并应用到你的博客中: default、blink、shrink、flip、up、surge、wave、xray
重新编译项目并进入对应的文章页即可看到加密效果

友链朋友圈

效果预览

效果请移步：朋友圈

查看教程

部署教程：文档、备用地址
友链朋友圈5 - 我的部署历程与主题样式分享

前言

更新记录

Butterfly主题美化

生成文章唯一链接

页面底部 footer 跳动的心

修改标题样式

添加豆瓣插件

添加访客地图

添加Pixiv日榜

哔哩哔哩番剧页面插件

添加卡通人物（看板娘）

添加全局吸底APlayer

添加贡献日历

主页冒泡特效

鼠标样式

鼠标 * 字跟随掉落效果

滚动条

手机侧边栏默认不展开

图库

子页面

Valine评论邮件回复提醒

参考教程

我的表情数据包

改写 menhera 表情样式

添加[博主,小伙伴,访客]标签

valine获取评论失败

首页分类磁铁

侧边栏电子时钟

更换字体

局部css优化

禁止右键及F12等事件

部分动效说明

部分页面插入视频

公告栏两个小人

星空背景和流星特效

樱花飘落效果

灯笼特效

外挂标签

添加github徽标

自定义右键菜单

加载动画

评论弹幕

自定义页脚

侧边栏公众号

文章加密插件

友链朋友圈