2024-04-24更新

安装/搭建/配置

代码编辑器推荐：可以下载个Visual Studio Code，可以代码高亮和插件支持相当nice，设置中文界面点击左侧最下拓展程序，搜索Chinese (Simplified)进行安装重启编辑器即可。

安装node.js 和 Git。

换源

更换成国内阿里系阿里云npm源、腾讯、华为等的镜像站，加快模块安装速度：
常见npm源：

1
2
3
4
5
6
7
8
#npm 官方原始镜像网址是：
https://registry.npmjs.org/
#阿里云 NPM 镜像：
https://registry.npmmirror.com
#腾讯云 NPM 镜像：
https://mirrors.cloud.tencent.com/npm/
#华为云 NPM 镜像：
https://mirrors.huaweicloud.com/repository/npm/

例如换成阿里源：在将要安放博客项目文件的目录里右键菜单Git Bash here打开Git Bash并继续：

1
npm config set registry https://registry.npmmirror.com

查看镜像源配置信息：

1
npm info underscore

安装hexo命令包

1
npm install -g hexo-cli

查看hexo版本：

1
hexo -v

初始化网站

初始化博客根文件夹[blog]（将生成一个名为“blog”的文件夹作为工作目录并初始化生成hexo博客文件）：

1
hexo init blog

进入blogName文件夹：

1
cd blog

安装butterfly主题

butterfly主题文件放入 [blog]\themes\butterfly\路径下，最终可见[blog]\themes\butterfly\_config.yml。

打开butterfly主题链接并下载source Code(zip)到本地并解压。

Github:

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

Gitee:

1
git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly

适合hexo5.0.0以上版本

1
npm i hexo-theme-butterfly

应用主题

修改站点配置文件_config.yml，把主题改为butterfly

1
theme: butterfly

安装必要插件

安装pug 以及 stylus 渲染器插件

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

安装：部署插件hexo-deployer-git、文章字数统计插件hexo-wordcount、博客内容搜索插件hexo-generator-search

1
npm install hexo-wordcount hexo-generator-search hexo-reference hexo-deployer-git --save
注意：

渲染markdown文章如出现空格等转义字符不生效问题，可以进行如下 :

  • 卸载原来的markdown渲染器：
1
npm uninstall hexo-renderer-marked --save
1
npm i @upupming/hexo-renderer-markdown-it-plus --save

方便升级进行配置：

  • 新建文件[blog]\_config.butterfly.yml，把[blog]\themes\butterfly\_config.yml里的全部内容复制到[blog]\_config.butterfly.yml里。
  • 以后只需要在 _config.butterfly.yml进行配置就行。
  • Hexo会自动合并主题中的[blog]\themes\butterfly\_config.yml和[blog]\_config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。
     

部署流程

部署方式选择

    hexo毕竟生成的是静态网页，计算资源要求低，部署方式相当灵活，常见的有云服务器、虚拟主机、静态网站托管平台、对象存储、某些大气的代码托管平台、自建小服务器比如软路由/工程小主机离谱的甚至有电视盒子和旧手机等等。
    但是按照目前的环境，国内的云服务商提供的服务价格往往都比较昂贵并且对于小白坑比较多，而且需要备案，备案又要求你有服务器或类似服务器的计算服务，这比较麻烦，建站不商业化盈利仅仅作为高级玩具或者用于学习之用的话，建议一开始找能白嫖的先用着，后续如果想进阶再另作改进。
方式介绍：

  1. 云服务器、虚拟主机
    各大平台阿里云、腾讯云等新人注册首单价格倒算是厚道，当然只能一个月最多一年有优惠，拿来学习学习倒是可以，对于没有盈利能力来说后续的续费就很不划算了，其他体量小些的平台估计能白嫖或者低价使用的也有，得自己找了。

  2. 自建服务器
    这属于会折腾硬件才能玩得起的玩意，不作介绍。

  3. 静态网站托管平台

  • Gitee Pages：国内最大的代码托管平，稳定性强，国内访问速度非常快。仓库的最大容量和单个文件大小有限制，对仓库内容非常敏感，需要实名认证，自定义域名和自动部署都需要收费。适合不需要自定义域名并且网站内容少、内容几乎不变的场景，但是每次部署前都会对仓库内容进行检查，博客内容多点容易触发敏感词判定，那就GG了，排查起来麻烦，不考虑建博客用。
  • GitHub Pages：全球最大的代码托管平台，稳定性强，部署简单，使用方便，支持自定义域名，但是国内访问速度一般，拒绝百度爬虫访问，不想太折腾并且对百度收录没有要求的话可以选择使用，比较推荐。github官网
  • Cloudflare Pages：Cloudflare推出的一项服务，不限站点数、请求数和带宽，全球都拥有CDN节点，支持自定义域名和自动部署。国内访问速度和稳定性一般，有每月构建次数500次、文件数量20000、大小25Mb的限制，但是对于小博客已经很够用了，推荐。
  1. 对象存储
      主流云服务商都有对象存储服务，比如阿里云、百度云、腾讯云、又拍云、七牛云等等，可用作静态网站的部署，但是里面的坑得提一下，虽然存储价格相对便宜，但是流量费挺贵的，不会弄的话，被恶意刷流量能把你房子刷没了，毕竟大多不支持设置流量到顶自动停止服务，不欠费怎么赚？懂得都懂。
      而且里面的防盗设置十分基础和简单（主要是支持高级防盗的小白又玩不起，需要有服务器才能玩起来），防了个寂寞，其中又拍云稍微好点，设置挺丰富的。 其中高级点的方案有CDN+对象存储，风险防护作用相对前面单纯使用对象存储要强一些和成本便宜不少，访问速度基本杠杠的，不过同样不支持设置流量到顶自动停止服务，所以被恶意刷欠费的风险还是有的。没钱包风险承受能力和不会整的不建议。

git key公钥生成

  1. 桌面或blog文件夹右键菜单选择Git Bash here打开git，然后依次执行：
    配置用户名和邮箱:
    1
    2
    git config --global user.name "github 用户名"
    git config --global user.email "github 注册邮箱"
  2. 接着生成 ssh 密钥文件，输入如下命令后直接三次回车即可，一般不需要设置密码，如果要设置密码，显示password/passphrase提示时输入要设置的密码回车，再次输入密码回车即可；
    生成 ssh 密钥:
    1
    ssh-keygen -t rsa -C "github 注册邮箱"
    一般执行上述命令之后，会生成 id_rsa 和 id_rsa.pub 两个文件，在 C:\用户\xxx\.ssh\文件夹里，前者是我们私有的，而后者则是对外开放的即后面要用到的。

Github pages部署

首先介绍比较推荐的GitHub部署，没有注册账号的先注册，注册方法自行搜一下。Github访问慢问题，可以打开windows10/11自带的Microsoft store应用商店，搜索Watt Toolkit进行安装，打开勾选Github一键加速即可。

Github新建仓库
  1. 登录github，点击repositories进入仓库页面，点击NEW新建，在Repository name处填入仓库名，仓库名填用户名.github.io，用户名为英文且建议不要太复杂，但是又要能体现你个人特点，因为后续让别人访问你的博客时，就要通过 https://用户名.github.io 这个域名来访问。接下来选择Public公有，最后点击Create repository完成创建。接着可以看见Quick setup — if you’ve done this kind of thing before，点击SSH，复制右边的git@github.com:xxxxx/用户名.github.io.git即为仓库链接，打开[blog]\_config.yml找到选项并进行填入：
    1
    2
    3
    4
    deploy:
      type: git
      repository: git@github.com:xxxxx/用户名.github.io.git
      branch: master
推送内容，开启pages

  1. 打开GitHub-Settings-Keys 页面，创建一个新的SSH key，填写Title和 Key，Title 可以随意，而Key的内容则是前面我们刚才git key公钥生成部分生成的的 id_rsa.pub 中的内容，复制粘贴最后点击 Add SSH key 即可进行推送仓库授权。

  2. 新建文章
    博客文件夹[blog]\目录下右键菜单选择Git Bash here打开git，输入hexo new post xxx生成新文章xxx.md的markdown文件，在[blog]\source\_posts\里可以找到，对其用markdown语法编辑即可书写文章啦

  3. 生成、推送文章
    编写好文章后继续依次执行:

    1
    2
    3
    hexo clean
    hexo g
    hexo d

    即可执行清除缓存、生成静态网站文件、推送到仓库。

  4. 推送到仓库完成后，打开github，刷新页面

  5. 本地博客执行推送到仓库后，刷新页面，进入刚才建的仓库 点击setting，左边找到pages项，继续找到 branch 选择 master 点击 save 保存，等待一会，刷新即可出现访问链接提示Your site is live at，到这就部署完成。
    ps：如果预览显示错乱，至少把_config.yml中的 url选项 即前面Your site is live at提示的访问链接填上再推送一次即可。

常见hexo命令以及说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
hexo new post Name #新建名称为 Name 的md文章
hexo new page pageName #新建页面 pageName
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口即浏览器输入 localhost:4000/ 进行博客预览（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到博客Git仓库
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

缩写
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

hexo s -g #生成并本地预览
hexo d -g #生成并上传

node_modules：是依赖包
public：存放的是生成的页面
scaffolds：命令生成文章等的模板
source：用命令创建的各种文章
themes：主题
_config.yml：整个博客的配置文件
db.json：source解析所得到的
package.json：项目所需模块项目的配置信息

cloudflare pages部署

  用cloudflare pages部署的话访问速度可能大概会比Github pages好一点，薛定谔的比较。此时部署分为两种情况：

  • 一种是本地生成静态网页推送到GitHub，cloudflare再拉取GitHub仓库上渲染好的网页文件进行展示，该方法每次推送都能在1-2分钟内就完成博客内容更新并展示；
  • 另一种就是hexo博客源文件推送到GitHub，cloudflare再拉取GitHub仓库上的博客源文件执行 环境搭建、hexo clean、hexo g等博客网站文件生成操作，这种方法坏处就是执行速度慢得排队，容易失败，一般得等5-6分钟才能更新完成。
    所以这里采用第一种方法，可以很无缝承接github pages。
cloudflare注册

注册就不必展开说了，基本大同小异。

创建项目
  1. 登录找到 pages，点击创建项目，点击 git，选择 GitHub，接着进行账户授权，输入密码啥的，接着 Repository access 处进行授权，有全部授权All repositories 和单独授权Only select repositories ，按需选择，比如选择用户名.github.io仓库，点击save。
  2. 跳转回来后 创建项目，点击 git，选择刚才授权的仓库，在构建命令处填写exit 0即可，其他不用填，点击开始部署，等它部署完成即可。
  3. 文章推送：跟前面Github pages部署处一模一样，本地hexo三联命令执行即可。使用cloudflare pages部署可以关闭GitHub的pages，设置private私有仓库也是可以的（GitHub pages需要保持public公有）。

vercel部署

  用vercel部署部署的话访问速度也大概会比Github pages好不少，前提是需要绑定自己的域名，否则国内无法访问你的博客。此时部署分为两种情况：

  • 一种是本地生成静态网页推送到GitHub，vercel再拉取GitHub仓库上渲染好的网页文件进行展示，该方法每次推送都能在1分钟内就完成博客内容更新并展示；
  • 另一种就是hexo博客源文件推送到GitHub，vercel再拉取GitHub仓库上的博客源文件执行 环境搭建、hexo clean、hexo g等博客网站文件生成操作，这种方法坏处就是执行速度慢得排队，容易失败，一般得等5-6分钟才能更新完成。
    所以这里采用第一种方法，可以很无缝承接github pages。
vercel账号注册

具体注册vercel，推荐使用github账号登录即可。

创建项目
  • 登录vercel后，Add New --> project，创建项目，Import Git Repository导入你github上创建的存放渲染好的网页文件的blog仓库：需要提前注册github账号和设置好两步验证(推荐手机安装App Aegis 进行，记得备份恢复码)等设置，并且创建好博客仓库blog或其他你喜欢的名字，仓库可以设置为私有private
  • 项目名称Project Name你可以起个喜欢的名字，Framework Preset选择Other，直接部署Deploy即可，然后点击部署好的项目，Setting--> Domains进行域名绑定即可。
  • 更多具体细节怎么设置可以浏览搜一下相关教程。
  • 文章推送：跟前面Github pages部署处一模一样，本地hexo三联命令执行即可。关闭GitHub的pages，设置private私有仓库也是可以的（GitHub pages需要保持public公有）。

个性化配置

写在前面：

  • 其他详细的基础设置配置参照butterfly主题官方文档进行即可。
  • 博客配置文件：[blog]\_config.yml文件。
  • 主题配置文件：即前面 方便升级进行配置 而建的[blog]\_config.butterfly.yml文件，相当于[blog]\themes\butterfly\_config.yml。
  • 博客配置
    按照博客配置文件里相应注释进行更改。
  • 主题个性化
    按照主题配置文件里相应注释进行更改。

主题自带配色配置

找到并修改[blog]\_config.butterfly.yml中如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
#注意加英文双引号，根据需要进行修改
theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#FFCCE6"
  button_hover: "#FF8F91"
  text_selection: "#FCA4D4"
  link_color: "#49B1F5"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#FF8F91"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#FFCCE6"

字数统计

安装文章字数统计插件: hexo-wordcount

1
npm install hexo-wordcount --save

主题配置文件:

1
2
3
4
5
6
# wordcount (字數統計)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

网站内搜索

安装网站内搜索搜索插件： hexo-generator-search

1
npm install hexo-generator-search --save

主题配置文件：

1
2
3
4
5
6
# Local search
local_search:
  enable: true
  labels:
  input_placeholder: Search for Posts
  hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

鼠标内置点击特效

修改相应主题配置值为true：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# Mouse click effects: fireworks (鼠标点击效果: 火焰特效)
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999
  mobile: false

# Mouse click effects: Heart symbol (鼠标点击效果: 爱心)
click_heart:
  enable: false
  mobile: false

# Mouse click effects: words (鼠标点击效果: 文字)

ClickShowText:
  enable: true
  text:
    # - I
    # - LOVE
    # - YOU
  - 富强
  - 民主
  - 文明
  - 和谐
  - 爱国
  - 敬业
  - 诚信
  - 友善
  - 自由
  - 平等
  - 公正
  - 法治
  fontSize: 15px
  mobile: true

魔改配置

采用尽量不需改源码的形式，即引入外部js、css样式进行覆盖。
引入自定义css文件：blogName\themes\butterfly\source\css\路径下新建文件custom.css,并在主题配置文件中修改成如下：

1
2
3
inject:
  head:
   - <link rel="stylesheet" href="/css/custom.css"> #自定义效果,如果与主题自带的有冲突可能优先级不够不生效

引入自定义js文件：blogName\themes\butterfly\source\js\路径下新建文件custom.js,并在主题配置文件中修改成如下：

1
2
3
inject:
    bottom: #自定义js文件
  - <script src="/js/custom.js"></script>

图标引入：

  • 主题默认使用fontawesome图标，使用第三方图标参考：Hexo博客之优雅使用阿里iconfont图标。
  • 引入阿里图标库图标大小会与周围组件不协调，在custom.css文件中加入代码即可：
    1
    2
    3
    4
    /*引入图标大小固定为主题自带参数*/
    .iconfont {
    	font-size: 100% !important;
    }

自定义鼠标指针

鼠标文件 式

下载鼠标指针文件，放入blogName\themes\butterfly\source\cursor路径下，文件格式.cur
在custom.css文件中加入代码：

1
2
3
4
5
6
7
/*鼠标指针*/
body {
    cursor: url(/cursor/default.cur), auto;
}
a:hover {
    cursor: url(/cursor/pointer.cur), auto;
}

Dot Cursor 鼠标指针

  • 名字自己安的，笑。
    Fork： Ariasaka | 博客魔改日志(1)

  • 新建themes/butterfly/source/js/custom/DotCursor.js文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    var CURSOR;

    Math.lerp = (a, b, n) => (1 - n) * a + n * b;

    const getStyle = (el, attr) => {
        try {
            return window.getComputedStyle
                ? window.getComputedStyle(el)[attr]
                : el.currentStyle[attr];
        } catch (e) {}
        return "";
    };

    class Cursor {
        constructor() {
            this.pos = {curr: null, prev: null};
            this.pt = [];
            this.create();
            this.init();
            this.render();
        }

        move(left, top) {
            this.cursor.style["left"] = `${left}px`;
            this.cursor.style["top"] = `${top}px`;
        }

        create() {
            if (!this.cursor) {
                this.cursor = document.createElement("div");
                this.cursor.id = "cursor";
                this.cursor.classList.add("hidden");
                document.body.append(this.cursor);
            }

            var el = document.getElementsByTagName('*');
            for (let i = 0; i < el.length; i++)
                if (getStyle(el[i], "cursor") == "pointer")
                    this.pt.push(el[i].outerHTML);

            document.body.appendChild((this.scr = document.createElement("style")));
            this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='.5'/></svg>") 4 4, auto}`;
        }

        refresh() {
            this.scr.remove();
            this.cursor.classList.remove("hover");
            this.cursor.classList.remove("active");
            this.pos = {curr: null, prev: null};
            this.pt = [];

            this.create();
            this.init();
            this.render();
        }

        init() {
            document.onmouseover  = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
            document.onmouseout   = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
            document.onmousemove  = e => {(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8); this.pos.curr = {x: e.clientX - 8, y: e.clientY - 8}; this.cursor.classList.remove("hidden");};
            document.onmouseenter = e => this.cursor.classList.remove("hidden");
            document.onmouseleave = e => this.cursor.classList.add("hidden");
            document.onmousedown  = e => this.cursor.classList.add("active");
            document.onmouseup    = e => this.cursor.classList.remove("active");
        }

        render() {
            if (this.pos.prev) {
                this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.15);
                this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.15);
                this.move(this.pos.prev.x, this.pos.prev.y);
            } else {
                this.pos.prev = this.pos.curr;
            }
            requestAnimationFrame(() => this.render());
        }
    }

    (() => {
        CURSOR = new Cursor();
        // 需要重新获取列表时，使用 CURSOR.refresh()
    })();

    ps：记得在_config.buttterfly.yaml inject：处 bottom：下引入：- <script src="/js/custom/DotCursor.js"></script>

  • 自定义引入的css文件themes/butterfly/source/css/custom/custom.css添加代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    #cursor {
        position: fixed;
        width: 16px;
        height: 16px;
        background: #000;
        border-radius: 8px;
        opacity: 0.25;
        z-index: 10086;
        pointer-events: none;
        transition: 0.2s ease-in-out;
        transition-property: background, opacity, transform;
    }

    #cursor.hidden {
        opacity: 0;
    }

    #cursor.hover {
        opacity: 0.1;
        transform: scale(2.5);
    }

    #cursor.active {
        opacity: 0.5;
        transform: scale(0.5);
    }

鼠标拖动星星特效

在custom.js加入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
(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() {
  
      for( var i = 0; i < particles.length; i++ ) {
        particles[i].update();
      }
  
      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();
    }
  
    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"
      };
  
      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;
        console.log(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);
      }
  
    }
  
    function applyProperties( target, properties ) {
      for( var key in properties ) {
        target.style[ key ] = properties[ key ];
      }
    }
  
    init();
})();

滚动条样式

在custom.css文件中加入代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* 滚动条样式 和选中文本颜色*/
::-webkit-scrollbar {
	width: 6px;
	height: 5px;
  }
  
  ::-webkit-scrollbar-track {
	background-color: rgba(73, 177, 245, 0.2);
	border-radius: 2em;
  }
  
  ::-webkit-scrollbar-thumb {
	background-color: #FF8F91;  /*启用内置代码主题代码块滚动条会不生效该颜色*/
	background-image: -webkit-linear-gradient(
	  45deg,
	  rgba(255, 255, 255, 0.4) 25%,
	  transparent 25%,
	  transparent 50%,
	  rgba(255, 255, 255, 0.4) 50%,
	  rgba(255, 255, 255, 0.4) 75%,
	  transparent 75%,
	  transparent
	);
	border-radius: 2em;
  }
  
  ::-webkit-scrollbar-corner {
	background-color: transparent;
  }
  
  ::-moz-selection { /*选中文本的颜色*/
	color: #fff;
	background-color: #FCA4D4;
  }

加气泡动画

参考Heson大佬的项目cavan泡泡，演示地址
在themes\butterfly\source\js\目录下新建 bubble.js 文件添如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
(function () {
    var canvas, ctx, width, height, bubbles, animateHeader = true;
    initHeader();

    function initHeader() {
        canvas = document.getElementById('bubble_canvas');
        window_resize();
        ctx = canvas.getContext('2d');
        //建立泡泡
        bubbles = [];
        var num = width * 0.04; //气泡数量
        for (var i = 0; i < num; i++) {
            var c = new Bubble();
            bubbles.push(c);
        }
        animate();
    }

    function animate() {
        if (animateHeader) {
            ctx.clearRect(0, 0, width, height);
            for (var i in bubbles) {
                bubbles[i].draw();
            }
        }
        requestAnimationFrame(animate);
    }

    function window_resize() {
        //canvas铺满窗口
        width = window.innerWidth;
        height = window.innerHeight;
        //如果需要铺满内容可以换下面这个
        //var panel = document.getElementById('thumbnail_canvas');
        //width=panel.offsetWidth;
        //height=panel.offsetHeight;
        canvas.width = width;
        canvas.height = height;
    }
    window.onresize = function () {
        window_resize();
    }

    function Bubble() {
        var _this = this;
        (function () {
            _this.pos = {};
            init();
        })();

        function init() {
            _this.pos.x = Math.random() * width;
            _this.pos.y = height + Math.random() * 100;
            _this.alpha = 0.1 + Math.random() * 0.5; //气泡透明度
            _this.alpha_change = 0.0002 + Math.random() * 0.0001; //气泡透明度变化速度
            _this.scale = 0.2 + Math.random() * 0.5; //气泡大小
            _this.scale_change = Math.random() * 0.002; //气泡大小变化速度
            _this.speed = 0.1 + Math.random() * 1; //气泡上升速度
        }
        //气泡
        this.draw = function () {
            if (_this.alpha <= 0) {
                init();
            }
            _this.pos.y -= _this.speed;
            _this.alpha -= _this.alpha_change;
            _this.scale += _this.scale_change;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'rgba(255,255,255,' + _this.alpha + ')';
            ctx.fill();
        };
    }
})();

在blogName\_config.butterfly.yml文件如下位置添加如下备注的代码2处：

1
2
3
4
5
6
7
inject:
  head:
    #加入如下代码1：
    - '<canvas id="bubble_canvas" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;pointer-events:none"></canvas>' #全屏泡泡效果
  bottom:
    #加入如下代码2：
    - <script defer src="/js/bubble.js"></script> #全屏泡泡效果

更多博客配色修改

彩色背景

  • butterfly3.3.8版本参考Hexo博客之butterfly主题优雅更换背景:
    custom.css新增代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    /****************************************/
    /*butterfly3.3.8版本*/
    #web_bg {
      background: -webkit-linear-gradient(
        0deg,
        rgba(247, 149, 51, 0.1) 0,
        rgba(243, 112, 85, 0.1) 15%,
        rgba(239, 78, 123, 0.1) 30%,
        rgba(161, 102, 171, 0.1) 44%,
        rgba(80, 115, 184, 0.1) 58%,
        rgba(16, 152, 173, 0.1) 72%,
        rgba(7, 179, 155, 0.1) 86%,
        rgba(109, 186, 130, 0.1) 100%
      );
      background: -moz-linear-gradient(
        0deg,
        rgba(247, 149, 51, 0.1) 0,
        rgba(243, 112, 85, 0.1) 15%,
        rgba(239, 78, 123, 0.1) 30%,
        rgba(161, 102, 171, 0.1) 44%,
        rgba(80, 115, 184, 0.1) 58%,
        rgba(16, 152, 173, 0.1) 72%,
        rgba(7, 179, 155, 0.1) 86%,
        rgba(109, 186, 130, 0.1) 100%
      );
      background: -o-linear-gradient(
        0deg,
        rgba(247, 149, 51, 0.1) 0,
        rgba(243, 112, 85, 0.1) 15%,
        rgba(239, 78, 123, 0.1) 30%,
        rgba(161, 102, 171, 0.1) 44%,
        rgba(80, 115, 184, 0.1) 58%,
        rgba(16, 152, 173, 0.1) 72%,
        rgba(7, 179, 155, 0.1) 86%,
        rgba(109, 186, 130, 0.1) 100%
      );
      background: -ms-linear-gradient(
        0deg,
        rgba(247, 149, 51, 0.1) 0,
        rgba(243, 112, 85, 0.1) 15%,
        rgba(239, 78, 123, 0.1) 30%,
        rgba(161, 102, 171, 0.1) 44%,
        rgba(80, 115, 184, 0.1) 58%,
        rgba(16, 152, 173, 0.1) 72%,
        rgba(7, 179, 155, 0.1) 86%,
        rgba(109, 186, 130, 0.1) 100%
      );
      background: linear-gradient(
        90deg,
        rgba(247, 149, 51, 0.1) 0,
        rgba(243, 112, 85, 0.1) 15%,
        rgba(239, 78, 123, 0.1) 30%,
        rgba(161, 102, 171, 0.1) 44%,
        rgba(80, 115, 184, 0.1) 58%,
        rgba(16, 152, 173, 0.1) 72%,
        rgba(7, 179, 155, 0.1) 86%,
        rgba(109, 186, 130, 0.1) 100%
      );
    }
    /*************************************/
  • butterfly4.4.0+版本则也可直接在_config.butterfly.yml文件中找到background：后面添加如下所示：
1
background：rgba(247, 149, 51, 0.1) 0,rgba(243, 112, 85, 0.1) 15%,rgba(239, 78, 123, 0.1) 30%,rgba(161, 102, 171, 0.1) 44%,rgba(80, 115, 184, 0.1) 58%,rgba(16, 152, 173, 0.1) 72%,rgba(7, 179, 155, 0.1) 86%,rgba(109, 186, 130, 0.1) 100%

当然一般以custom.css优先级为最高

文章目录激活色

  • 自定义引入的custom.css新增代码：
    1
    2
    3
    4
    /*效果看本站文章侧边目录*/
    .toc-link.active {
        background: #FCA4D4
    }

菜单栏毛玻璃特效以及配色

  • 自定义引入的custom.css新增代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    /******************************************************/
    /*顶部栏*/
    #page-header.nav-fixed #nav{
    	background: rgba(246, 239, 246, 0.61) !important;
    	backdrop-filter: blur(8px) !important;
    }
    [data-theme=dark]
    #page-header.nav-fixed #nav{
    	background: rgba(79, 76, 79, 0.35) !important;
    	backdrop-filter: blur(8px) !important;
    }

    #nav .show{
    	background: rgba(246, 239, 246, 0.61) !important;
    	backdrop-filter: blur(8px) !important;
    }
    [data-theme=dark]
    #nav .show{
    	background: rgba(79, 76, 79, 0.35) !important;
    	backdrop-filter: blur(8px) !important;
    }

    /*手机模式侧边栏*/
    #sidebar #sidebar-menus.open{
    	background:rgba(246, 239, 246, 0.75) !important;
    	backdrop-filter: blur(3px);
    	border-radius: 6px 0 0 6px;
    }
    [data-theme=dark]
    #sidebar #sidebar-menus.open{
    	background:rgba(252, 224, 252, 0.11) !important;
    	backdrop-filter: blur(3px);
    	border-radius: 6px 0 0 6px;
    }
    /*侧边控制按钮*/
    #rightside > #rightside-config-show > #rightside_config,
    #rightside > #rightside-config-show > #to_comment,
    #rightside > #rightside-config-show > #go-up, 
    #rightside > #rightside-config-show > #go-down,
    #rightside > #rightside-config-hide > #readmode,
    #rightside > #rightside-config-hide > #translateLink,
    #rightside > #rightside-config-hide > #hide-aside-btn {
    	background: opacity(0.3);
    	backdrop-filter: blur(3px);
    }
    [data-theme=dark]
    #rightside > #rightside-config-show > #rightside_config,
    #rightside > #rightside-config-show > #to_comment,
    #rightside > #rightside-config-show > #go-up,
    #rightside > #rightside-config-show > #go-down,
    #rightside > #rightside-config-hide > #readmode,
    #rightside > #rightside-config-hide > #translateLink,
    #rightside > #rightside-config-hide > #hide-aside-btn {
    	background: opacity(0.3);
    	backdrop-filter: blur(3px);
    }
    /*搜索*/
    #local-search .search-dialog,
    #local-search .search-dialog .local-search-box input{
    	background:rgba(246, 239, 246, 0.75) !important;
    	backdrop-filter: blur(3px);
    	border-radius: 6px 6px;
    }
    [data-theme=dark]
    #local-search .search-dialog,
    #local-search .search-dialog .local-search-box input{
    	background:rgba(252, 224, 252, 0.2) !important;
    	backdrop-filter: blur(3px);
    	border-radius: 6px 6px;
    }
    /*******************************************************/

页脚全透明

自定义引入的custom.css加入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#footer {
    background: transparent !important; /*全透明，已选用*/
}

/* 半透明以及透明色，未选用，
#footer {
    background: rgba(255,255,255,.15);
    color: #000;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    backdrop-filter: saturate(100%) blur(5px)
}
#footer::before {
    background: rgba(255,255,255,.15)
}
*/
#footer #footer-wrap {
    color: var(--font-color);
}

#footer #footer-wrap a {
    color: var(--font-color);
}

页脚加入网站安全运行时间

引入自定义js文件inFootTime.js，方法同 引入自定义效果 所述,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/*把不用的版本注释掉*/
/**显示  天 小时 分 秒版本**/
! function () {
    function update() {
        var now = new Date();
        var grt = new Date("2020-04-03 00:00:00"); /** 此处是计时的起始时间 **/
        now.setTime(now.getTime() + 250);
        days = (now - grt) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
        hnum = Math.floor(hours);
        if (String(hnum).length === 1) {
            hnum = "0" + hnum;
        }
        minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if (String(mnum).length === 1) {
            mnum = "0" + mnum;
        }
        seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if (String(snum).length === 1) {
            snum = "0" + snum;
        }
        document.getElementById("timeDate").innerHTML = "本站安全运行&nbsp" + dnum + "&nbsp天";
        document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
    }
    setInterval(update, 1000);
}();
/*显示 年 天 小时 分 秒版本*/
! function () {
    function update() {
        var now = new Date();
        var grt = new Date("2020-04-03 00:00:00"); /** 此处是计时的起始时间 **/
        var nowFullyear = now.getFullYear();    /**获取当前年份**/
        ! function Nayear () {
            if ((nowFullyear % 4 == 0 && nowFullyear % 100 != 0  ) || (nowFullyear % 400 == 0)) {  /**判断闰年平年取准确的一年所含天数**/
                return yearDate = 366;
            }
            return yearDate = 365;
        }();
        now.setTime(now.getTime() + 250); /**获取距离1970年1月1日0点0分到当前时间的总毫秒数**/
        tolsecond = (now - grt) / 1000;
        days = tolsecond / 60 / 60 / 24;
        idnum = Math.floor(days);
        year = (idnum / yearDate);
        ynum = Math.floor(year);
        dnum = idnum - (yearDate * ynum);
        hours = tolsecond / 60 / 60 - (24 * ynum * yearDate) - (24 * dnum);
        hnum = Math.floor(hours);
        if (String(hnum).length === 1) {
            hnum = "0" + hnum;
        }
        minutes = tolsecond / 60 - (24 * 60 * ynum * yearDate) - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if (String(mnum).length === 1) {
            mnum = "0" + mnum;
        }
        seconds = tolsecond - (24 * 60 * 60 * ynum * yearDate) - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if (String(snum).length === 1) {
            snum = "0" + snum;
        }
        document.getElementById("timeDate").innerHTML = "本站安全运行&nbsp" + ynum + "&nbsp年" + dnum + "&nbsp天";
        document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
    }
    setInterval(update, 1000);
}();

blogName\themes\butterfly\layout\includes\footer.pug文件新增如下备注的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if theme.footer.copyright
    .framework-info
      span= _p('footer.framework') + ' '
      a(href='https://hexo.io')= 'Hexo'
      span.footer-separator |
      span= _p('footer.theme') + ' '
      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  //-网站运行时间
  <div>
      //- faa-float animated为图标动效，需要引入awesome动效css库: https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css
      //-参考小康博客 - 任意元素添加动效动画
      <i class="fas fa-heart faa-float animated" style="color:red"></i>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
  </div>
  //-

参考：

配置评论系统

配置waline评论系统:

ps:

  • leancloud（因为某些原因国际国内版都要绑定域名） + vercel部署（国内访问大概率抽风），本站点未使用leancloud数据存储+vercel后端。
  1. 安装及平台部署请参考文档 ① waline官方文档，项目地址。
  2. 安装参考文档 ② Guan Qirui的文章，参考前半部分，butterfly 3.8+

版本：waline v2.10.0+

配置项：

1
2
3
4
5
6
7
comments:
  use:
   - Waline
waline:
  serverURL: https://xxxxxxxxxxx # 部署的waline后台服务地址
  #头像款式，可部署后登录后端自行修改头像url进行更换
  bg:  /img/diysay-valine.webp # waline评论框背景图
  1. 评论框以及后台管理等提示文本修改
    修改[blog]\themes\butterfly\layout\includes\third-party\comments\waline.pug文件增加locale字段并在{}里填写相应值：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
        function initWaline () {
          const waline = Waline.init(Object.assign({
            el: '#waline-wrap',
            serverURL: '!{serverURL}',
            pageview: !{lazyload ? false : pageview},
            dark: 'html[data-theme="dark"]',
            path: window.location.pathname,
    +       locale: {
              placeholder: '输入昵称和邮箱即可留言哦！', 
              sofa: '这个评论区有点冷 ＞﹏＜ ~', 
              admin: '博主', 
              approved: '通过', 
              waiting: '待审核', 
              sticky: '置顶', 
              nickError: '昵称不能少于3个字符', 
              mailError: '请填写正确的邮件地址',
            },
            comment: !{lazyload ? false : count},
          }, !{JSON.stringify(option)}))
        }

更多设置请参考官方文档locale选项
具体效果请看本站评论区。

  1. 服务端配置环境变量
    开启相应功能比如邮件回复、评论需要登录等功能需要配置相应变量，参考文档waline服务端环境变量

配置valine评论系统并美化

本站点未使用。

  1. 配置LeanCloud（因为某些原因需要绑定域名才能使用）并获取appID和appKey: 具体参照valine文档。
  2. 填写主题配置文件相应项:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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: 昵称栏输入QQ获取头像，快输入你的吐槽吧( ￣▽￣)σ # 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)
  1. 添加标签
    添加博主 访客 小伙伴 标签：
    更换成魔改过的Valine.min.js:
    可以直接修改主题配置文件后面# comments项的valine子项链接为 https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js
    或者可以下载到博客theme/butterfly/source/js目录下并更换valine子项链接为 /js/Valine.min.js
    1
    2
    3
    4
    5
    6
    7
    8
    # comments
    gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
    gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
    #valine:  https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
    valine:  /js/Valine.min.custom.min.js #https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js
    disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
    disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
    utterances: https://utteranc.es/client.js
    修改themes\butterfly\layout\includes\third-party\comments\路径下valine.pug
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     script.
    function loadValine () {
      function initValine () {
        let initData = {
          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,
          //-添加博主 小伙伴 访客标签新增修改：
          master: '', //博主邮箱md5 可使用网站 https://md5jiami.51240.com/ 进行转换
          friends: ['',''], //小伙伴邮箱md5
          tagMeta: ["博主","小伙伴","访客"],
          //-
        }
    主题配置文件 valine项：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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: 昵称栏输入QQ获取头像，快输入你的吐槽吧( ￣▽￣)σ # 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)
  #新增
  metaPlaceholder:
    nick: 昵称/QQ号(必填)
    mail: 邮箱(必填)
    link: 网址(https://)
2. 其他： 引入自定义效果，在`custom.css`添加如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   /* valine评论输入框背景*/
#veditor {
	background-image: url(/img/diysay-valine.webp); /*填写你的图片地址*/
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	background-color: rgba(255, 255, 255, 0);
	resize: vertical
}
/*评论框背景图输入时隐藏*/
#veditor:focus {
	background-position-y: 200px;
	transition: all 0.2s ease-in-out 0s;
}

/*隐藏markdown按钮*/
.vcol.vcol-30 {
	visibility: hidden;
}
/*隐藏valine按钮*/
.vpower.txt-right {
	visibility: hidden;
}

效果：

添加全局吸底 Aplayer 音乐播放器

以下步骤在 Butterfly 主题上可以正常生效
配置播放器

  1. 如果安装过 hexo-tag-aplayer 插件，参照该步骤，否则直接跳过该步：
    博客配置文件：
1
2
3
aplayer:
  meting: true
  asset_inject: false
  1. 开启 aplayerInject 选项：
    主题配置文件:
1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true
  1. 全局播放不中断：
    主题配置文件:
1
2
pjax:
  enable: true
  1. 插入 Aplayer 代码:
    插入到主题配置文件的 inject.bottom:
1
- <div class="aplayer no-destroy" data-id="732801999" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="list" data-preload="none" data-autoplay="false" muted></div>

参数：

关键字默认值选项描述
data-id（必要）自己获取并填写song id / playlist id / album id / search keyword
data-server（必要）自定义填写歌曲平台: netease, tencent, kugou, xiami, baidu
data-type（必要）自定义song, playlist, album, search, artist
data-theme#2980b9主题颜色代码
data-loopall音频循环播放, 可选值: all, one, none
data-orderlist音频循环顺序, 可选值: list, random
data-preloadauto预加载，可选值: none, metadata, auto
data-autoplayfalse是否自动播放：true，false
data-mutextrue互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
data-listFoldedfalse列表默认折叠
data-istMaxHeight340px列表最大高度
data-storageNamemetingjs存储播放器设置的 localStorage key
data-fixedtrue开启吸底模式: true，false
data-minitrue是否显示完整播放器，开启/关闭 迷你模式: true，false
5. 设置Aplayer 收回方式
设置 Aplayer 收回时将音乐 Cover 也隐藏掉，只留下右侧的箭头栏，防止遮挡阅读：
1
2
3
inject:
  head:
    - '<style type="text/css">.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{left:-66px!important}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover{left:0!important}</style>'

aplyer音乐播放器美化与深色模式

请看文章hexo博客butterfly主题aplyer音乐播放器美化与深色模式

live2D看板娘

安装hexo-helper-live2d插件：

1
npm install --save hexo-helper-live2d

下载安装相应的模型:
动态样式预览地址, 项目地址。
安装命令

1
npm install live2d-widget-model-koharu /*koharu为模型名称*/

各模型名称及预览：

博客配置文件新增配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
live2d:
	enable: true
	scriptFrom: local
	model: 
		use: live2d-widget-model-koharu #选择下载了的模型名称，此处示例为：koharu
	display: 
		position: right  #模型展示位置 左/右下角：left | right
		width: 150       #模型宽度
		height: 300      #模型高度
		hOffset: 15      #模型水平位置调整，可填负值 比如 15 -15，以具体展示效果准
		vOffset: -20     #模型纵向位置调整，可填负值 比如 20 -20，以具体展示效果准
	mobile: 
		show: true      #是否在手机端显示

友链页面美化

参考糖果屋Akilar的文章: Friend Link Card Beautify

  1. 新建友链页面（已经有了可跳过）：
  • 在Hexo博客根目录[Blog]下打开终端，输入hexo new page link:
1
hexo new page link
  • 打开[Blog]\source\link\index.md,添加一行type: 'link':
1
2
3
4
5
---
title: link
date: 2022-10-07 13:19:45
type: 'link'
---

  • 新建_data目录: blog\source\_data\，并在里面创建一个文件link.yml添加友链代码，样式如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    - class_name: 友情链接
      class_desc: 那些人，那些事
      link_list:
        - name: Hexo
          link: https://hexo.io/zh-tw/
          avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
          descr: 快速、简单且强大的网誌框架

    - class_name: 网站
      class_desc: 值得推荐的网站
      link_list:
        - name: bilibili
          link: https://www.bilibili.com/
          avatar: 
          descr: 年轻人的视频社区
        - name: Weibo
          link: https://www.weibo.com/
          avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
          descr: 中国最大社交分享平台
        - name: Twitter
          link: https://twitter.com/
          avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
          descr: 社交分享平台

    class_name 和 class_desc 支持 html 格式书写，如不需要，也可以留空。

  • 取消[Blog]\_config.butterfly.yml中menu配置项内link页面的注释:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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:
      #   - Music || /music/ || fas fa-music
      #   - Movie || /movies/ || fas fa-video
      Link: /link/ || fas fa-link
      # About: /about/ || fas fa-heart

  1. 修改[Blog]\themes\butterfly\layout\includes\page\flink.pug,此处添加判断机制，使得可以通过修改配置文件来切换友链风格。同时为了方便管理，把各个友链样式放到新建的文件目录[Blog]\themes\butterfly\layout\includes\page\flink_style下。

    修改[Blog]\themes\butterfly\layout\includes\page\flink.pug，全部内容替换为：

    1
    2
    3
    4
    5
    6
    7
    case theme.flink_style
      when 'volantis'
        include ./flink_style/volantis.pug
      when 'flexcard'
        include ./flink_style/flexcard.pug
      default
        include ./flink_style/butterfly.pug

    新建[Blog]\themes\butterfly\layout\includes\page\flink_style\butterfly.pug:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    #article-container
      if top_img === false
        h1.page-title= page.title
      .flink
        if site.data.link
          each i in site.data.link
            if i.class_name
              h2!= i.class_name
            if i.class_desc
              .flink-desc!=i.class_desc
            .flink-list
              each item in i.link_list
                .flink-list-item
                  a(href=url_for(item.link)  title=item.name target="_blank")
                    .flink-item-icon
                      img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                    .flink-item-name= item.name
                    .flink-item-desc(title=item.descr)= item.descr
      != page.content

    新建[Blog]\themes\butterfly\layout\includes\page\flink_style\volantis.pug:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    #article-container
      if top_img === false
        h1.page-title= page.title
      .flink
        if site.data.link
          each i in site.data.link
            if i.class_name
              h2!= i.class_name
            if i.class_desc
              .flink-desc!=i.class_desc
            .site-card-group
              each item in i.link_list
                a.site-card(target='_blank' rel='noopener' href=url_for(item.link))
                  .img
                    - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
                    img.no-lightbox(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
                  .info
                    img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
                    span.title= item.name
                    span.desc(title=item.descr)= item.descr
      != page.content

    新建[Blog]\themes\butterfly\layout\includes\page\flink_style\flexcard.pug：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    #article-container
      if top_img === false
        h1.page-title= page.title
      .flink
        if site.data.link
          each i in site.data.link
            if i.class_name
              h2!= i.class_name
            if i.class_desc
              .flink-desc!=i.class_desc
            .flink-list
              each item in i.link_list
                a.flink-list-card(href=url_for(item.link) target='_blank' data-title=item.descr)
                  .wrapper.cover
                    - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
                    img.no-lightbox.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )    
                  .info
                    img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
                    span.flink-sitename= item.name
      != page.content

  2. 修改[Blog]\themes\butterfly\source\css\_page\flink.styl,同理，将样式文件也放到新建的[Blog]\themes\butterfly\source\css\_flink_style目录下方便管理。

修改[Blog]\themes\butterfly\source\css\_page\flink.styl:

1
2
3
4
5
6
if hexo-config('flink_style') == 'butterfly'
  @import './_flink_style/butterfly'
else if hexo-config('flink_style') == 'volantis'
  @import './_flink_style/volantis'
else if hexo-config('flink_style') == 'flexcard'
  @import './_flink_style/flexcard'

新建[Blog]\themes\butterfly\source\css\_flink_style\butterfly.styl:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
.flink#article-container
  margin-bottom: 20px
.flink-desc
  margin: .2rem 0 .5rem

.flink-list
  overflow: auto
  padding: 10px 10px 0
  text-align: center

  & > .flink-list-item
    position: relative
    float: left
    overflow: hidden
    margin: 15px 7px
    width: calc(100% / 3 - 15px)
    height: 90px
    border-radius: 8px
    line-height: 17px
    -webkit-transform: translateZ(0)

    +maxWidth1024()
      width: calc(50% - 15px) !important

    +maxWidth600()
      width: calc(100% - 15px) !important

    &:hover
      .flink-item-icon
        margin-left: -10px
        width: 0

    &:before
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      z-index: -1
      background: var(--text-bg-hover)
      content: ''
      transition: transform .3s ease-out
      transform: scale(0)

    &:hover:before,
    &:focus:before,
    &:active:before
      transform: scale(1)

    a
      color: var(--font-color)
      text-decoration: none

      .flink-item-icon
        float: left
        overflow: hidden
        margin: 15px 10px
        width: 60px
        height: 60px
        border-radius: 35px
        transition: width .3s ease-out

        img
          width: 100%
          height: 100%
          transition: filter 375ms ease-in .2s, transform .3s
          object-fit: cover

      .img-alt
        display: none

.flink-item-name
  @extend .limit-one-line
  padding: 16px 10px 0 0
  height: 40px
  font-weight: bold
  font-size: 1.43em

.flink-item-desc
  @extend .limit-one-line
  padding: 16px 10px 16px 0
  height: 50px
  font-size: .93em
.flink-name
  margin-bottom: 5px
  font-weight: bold
  font-size: 1.5em

新建[Blog]\themes\butterfly\source\css\_flink_style\volantis.styl:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
trans($time = 0.28s)
  transition: all $time ease
  -moz-transition: all $time ease
  -webkit-transition: all $time ease
  -o-transition: all $time ease


.site-card-group
  display: flex
  flex-wrap: wrap
  justify-content: flex-start
  margin: -0.5 * 16px
  align-items: stretch
.site-card
  margin: 16px * 0.5
  width: "calc(100% / 4 - %s)" % 16px
  @media screen and (min-width: 2048px)
      width: "calc(100% / 5 - %s)" % 16px
  @media screen and (max-width: 768px)
      width: "calc(100% / 3 - %s)" % 16px
  @media screen and (max-width: 500px)
      width: "calc(100% / 2 - %s)" % 16px
  display: block
  line-height: 1.4
  height 100%
  .img
    width: 100%
    height 120px
    @media screen and (max-width: 500px)
      height 100px
    overflow: hidden
    border-radius: 12px * 0.5
    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
    background: #f6f6f6
    img
      width: 100%
      height 100%
      pointer-events:none;
      // trans(.75s)
      transition: transform 2s ease
      object-fit: cover

  .info
    margin-top: 16px * 0.5
    img
      width: 32px
      height: 32px
      pointer-events:none;
      border-radius: 16px
      float: left
      margin-right: 8px
      margin-top: 2px
    span
      display: block
    .title
      font-weight: 600
      font-size: var(--global-font-size)
      color: #444
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 1
      trans()
    .desc
      font-size: var(--global-font-size)
      word-wrap: break-word;
      line-height: 1.2
      color: #888
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 2
  .img
    trans()
  &:hover
    .img
      box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
    .info .title
      color: #ff5722

新建[Blog]\themes\butterfly\source\css\_flink_style\flexcard.styl:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
#article-container img
  margin 0 auto!important
.flink-list
  overflow auto
  & > a
    width calc(25% - 15px)
    height 130px
    position relative
    display block
    margin 15px 7px
    float left
    overflow hidden
    border-radius 10px
    transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s
    box-shadow 0 14px 38px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .06)
    &:hover
      .info
        transform translateY(-100%)
      .wrapper
        img
          transform scale(1.2)
      &::before
        position: fixed
        width:inherit
        margin:auto
        left:0
        right:0
        top:10%
        border-radius: 10px
        text-align: center
        z-index: 100
        content: attr(data-title)
        font-size: 20px
        color: #fff
        padding: 10px
        background-color: rgba($theme-color,0.8)

    .cover
      width 100%
      transition transform .5s ease-out
    .wrapper
      position relative
      .fadeIn
        animation coverIn .8s ease-out forwards
      img
        height 130px
        pointer-events none
    .info
      display flex
      flex-direction column
      justify-content center
      align-items center
      width 100%
      height 100%
      overflow hidden
      border-radius 3px
      background-color hsla(0, 0%, 100%, .7)
      transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s
      img
        position relative
        top 22px
        width 66px
        height 66px
        border-radius 50%
        box-shadow 0 0 10px rgba(0, 0, 0, .3)
        z-index 1
        text-align center
        pointer-events none
      span
        padding 20px 10% 60px 10%
        font-size 16px
        width 100%
        text-align center
        box-shadow 0 0 10px rgba(0, 0, 0, .3)
        background-color hsla(0, 0%, 100%, .7)
        color var(--font-color)
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
.flink-list>a .info,
.flink-list>a .wrapper .cover
  position absolute
  top 0
  left 0

@media screen and (max-width:1024px)
  .flink-list
    & > a
      width calc(33.33333% - 15px)

@media screen and (max-width:600px)
  .flink-list
    & > a
      width calc(50% - 15px)

[data-theme=dark]
  .flink-list a .info,
  .flink-list a .info span
    background-color rgba(0, 0, 0, .6)
  .flink-list
    & > a
      &:hover
        &:before
          background-color: rgba(#121212,0.8);
.justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > svg,
.justified-gallery > figure > svg,
.justified-gallery > a > a > svg,
.justified-gallery > div > a > svg,
.justified-gallery > figure > a > svg
  position static!important

  1. 因为Volantis的site-card比Butterfly的flink-card多出了一个站点缩略图，所以需要再额外添加一条配置项。修改[Blog]\source\_data\link.yml,添加一条名为siteshot的配置项。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    - class_name: 糖果屋のVIP
      class_desc: 售后服务享五折优惠2333
      link_list:
        - name: Akilar
          link: https://akilar.top
          avatar: /img/siteicon/favicon.png
          descr: 欢迎光临糖果屋
          siteshot: https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg
          # siteshot就是站点缩略图的链接。

  2. 在[Blog]\_config.butterfly.yml中添加配置项：

    1
    2
    # 友链样式，butterfly为默认样式，volantis为站点卡片样式.flexcard为弹性卡片样式
    flink_style: volantis # butterfly | volantis | flexcard

  3. 站点卡片添加了懒加载和图片失效替换。对应配置项为[Blog]\_config.butterfly.yml中的：

    1
    2
    3
    4
    # Replace Broken Images (替換無法顯示的圖片)
    error_img:
      flink:   # 头像失效替换图
      post_page:  # 站点缩略图

加载动画更换

参考了如下文章并尽量少改动下对butterfly4.5.0+进行了适配：

步骤：

创建动画结构模板文件：

新建[Blog]\themes\butterfly\layout\includes\loading\shink.pug文件并添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
- loading_img = theme.preloader.avatar
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
  .loading-bg
    img.loading-img(class='nolazyload' src=loading_img ? url_for(loading_img) : "/img/avatar.webp") //- 替换为你的头像地址，或者在自定义引入的custom.css进行覆盖。
    .loading-image-dot
    #loading-percentage
      | 0%
script.
  const loadingPercentage = document.getElementById("loading-percentage");
  loadingPercentage.style.color = "black";
  let loadingPercentageTimer = setInterval(function() {
    var progressBar = document.querySelector(".pace-progress");
    if (!progressBar) return
    var currentValue = progressBar.getAttribute("data-progress-text");
    if (currentValue !== loadingPercentage.textContent) {
      loadingPercentage.textContent = currentValue;
      if (currentValue === "100%") {
        clearInterval(loadingPercentageTimer);
      }
    }
  }, 100);
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")
    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

新建[Blog]\themes\butterfly\layout\includes\loading\gear.pug文件并添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#loading-box
  .gear-loader
    .gear-loader_overlay
    .gear-loader_cogs
      .gear-loader_cogs__top
        .gear-top_part
        .gear-top_part
        .gear-top_part
        .gear-top_hole
      .gear-loader_cogs__left
        .gear-left_part
        .gear-left_part
        .gear-left_part
        .gear-left_hole
      .gear-loader_cogs__bottom
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_hole

script.
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

新建[Blog]\themes\butterfly\layout\includes\loading\ironheart.pug文件并添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#loading-box
  .loading-left-bg
  .loading-right-bg
  .iron-container.iron-circle
    .iron-box1.iron-circle.iron-center
    .iron-box2.iron-circle.iron-center
    .iron-box3.iron-circle.iron-center
    .iron-box4.iron-circle.iron-center
    .iron-box5.iron-circle.iron-center
    .iron-box6.iron-circle
      .iron-coil(style='--i: 0')
      .iron-coil(style='--i: 1')
      .iron-coil(style='--i: 2')
      .iron-coil(style='--i: 3')
      .iron-coil(style='--i: 4')
      .iron-coil(style='--i: 5')
      .iron-coil(style='--i: 6')
      .iron-coil(style='--i: 7')

script.
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

新建[Blog]\themes\butterfly\layout\includes\loading\wizard.pug文件并添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#loading-box
  .loading-left-bg
  .loading-right-bg
  .wizard-scene
    .wizard-objects
      .wizard-square
      .wizard-circle
      .wizard-triangle
    .wizard
      .wizard-body
      .wizard-right-arm
        .wizard-right-hand
      .wizard-left-arm
        .wizard-left-hand
      .wizard-head
        .wizard-beard
        .wizard-face
          .wizard-adds
        .wizard-hat
          .wizard-hat-of-the-hat
          .wizard-four-point-star.--first
          .wizard-four-point-star.--second
          .wizard-four-point-star.--third

script.
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

新建[Blog]\themes\butterfly\layout\includes\loading\image.pug文件并添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- var loadimage = theme.preloader.load_image ? theme.preloader.load_image : theme.error_img.post_page
#loading-box
  .loading-left-bg
  .loading-right-bg
  img.load-image(src=url_for(loadimage) alt='')

script.
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

修改index.pug

修改[Blog]\themes\butterfly\layout\includes\loading\index.pug文件替换为如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if theme.preloader.source === 1
  include ./fullpage-loading.pug
else if theme.preloader.source === 2
  include ./pace.pug
else if  theme.preloader.source === 3
  include ./shink.pug
else if  theme.preloader.source === 4
  include ./gear.pug
else if  theme.preloader.source === 5
  include ./ironheart.pug
else if  theme.preloader.source === 6
  include ./wizard.pug
else if  theme.preloader.source === 7
  include ./image.pug

修改loading.styl:

修改[Blog]\themes\butterfly\source\css\_layout\loading.styl注释（或删除）掉其全部内容替换为如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
if hexo-config('preloader.enable')
  if hexo-config('preloader.source') == 1
    @import './_load_style/default'
  else if hexo-config('preloader.source') == 3
    @import './_load_style/shink'
  else if hexo-config('preloader.source') == 4
    @import './_load_style/gear'
  else if hexo-config('preloader.source') == 5
    @import './_load_style/ironheart'
  else if hexo-config('preloader.source') == 6
    @import './_load_style/wizard'
  else if hexo-config('preloader.source') == 7
    @import './_load_style/image'

创建动画样式模板文件

新建动画样式模板存放的文件夹，所有动画样式均存放在[Blog]\themes\butterfly\source\css\_load_style\目录下:

新建[Blog]\themes\butterfly\source\css\_load_style\default.styl文件并添加如下代码：
（ps: 该代码其实为[Blog]\themes\butterfly\source\css\_layout\loading.styl从第2行开始的原代码）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
.loading-bg
  position fixed
  z-index 1000
  width 50%
  height 100%
  background var(--preloader-bg)
#loading-box
  .loading-left-bg
    @extend .loading-bg
    left 0
  .loading-right-bg
    @extend .loading-bg
    right 0
  &.loaded
    z-index -1000
    .loading-left-bg
      transition all 1.0s
      transform translate(-100%, 0)
    .loading-right-bg
      transition all 1.0s
      transform translate(100%, 0)
#loading-box
  .spinner-box
    position fixed
    z-index 1001
    display flex
    justify-content center
    align-items center
    width 100%
    height 100vh

    .configure-border-1
      position absolute
      padding 3px
      width 115px
      height 115px
      background #ffab91
      animation configure-clockwise 3s ease-in-out 0s infinite alternate

    .configure-border-2
      left -115px
      padding 3px
      width 115px
      height 115px
      background rgb(63, 249, 220)
      transform rotate(45deg)
      animation configure-xclockwise 3s ease-in-out 0s infinite alternate

    .loading-word
      position absolute
      color var(--preloader-color)
      font-size 16px

    .configure-core
      width 100%
      height 100%
      background-color var(--preloader-bg)

  &.loaded
    .spinner-box
      display none

@keyframes configure-clockwise
  0%
    transform rotate(0)

  25%
    transform rotate(90deg)

  50%
    transform rotate(180deg)

  75%
    transform rotate(270deg)

  100%
    transform rotate(360deg)

@keyframes configure-xclockwise
  0%
    transform rotate(45deg)

  25%
    transform rotate(-45deg)

  50%
    transform rotate(-135deg)

  75%
    transform rotate(-225deg)

  100%
    transform rotate(-315deg)

新建[Blog]\themes\butterfly\source\css\_load_style\shink.styl文件并添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.loading-bg
  display flex
  width 100%
  height 100%
  position fixed
  background #f6eff6 /*可以此处改为你需要的背景色，日间模式，，或者在自定义引入的custom.css进行覆盖，custom.css是什么请看 魔改配置 章节*/
  z-index 1001
  opacity 1
  transition 0.3s

[data-theme=dark] .loading-bg { /*夜间模式*/
  display flex
  width 100%
  height 100%
  position fixed
  background #020305
  z-index 1001
  opacity 1
  transition 0.3s
}

#loading-box
  .loading-img
    width 100px
    height 100px
    border-radius 50%
    margin auto
    border 4px solid #f0f0f2
    animation-duration 0.3s
    animation-name loadingAction
    animation-iteration-count infinite
    animation-direction alternate

  .loading-image-dot
    width 30px
    height 30px
    background #6bdf8f
    position absolute
    border-radius 50%
    border 6px solid #fff
    top 50%
    left 50%
    transform translate(18px, 24px)

  #loading-percentage
    position absolute
    top 67%
    left 50%
    transform translateX(-50%)
    &::before
      content '「'
      margin-right 10px
    &::after
      content '」'
      margin-left 10px
  &.loaded
    .loading-bg
      opacity 0
      z-index -1000

@keyframes loadingAction
  0%
    opacity 1
  100%
    opacity 0.4

新建[Blog]\themes\butterfly\source\css\_load_style\gear.styl文件并添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
#loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  text-align center
  &.loaded
    z-index -1000
    .gear-loader
      display none
  .gear-loader
    height 100%
    position relative
    margin auto
    width 400px
  .gear-loader_overlay
    width 150px
    height 150px
    background transparent
    box-shadow 0px 0px 0px 1000px rgba(0, 0, 0, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset
    border-radius 100%
    z-index -1
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs
    z-index -2
    width 100px
    height 100px
    top -120px !important
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs__top
    position relative
    width 100px
    height 100px
    transform-origin 50px 50px
    -webkit-animation rotate 10s infinite linear
    animation rotate 10s infinite linear
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-top_part
        width 100px
        border-radius 10px
        position absolute
        height 100px
        background #f98db9
      &.gear-top_hole
        width 50px
        height 50px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__left
    position relative
    width 80px
    transform rotate(16deg)
    top 28px
    transform-origin 40px 40px
    animation rotate_left 10s 0.1s infinite reverse linear
    left -24px
    height 80px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-left_part
        width 80px
        border-radius 6px
        position absolute
        height 80px
        background #97ddff
      &.gear-left_hole
        width 40px
        height 40px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__bottom
    position relative
    width 60px
    top -65px
    transform-origin 30px 30px
    -webkit-animation rotate_left 10.2s 0.4s infinite linear
    animation rotate_left 10.2s 0.4s infinite linear
    transform rotate(4deg)
    left 79px
    height 60px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-bottom_part
        width 60px
        border-radius 5px
        position absolute
        height 60px
        background #ffcd66
      &.gear-bottom_hole
        width 30px
        height 30px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto



/* Animations */
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}

新建[Blog]\themes\butterfly\source\css\_load_style\ironheart.styl文件并添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
.loading-bg
  position fixed
  z-index 1000
  width 50%
  height 100%
  background var(--preloader-bg)
#loading-box
  .loading-left-bg
    @extend .loading-bg
    left 0
  .loading-right-bg
    @extend .loading-bg
    right 0
  &.loaded
    z-index -1000
    .loading-left-bg
      transition all 1.0s
      transform translate(-100%, 0)
    .loading-right-bg
      transition all 1.0s
      transform translate(100%, 0)
#loading-box
  position fixed
  z-index 1000
  display -webkit-box
  display flex
  -webkit-box-align center
  align-items center
  -webkit-box-pack center
  justify-content center
  -webkit-box-orient vertical
  -webkit-box-direction normal
  flex-direction column
  flex-wrap wrap
  width 100vw
  height 100vh
  overflow hidden

  &.loaded
    .iron-container
      display none

  .iron-circle
    border-radius 50%

  .iron-center
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)

  .iron-container
    z-index 1001
    position relative
    width 300px
    height 300px
    border 1px solid rgb(18, 20, 20)
    background-color #384c50
    box-shadow 0 0 32px 8px rgb(18, 20, 20), 0 0 4px 1px rgb(18, 20, 20) inset
    .iron-box1
      width 238px
      height 238px
      background-color rgb(22, 26, 27)
      box-shadow 0 0 4px 1px #52fefe
    .iron-box2
      width 220px
      height 220px
      background-color #fff
      box-shadow 0 0 5px 1px #52fefe, 0 0 5px 4px #52fefe inset
    .iron-box3
      width 180px
      height 180px
      background-color #073c4b
      box-shadow 0 0 5px 4px #52fefe, 0 0 6px 2px #52fefe inset
    .iron-box4
      width 120px
      height 120px
      border 1px solid #52fefe
      background-color #fff
      box-shadow 0 0 2px 1px #52fefe, 0 0 10px 5px #52fefe inset
    .iron-box5
      width 70px
      height 70px
      border 5px solid #1b4e5f
      box-shadow 0 0 7px 5px #52fefe, 0 0 10px 10px #52fefe inset
    .iron-box6
      position relative
      width 100%
      height 100%
      animation ironrotate 3s linear infinite
      .iron-coil
        position absolute
        width 30px
        height 20px
        top calc(50% - 110px)
        left calc(50% - 15px)
        background-color #073c4b
        box-shadow 0 0 5px #52fefe inset
        transform rotate(calc(var(--i) * 45deg))
        transform-origin center 110px
@keyframes ironrotate
	0%
		transform rotate(0)
	100%
		transform rotate(360deg)

新建[Blog]\themes\butterfly\source\css\_load_style\wizard.styl文件并添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
.loading-bg
  position fixed
  z-index 1000
  width 50%
  height 100%
  background var(--preloader-bg)
#loading-box
  .loading-left-bg
    @extend .loading-bg
    left 0
  .loading-right-bg
    @extend .loading-bg
    right 0
  &.loaded
    z-index -1000
    .loading-left-bg
      transition all 1.0s
      transform translate(-100%, 0)
    .loading-right-bg
      transition all 1.0s
      transform translate(100%, 0)
#loading-box
  position fixed
  z-index 1000
  display -webkit-box
  display flex
  -webkit-box-align center
  align-items center
  -webkit-box-pack center
  justify-content center
  -webkit-box-orient vertical
  -webkit-box-direction normal
  flex-direction column
  flex-wrap wrap
  width 100vw
  height 100vh
  overflow hidden

  &.loaded
    .wizard-scene
      display none

.wizard-scene
  position fixed
  z-index 1001
  display -webkit-box
  display flex

.wizard
  position relative
  width 190px
  height 240px

.wizard-body
  position absolute
  bottom 0
  left 68px
  height 100px
  width 60px
  background #3f64ce
  &::after
    content ""
    position absolute
    bottom 0
    left 20px
    height 100px
    width 60px
    background #3f64ce
    -webkit-transform skewX(14deg)
    transform skewX(14deg)

.wizard-right-arm
  position absolute
  bottom 74px
  left 110px
  height 44px
  width 90px
  background #3f64ce
  border-radius 22px
  -webkit-transform-origin 16px 22px
  transform-origin 16px 22px
  -webkit-transform rotate(70deg)
  transform rotate(70deg)
  -webkit-animation right_arm 10s ease-in-out infinite
  animation right_arm 10s ease-in-out infinite
  .right-hand
    position absolute
    right 8px
    bottom 8px
    width 30px
    height 30px
    border-radius 50%
    background #f1c5b4
    -webkit-transform-origin center center
    transform-origin center center
    -webkit-transform rotate(-40deg)
    transform rotate(-40deg)
    -webkit-animation right_hand 10s ease-in-out infinite
    animation right_hand 10s ease-in-out infinite
  .wizard-right-hand
    &::after
      content ""
      position absolute
      right 0px
      top -8px
      width 15px
      height 30px
      border-radius 10px
      background #f1c5b4
      -webkit-transform translateY(16px)
      transform translateY(16px)
      -webkit-animation right_finger 10s ease-in-out infinite
      animation right_finger 10s ease-in-out infinite

.wizard-left-arm
  position absolute
  bottom 74px
  left 26px
  height 44px
  width 70px
  background #3f64ce
  border-bottom-left-radius 8px
  -webkit-transform-origin 60px 26px
  transform-origin 60px 26px
  -webkit-transform rotate(-70deg)
  transform rotate(-70deg)
  -webkit-animation left_arm 10s ease-in-out infinite
  animation left_arm 10s ease-in-out infinite
  .wizard-left-hand
    position absolute
    left -18px
    top 0
    width 18px
    height 30px
    border-top-left-radius 35px
    border-bottom-left-radius 35px
    background #f1c5b4
    &::after
      content ""
      position absolute
      right 0
      top 0
      width 30px
      height 15px
      border-radius 20px
      background #f1c5b4
      -webkit-transform-origin right bottom
      transform-origin right bottom
      -webkit-transform scaleX(0)
      transform scaleX(0)
      -webkit-animation left_finger 10s ease-in-out infinite
      animation left_finger 10s ease-in-out infinite

.wizard-head
  position absolute
  top 0
  left 14px
  width 160px
  height 210px
  -webkit-transform-origin center center
  transform-origin center center
  -webkit-transform rotate(-3deg)
  transform rotate(-3deg)
  -webkit-animation head 10s ease-in-out infinite
  animation head 10s ease-in-out infinite
  .wizard-beard
    position absolute
    bottom 0
    left 38px
    height 106px
    width 80px
    border-bottom-right-radius 55%
    background #ffffff
    &::after
      content ""
      position absolute
      top 16px
      left -10px
      width 40px
      height 20px
      border-radius 20px
      background #ffffff
  .wizard-face
    position absolute
    bottom 76px
    left 38px
    height 30px
    width 60px
    background #f1c5b4
    &::before
      content ""
      position absolute
      top 0px
      left 40px
      width 20px
      height 40px
      border-bottom-right-radius 20px
      border-bottom-left-radius 20px
      background #f1c5b4
    &::after
      content ""
      position absolute
      top 16px
      left -10px
      width 50px
      height 20px
      border-radius 20px
      border-bottom-right-radius 0px
      background #ffffff
    .wizard-adds
      position absolute
      top 0px
      left -10px
      width 40px
      height 20px
      border-radius 20px
      background #f1c5b4
      &::after
        content ""
        position absolute
        top 5px
        left 80px
        width 15px
        height 20px
        border-bottom-right-radius 20px
        border-top-right-radius 20px
        background #f1c5b4
  .wizard-hat
    position absolute
    bottom 106px
    left 0
    width 160px
    height 20px
    border-radius 20px
    background #3f64ce
    &::before
      content ""
      position absolute
      top -70px
      left 50%
      -webkit-transform translatex(-50%)
      transform translatex(-50%)
      width 0
      height 0
      border-style solid
      border-width 0 34px 70px 50px
      border-color transparent transparent #3f64ce transparent
    &::after
      content ""
      position absolute
      top 0
      left 0
      width 160px
      height 20px
      background #3f64ce
      border-radius 20px
    .wizard-hat-of-the-hat
      position absolute
      bottom 78px
      left 79px
      width 0
      height 0
      border-style solid
      border-width 0 25px 25px 19px
      border-color transparent transparent #3f64ce transparent
      &::after
        content ""
        position absolute
        top 6px
        left -4px
        width 35px
        height 10px
        border-radius 10px
        border-bottom-left-radius 0px
        background #3f64ce
        -webkit-transform rotate(40deg)
        transform rotate(40deg)
    .wizard-four-point-star
      position absolute
      width 12px
      height 12px
      &::after
        -webkit-transform rotate(156.66deg) skew(45deg)
        transform rotate(156.66deg) skew(45deg)
      &.--first
        bottom 28px
        left 46px
      &.--second
        bottom 40px
        left 80px
      &.--third
        bottom 15px
        left 108px

.wizard-head .wizard-hat .wizard-four-point-star::after, .wizard-head .wizard-hat .wizard-four-point-star::before
  content ""
  position absolute
  background #ffffff
  display block
  left 0
  width 141.4213%
  top 0
  bottom 0
  border-radius 10%
  -webkit-transform rotate(66.66deg) skewX(45deg)
  transform rotate(66.66deg) skewX(45deg)

.wizard-objects
  position relative
  width 200px
  height 240px

.wizard-square
  position absolute
  bottom -60px
  left -5px
  width 120px
  height 120px
  border-radius 50%
  -webkit-transform rotate(-360deg)
  transform rotate(-360deg)
  -webkit-animation path_square 10s ease-in-out infinite
  animation path_square 10s ease-in-out infinite
  &::after
    content ""
    position absolute
    top 10px
    left 0
    width 50px
    height 50px
    background #9ab3f5

.wizard-circle
  position absolute
  bottom 10px
  left 0
  width 100px
  height 100px
  border-radius 50%
  -webkit-transform rotate(-360deg)
  transform rotate(-360deg)
  -webkit-animation path_circle 10s ease-in-out infinite
  animation path_circle 10s ease-in-out infinite
  &::after
    content ""
    position absolute
    bottom -10px
    left 25px
    width 50px
    height 50px
    border-radius 50%
    background #c56183

.wizard-triangle
  position absolute
  bottom -62px
  left -10px
  width 110px
  height 110px
  border-radius 50%
  -webkit-transform rotate(-360deg)
  transform rotate(-360deg)
  -webkit-animation path_triangle 10s ease-in-out infinite
  animation path_triangle 10s ease-in-out infinite
  &::after
    content ""
    position absolute
    top 0
    right -10px
    width 0
    height 0
    border-style solid
    border-width 0 28px 48px 28px
    border-color transparent transparent #89beb3 transparent


/** 10s animation - 10% = 1s */
@-webkit-keyframes right_arm
  0%
    -webkit-transform rotate(70deg)
    transform rotate(70deg)
  10%
    -webkit-transform rotate(8deg)
    transform rotate(8deg)
  15%
    -webkit-transform rotate(20deg)
    transform rotate(20deg)
  20%
    -webkit-transform rotate(10deg)
    transform rotate(10deg)
  25%
    -webkit-transform rotate(26deg)
    transform rotate(26deg)
  30%
    -webkit-transform rotate(10deg)
    transform rotate(10deg)
  35%
    -webkit-transform rotate(28deg)
    transform rotate(28deg)
  40%
    -webkit-transform rotate(9deg)
    transform rotate(9deg)
  45%
    -webkit-transform rotate(28deg)
    transform rotate(28deg)
  50%
    -webkit-transform rotate(8deg)
    transform rotate(8deg)
  58%
    -webkit-transform rotate(74deg)
    transform rotate(74deg)
  62%
    -webkit-transform rotate(70deg)
    transform rotate(70deg)

@keyframes right_arm
  0%
    -webkit-transform rotate(70deg)
    transform rotate(70deg)
  10%
    -webkit-transform rotate(8deg)
    transform rotate(8deg)
  15%
    -webkit-transform rotate(20deg)
    transform rotate(20deg)
  20%
    -webkit-transform rotate(10deg)
    transform rotate(10deg)
  25%
    -webkit-transform rotate(26deg)
    transform rotate(26deg)
  30%
    -webkit-transform rotate(10deg)
    transform rotate(10deg)
  35%
    -webkit-transform rotate(28deg)
    transform rotate(28deg)
  40%
    -webkit-transform rotate(9deg)
    transform rotate(9deg)
  45%
    -webkit-transform rotate(28deg)
    transform rotate(28deg)
  50%
    -webkit-transform rotate(8deg)
    transform rotate(8deg)
  58%
    -webkit-transform rotate(74deg)
    transform rotate(74deg)
  62%
    -webkit-transform rotate(70deg)
    transform rotate(70deg)

@-webkit-keyframes left_arm
  0%
    -webkit-transform rotate(-70deg)
    transform rotate(-70deg)
  10%
    -webkit-transform rotate(6deg)
    transform rotate(6deg)
  15%
    -webkit-transform rotate(-18deg)
    transform rotate(-18deg)
  20%
    -webkit-transform rotate(5deg)
    transform rotate(5deg)
  25%
    -webkit-transform rotate(-18deg)
    transform rotate(-18deg)
  30%
    -webkit-transform rotate(5deg)
    transform rotate(5deg)
  35%
    -webkit-transform rotate(-17deg)
    transform rotate(-17deg)
  40%
    -webkit-transform rotate(5deg)
    transform rotate(5deg)
  45%
    -webkit-transform rotate(-18deg)
    transform rotate(-18deg)
  50%
    -webkit-transform rotate(6deg)
    transform rotate(6deg)
  58%
    -webkit-transform rotate(-74deg)
    transform rotate(-74deg)
  62%
    -webkit-transform rotate(-70deg)
    transform rotate(-70deg)

@keyframes left_arm
  0%
    -webkit-transform rotate(-70deg)
    transform rotate(-70deg)
  10%
    -webkit-transform rotate(6deg)
    transform rotate(6deg)
  15%
    -webkit-transform rotate(-18deg)
    transform rotate(-18deg)
  20%
    -webkit-transform rotate(5deg)
    transform rotate(5deg)
  25%
    -webkit-transform rotate(-18deg)
    transform rotate(-18deg)
  30%
    -webkit-transform rotate(5deg)
    transform rotate(5deg)
  35%
    -webkit-transform rotate(-17deg)
    transform rotate(-17deg)
  40%
    -webkit-transform rotate(5deg)
    transform rotate(5deg)
  45%
    -webkit-transform rotate(-18deg)
    transform rotate(-18deg)
  50%
    -webkit-transform rotate(6deg)
    transform rotate(6deg)
  58%
    -webkit-transform rotate(-74deg)
    transform rotate(-74deg)
  62%
    -webkit-transform rotate(-70deg)
    transform rotate(-70deg)

@-webkit-keyframes right_hand
  0%
    -webkit-transform rotate(-40deg)
    transform rotate(-40deg)
  10%
    -webkit-transform rotate(-20deg)
    transform rotate(-20deg)
  15%
    -webkit-transform rotate(-5deg)
    transform rotate(-5deg)
  20%
    -webkit-transform rotate(-60deg)
    transform rotate(-60deg)
  25%
    -webkit-transform rotate(0deg)
    transform rotate(0deg)
  30%
    -webkit-transform rotate(-60deg)
    transform rotate(-60deg)
  35%
    -webkit-transform rotate(0deg)
    transform rotate(0deg)
  40%
    -webkit-transform rotate(-40deg)
    transform rotate(-40deg)
  45%
    -webkit-transform rotate(-60deg)
    transform rotate(-60deg)
  50%
    -webkit-transform rotate(10deg)
    transform rotate(10deg)
  60%
    -webkit-transform rotate(-40deg)
    transform rotate(-40deg)


@keyframes right_hand
  0%
    -webkit-transform rotate(-40deg)
    transform rotate(-40deg)
  10%
    -webkit-transform rotate(-20deg)
    transform rotate(-20deg)
  15%
    -webkit-transform rotate(-5deg)
    transform rotate(-5deg)
  20%
    -webkit-transform rotate(-60deg)
    transform rotate(-60deg)
  25%
    -webkit-transform rotate(0deg)
    transform rotate(0deg)
  30%
    -webkit-transform rotate(-60deg)
    transform rotate(-60deg)
  35%
    -webkit-transform rotate(0deg)
    transform rotate(0deg)
  40%
    -webkit-transform rotate(-40deg)
    transform rotate(-40deg)
  45%
    -webkit-transform rotate(-60deg)
    transform rotate(-60deg)
  50%
    -webkit-transform rotate(10deg)
    transform rotate(10deg)
  60%
    -webkit-transform rotate(-40deg)
    transform rotate(-40deg)

@-webkit-keyframes right_finger
  0%
    -webkit-transform translateY(16px)
    transform translateY(16px)
  10%
    -webkit-transform none
    transform none
  50%
    -webkit-transform none
    transform none
  60%
    -webkit-transform translateY(16px)
    transform translateY(16px)

@keyframes right_finger
  0%
    -webkit-transform translateY(16px)
    transform translateY(16px)
  10%
    -webkit-transform none
    transform none
  50%
    -webkit-transform none
    transform none
  60%
    -webkit-transform translateY(16px)
    transform translateY(16px)

@-webkit-keyframes left_finger
  0%
    -webkit-transform scaleX(0)
    transform scaleX(0)
  10%
    -webkit-transform scaleX(1) rotate(6deg)
    transform scaleX(1) rotate(6deg)
  15%
    -webkit-transform scaleX(1) rotate(0deg)
    transform scaleX(1) rotate(0deg)
  20%
    -webkit-transform scaleX(1) rotate(8deg)
    transform scaleX(1) rotate(8deg)
  25%
    -webkit-transform scaleX(1) rotate(0deg)
    transform scaleX(1) rotate(0deg)
  30%
    -webkit-transform scaleX(1) rotate(7deg)
    transform scaleX(1) rotate(7deg)
  35%
    -webkit-transform scaleX(1) rotate(0deg)
    transform scaleX(1) rotate(0deg)
  40%
    -webkit-transform scaleX(1) rotate(5deg)
    transform scaleX(1) rotate(5deg)
  45%
    -webkit-transform scaleX(1) rotate(0deg)
    transform scaleX(1) rotate(0deg)
  50%
    -webkit-transform scaleX(1) rotate(6deg)
    transform scaleX(1) rotate(6deg)
  58%
    -webkit-transform scaleX(0)
    transform scaleX(0)

@keyframes left_finger
  0%
    -webkit-transform scaleX(0)
    transform scaleX(0)
  10%
    -webkit-transform scaleX(1) rotate(6deg)
    transform scaleX(1) rotate(6deg)
  15%
    -webkit-transform scaleX(1) rotate(0deg)
    transform scaleX(1) rotate(0deg)
  20%
    -webkit-transform scaleX(1) rotate(8deg)
    transform scaleX(1) rotate(8deg)
  25%
    -webkit-transform scaleX(1) rotate(0deg)
    transform scaleX(1) rotate(0deg)
  30%
    -webkit-transform scaleX(1) rotate(7deg)
    transform scaleX(1) rotate(7deg)
  35%
    -webkit-transform scaleX(1) rotate(0deg)
    transform scaleX(1) rotate(0deg)
  40%
    -webkit-transform scaleX(1) rotate(5deg)
    transform scaleX(1) rotate(5deg)
  45%
    -webkit-transform scaleX(1) rotate(0deg)
    transform scaleX(1) rotate(0deg)
  50%
    -webkit-transform scaleX(1) rotate(6deg)
    transform scaleX(1) rotate(6deg)
  58%
    -webkit-transform scaleX(0)
    transform scaleX(0)

@-webkit-keyframes head
  0%
    -webkit-transform rotate(-3deg)
    transform rotate(-3deg)
  10%
    -webkit-transform translatex(10px) rotate(7deg)
    transform translatex(10px) rotate(7deg)
  50%
    -webkit-transform translatex(0px) rotate(0deg)
    transform translatex(0px) rotate(0deg)
  56%
    -webkit-transform rotate(-3deg)
    transform rotate(-3deg)

@keyframes head
  0%
    -webkit-transform rotate(-3deg)
    transform rotate(-3deg)
  10%
    -webkit-transform translatex(10px) rotate(7deg)
    transform translatex(10px) rotate(7deg)
  50%
    -webkit-transform translatex(0px) rotate(0deg)
    transform translatex(0px) rotate(0deg)
  56%
    -webkit-transform rotate(-3deg)
    transform rotate(-3deg)
/** 10s animation - 10% = 1s */
@-webkit-keyframes path_circle
  0%
    -webkit-transform translateY(0)
    transform translateY(0)
  10%
    -webkit-transform translateY(-100px) rotate(-5deg)
    transform translateY(-100px) rotate(-5deg)
  55%
    -webkit-transform translateY(-100px) rotate(-360deg)
    transform translateY(-100px) rotate(-360deg)
  58%
    -webkit-transform translateY(-100px) rotate(-360deg)
    transform translateY(-100px) rotate(-360deg)
  63%
    -webkit-transform rotate(-360deg)
    transform rotate(-360deg)

@keyframes path_circle
  0%
    -webkit-transform translateY(0)
    transform translateY(0)
  10%
    -webkit-transform translateY(-100px) rotate(-5deg)
    transform translateY(-100px) rotate(-5deg)
  55%
    -webkit-transform translateY(-100px) rotate(-360deg)
    transform translateY(-100px) rotate(-360deg)
  58%
    -webkit-transform translateY(-100px) rotate(-360deg)
    transform translateY(-100px) rotate(-360deg)
  63%
    -webkit-transform rotate(-360deg)
    transform rotate(-360deg)

@-webkit-keyframes path_square
  0%
    -webkit-transform translateY(0)
    transform translateY(0)
  10%
    -webkit-transform translateY(-155px) translatex(-15px) rotate(10deg)
    transform translateY(-155px) translatex(-15px) rotate(10deg)
  55%
    -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
    transform translateY(-155px) translatex(-15px) rotate(-350deg)
  57%
    -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
    transform translateY(-155px) translatex(-15px) rotate(-350deg)
  63%
    -webkit-transform rotate(-360deg)
    transform rotate(-360deg)

@keyframes path_square
  0%
    -webkit-transform translateY(0)
    transform translateY(0)
  10%
    -webkit-transform translateY(-155px) translatex(-15px) rotate(10deg)
    transform translateY(-155px) translatex(-15px) rotate(10deg)
  55%
    -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
    transform translateY(-155px) translatex(-15px) rotate(-350deg)
  57%
    -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
    transform translateY(-155px) translatex(-15px) rotate(-350deg)
  63%
    -webkit-transform rotate(-360deg)
    transform rotate(-360deg)

@-webkit-keyframes path_triangle
  0%
    -webkit-transform translateY(0)
    transform translateY(0)
  10%
    -webkit-transform translateY(-172px) translatex(10px) rotate(-10deg)
    transform translateY(-172px) translatex(10px) rotate(-10deg)
  55%
    -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
    transform translateY(-172px) translatex(10px) rotate(-365deg)
  58%
    -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
    transform translateY(-172px) translatex(10px) rotate(-365deg)
  63%
    -webkit-transform rotate(-360deg)
    transform rotate(-360deg)

@keyframes path_triangle
  0%
    -webkit-transform translateY(0)
    transform translateY(0)
  10%
    -webkit-transform translateY(-172px) translatex(10px) rotate(-10deg)
    transform translateY(-172px) translatex(10px) rotate(-10deg)
  55%
    -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
    transform translateY(-172px) translatex(10px) rotate(-365deg)
  58%
    -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
    transform translateY(-172px) translatex(10px) rotate(-365deg)
  63%
    -webkit-transform rotate(-360deg)
    transform rotate(-360deg)

新建[Blog]\themes\butterfly\source\css\_load_style\image.styl文件并添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.loading-bg
  position fixed
  z-index 1000
  width 50%
  height 100%
  background var(--preloader-bg)
#loading-box
  .loading-left-bg
    @extend .loading-bg
    left 0
  .loading-right-bg
    @extend .loading-bg
    right 0
  &.loaded
    z-index -1000
    .loading-left-bg
      transition all 1.0s
      transform translate(-100%, 0)
    .loading-right-bg
      transition all 1.0s
      transform translate(100%, 0)
#loading-box
  position fixed
  z-index 1000
  display -webkit-box
  display flex
  -webkit-box-align center
  align-items center
  -webkit-box-pack center
  justify-content center
  -webkit-box-orient vertical
  -webkit-box-direction normal
  flex-direction column
  flex-wrap wrap
  width 100vw
  height 100vh
  overflow hidden

  .load-image
    position fixed
    z-index 1001
    display flex

  &.loaded
    .load-image
      display none

加载动画背景色的自定义配置项：

修改[Blog]\themes\butterfly\source\css\var.styl,大概第98行处：

1
2
3
4
// preloader
//$preloader-bg = #37474f  //注释掉该行
//添加如下，不生效的话可以修改[blog]\themes\butterfly\source\css\_load_style\gear.styl中的box-shadow 0px 0px 0px 1000px rgba(0, 0, 0, 0.67)中前面的rgba值
$preloader-bg = hexo-config('preloader.enable') && hexo-config('preloader.load_color') ? convert(hexo-config('preloader.load_color')) : #37474f

修改_config.butterfly.yml

修改[Blog]\_config.butterfly.yml 的 preloader 配置项如下：

1
2
3
4
5
6
7
8
9
10
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 3 # 1 default | 2 pace | 3 shink | 4 gear | 5 ironheart | 6 wizard | 7 image:need image url.
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:  # 启用 source: 2 ，为非全屏加载胶囊，需要添加此css_url才行。如已魔改加了后文的加载胶囊（全局生效），此source: 2 不需使用避免冲突。
  load_image:  # url for source: 7
  load_color:  # '#37474f'  '#000000'

【配置项参数说明】：

  1. enable：控制加载动画的开关，取值有true和false，true开启，false关闭。
  2. load_color：该配置项为自定义加载动画背景颜色。默认值为#37474f,使用时注意用单引号’’包起来，不然会被识别成注释符。这个配置项最大的作用是配合load_image使用的图片的背景色，可以用取色器提取自定义图片的主要色调，以达到图片和背景融为一体的效果。
  3. source: 控制加载动画的样式：

default是主题原版的盒子加载动画：

pace是加载胶囊

Heo 同款 loading 动画

gear是旋转齿轮加载动画

ironheart是钢铁侠核心加载动画：

wizard是巫师施法加载动画：

image为自定义添加静态图片或gif作为加载动画。

  1. load_image：该配置项的生效前提是source:设置为6,内容填写图床链接或者本地相对地址。

gear加载动画魔改

  • 这个动画跟本站主题色挺配的，但是中间有个洞美观性下降了点，于是打算用头像填充一下下，并改颜色为黑色半透明适配一下黑暗模式，不然晚上太晃眼了

修改gear.pug文件

修改[Blog]\themes\butterfly\layout\includes\loading\gear.pug代码，添加.gear-loader_avater

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#loading-box
  .gear-loader
    .gear-loader_overlay
    //添加如下
    .gear-loader_avater
    //
    .gear-loader_cogs
      .gear-loader_cogs__top
        .gear-top_part
        .gear-top_part
        .gear-top_part
        .gear-top_hole
      .gear-loader_cogs__left
        .gear-left_part
        .gear-left_part
        .gear-left_part
        .gear-left_hole
      .gear-loader_cogs__bottom
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_hole

script.
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

修改gear.style

修改[Blog]\themes\butterfly\source\css\_load_style\gear.styl添加如下注释处代码(渲染有报错就把注释去掉)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
#loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  text-align center
  &.loaded
    z-index -1000
    .gear-loader
      display none
  .gear-loader
    height 100%
    position relative
    margin auto
    width 400px
  .gear-loader_overlay
    width 100px /*空洞大小与头像大小适配*/
    height 100px /*空洞大小与头像大小适配*/
    background transparent
    box-shadow 0px 0px 0px 1000px rgba(0, 0, 0, 0.67),/*背景颜色*/ 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset 
    border-radius 100%
    z-index -1
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  /*添加如下头像代码*/
  .gear-loader_avater
    width 100px
    height 100px
    background: url(/img/loader-avatar.webp) center no-repeat /*头像链接，建议该头像大小不超过8kb，尺寸100x100就行*/
    background-color: rgba(0, 0, 0, 0.67)
    background-size: 100%
    border-radius 100%
    border: 1px solid black
    z-index 0
    left 0
    right 0
    top 0
    bottom 0
    margin auto
    position absolute
  /**/
  .gear-loader_cogs
    z-index -2
    width 100px
    height 100px
    top -120px !important
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs__top
    position relative
    width 100px
    height 100px
    transform-origin 50px 50px
    -webkit-animation rotate 10s infinite linear
    animation rotate 10s infinite linear
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-top_part
        width 100px
        border-radius 10px
        position absolute
        height 100px
        background #f98db9
      &.gear-top_hole
        width 50px
        height 50px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__left
    position relative
    width 80px
    transform rotate(16deg)
    top 28px
    transform-origin 40px 40px
    animation rotate_left 10s 0.1s infinite reverse linear
    left -24px
    height 80px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-left_part
        width 80px
        border-radius 6px
        position absolute
        height 80px
        background #97ddff
      &.gear-left_hole
        width 40px
        height 40px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__bottom
    position relative
    width 60px
    top -65px
    transform-origin 30px 30px
    -webkit-animation rotate_left 10.2s 0.4s infinite linear
    animation rotate_left 10.2s 0.4s infinite linear
    transform rotate(4deg)
    left 79px
    height 60px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-bottom_part
        width 60px
        border-radius 5px
        position absolute
        height 60px
        background #ffcd66
      &.gear-bottom_hole
        width 30px
        height 30px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto

/* Animations */
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}
  • 大功告成！

补充内容

  添加了加载动画以后可能出现动画加载了半天，但是却进不了站，这点主要是因为加载动画的关闭与否是与网站加载状态的load的返回值决定的，而网站加载完成与否这个概念是很暧昧的，如果加装了pwa，清空缓存后再次加载的内容可能比想象的要多。

  • 以下提供两种方案，一个超时自动结束，一个手动点击结束。两者兼容，你可以同时使用达到多重保险。
  • 可以给加载动画设置一个settimeout()的函数来达到伪·加载完毕的效果，即超时了自动关闭加载动画，即使页面还在加载。
  • 得益于加载动画使用的是原生js，所以可以给script添加async属性实现异步加载，以免阻塞后续HTML渲染。
  • 仅仅需要给控制加载动画开关的loading-js.pug添加两行代码即可
  • 例如使用的是gear动画，那么修改[Blog]\themes\butterfly\layout\includes\loading\gear.pug文件删减添加-+处提示的代码即可：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    - script.
    + script(async).
       const preloader = {
         endLoading: () => {
           document.body.style.overflow = 'auto';
           document.getElementById('loading-box').classList.add("loaded")
         },
         initLoading: () => {
           document.body.style.overflow = '';
           document.getElementById('loading-box').classList.remove("loaded")

         }
       }
       window.addEventListener('load',()=> { preloader.endLoading() })
    +  setTimeout(function(){preloader.endLoading();}, 6000)
    其中6000的单位是ms，代表你设置的最大容忍时间。可以自行修改。
    这样一来，如果网站在六秒内加载完成，则优先执行window.addEventListener(‘load’,()=> {preloader.endLoading()}),如果超过6秒，则执行 setTimeout(function(){preloader.endLoading();}, 6000);,两者互不干扰。妙哉。
  • 给整个loading-box添加一个点击动作，点击动画就能结束。
  • 例如使用的是gear动画，那么同样修改[Blog]\themes\butterfly\layout\includes\loading\gear.pug文件删减添加-+处提示的代码即可：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    -   script.
    +   script(async).
          var preloader = {
            endLoading: () => {
              document.body.style.overflow = 'auto';
              document.getElementById('loading-box').classList.add("loaded")
            },
            initLoading: () => {
              document.body.style.overflow = '';
              document.getElementById('loading-box').classList.remove("loaded")

            }
          }
          window.addEventListener('load',()=> {preloader.endLoading()})
    +     document.getElementById('loading-box').addEventListener('click',()=> {preloader.endLoading()})

使用Gulp压缩静态资源

Gulp压缩静态资源减小网站文件大小以帮助加快网站访问速度。
参考文章：使用gulp压缩博客静态资源，本站采用压缩js、css、html的方法。

安装Gulp插件：

在博客根目录[Blog]打开终端，输入：
旧版本 HEXO 的安装：

1
2
npm install --global gulp-cli #全局安装gulp指令集 
npm install gulp --save #安装gulp插件。

新版本 HEXO（5.x） 安装：

1
2
npm install gulp-cli -g
npm install gulp -D

安装下属插件

安装下属插件以实现对各类静态资源的压缩:

  • 压缩HTML：
    1
    2
    3
    npm install gulp-htmlclean --save-dev
    npm install gulp-html-minifier-terser --save-dev
    # 用gulp-html-minifier-terser可以压缩HTML中的ES6语法
  • 压缩CSS：
    1
    npm install gulp-clean-css --save-dev
  • 压缩js（该本版不对某些浏览器进行适配。ps: IE你走开！）:
    1
    npm install gulp-terser --save-dev

为Gulp创建任务脚本。

在博客根目录[Blog]下新建gulpfile.js,打开[Blog]\gulpfile.js,输入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
//用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var fontmin = require('gulp-fontmin');
// gulp-tester
var terser = require('gulp-terser');
// 压缩js
gulp.task('compress', async() =>{
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js']) //要压缩的js文件所在public里的目录，不对头自行调整，要忽略某些文件在前面可以添加！，例如不压缩tw_cn.js：
    .pipe(terser())                                       // gulp.src(['./public/**/*.js', '!./public/**/*.min.js', '!./public/**/tw_cn.js'])
    .pipe(gulp.dest('./public'))
});
//压缩css
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css'])
        .pipe(cleanCSS({
            compatibility: 'ie11'
        }))
        .pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', () => {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true, //清除html注释
            collapseWhitespace: true, //压缩html
            collapseBooleanAttributes: true,
            //省略布尔属性的值，例如：<input checked="true"/> ==> <input />
            removeEmptyAttributes: true,
            //删除所有空格作属性值，例如：<input id="" /> ==> <input />
            removeScriptTypeAttributes: true,
            //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,
            //删除<style>和<link>的 type="text/css"
            minifyJS: true, //压缩页面 JS
            minifyCSS: true, //压缩页面 CSS
            minifyURLs: true  //压缩页面URL
        }))
        .pipe(gulp.dest('./public'))
});
//压缩字体
function minifyFont(text, cb) {
  gulp
    .src('./public/fonts/*.ttf') //原字体所在目录
    .pipe(fontmin({
      text: text
    }))
    .pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
    .on('end', cb);
}

gulp.task('mini-font', (cb) => {
  var buffers = [];
  gulp
    .src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
    .on('data', function(file) {
      buffers.push(file.contents);
    })
    .on('end', function() {
      var text = Buffer.concat(buffers).toString('utf-8');
      minifyFont(text, cb);
    });
});
// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html','mini-font'
))

使用命令

每次运行完hexo generate生成静态页面后，运行gulp进行压缩：

1
2
3
4
hexo clean
hexo generate
gulp
hexo server 或 hexo deploy

站长验证修复

站长验证标签通过原有的_config.butterfly.yml进行添加可能不生效，接下来进行修复：

  1. 修改[blog]\themes\butterfly\layout\includes\head\site_verification.pug替换代码如下：
    1
    2
    3
    if theme.site_verification.enable === true
      each item in theme.site_verification.item
        meta(name=item.name content=item.content)
  2. 找到并修改_config.butterfly.yml中原来的站长验证项为如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # Verification (站长验证)
    # --------------------------------------
    site_verification:
      enable: true
      item:
        - name: xxxx
          content: xxxxxxxxxxxxxx
      # - name: google-site-verification
      #   content: xxxxxx
      # - name: baidu-site-verification
      #   content: xxxxxxx
    从各搜索引擎站长管理平台拿到的meta标签代码，添加相应的name值和content值到_config.butterfly.yml即可

自定义字体样式

引入字体

ps:本站字体样式移植于yilia主题，可以直接照抄
下载字体文件放入新建的[blog]\themes\butterfly\source\fonts\文件夹内：
本站所用字体打包：下载链接
在引入的自定义css文件(魔改配置章节)[blog]\themes\butterfly\source\css\custom.css中添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
/*引入字体*/
@font-face {
    font-family: iconfont;
    src: url(./fonts/iconfont.b322fa.eot);
    src: url(./fonts/iconfont.b322fa.eot#iefix) format("embedded-opentype"), 
	  url(./fonts/iconfont.8c627f.woff) format("woff"), 
	  url(./fonts/iconfont.16acc2.ttf) format("truetype"), 
	  url(./fonts/default-skin.b257fa.svg#iconfont) format("svg"), 
	  url(./fonts/tooltip.4004ff.svg#iconfont) format("svg"), 
	  url(./fonts/iconfont.45d7ee.svg#iconfont) format("svg");
}

设置字体

在引入的自定义css文件[blog]\themes\butterfly\source\css\custom.css中继续添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/*设置全局字体*/
body {
		font-family: lucida grande, lucida sans unicode, lucida, helvetica, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Helvetica Neue, STHeiTi, Arial, sans-serif;
		line-height: 1.6;
		font-size: 14px;
		min-height: 100%;
		margin: 0;
}
/*正文字体*/
#article-container p {
		font-family: lucida grande, lucida sans unicode, lucida, helvetica, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Helvetica Neue, STHeiTi, Arial, sans-serif; 
		/*Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;*/
		padding: 1px 3px;
		margin: 0 3px 1.75em;
		margin-top: 10px;
		font-size: 15px;
}

/*各级标题设置不同样式*/
#article-container h1 {
		font-size: 20px;
		font-size: 1.35rem;
		line-height: 1.25;
		margin-top: 30px;
		margin-top: 2em;
		margin-bottom: 1em
}

#article-container h2 {
		font-size: 17px;
		font-size: 1.2375rem;
		line-height: 1.2173913043;
		margin-top: 20px;
		font-weight: 300;
		padding-bottom: 5px;
		margin-top: 2.4347826087em;
		margin-bottom: 1.1173913043em;
		border-bottom: 1px solid #aaa;/*文字底边横线*/
}

#article-container h3 {
		font-size: 14px;
		font-size: 1.1875rem;
		margin-top: 20px;
		font-weight: 300;
		padding-bottom: 5px;
		line-height: 1.1052631579; 
		margin-top: 2.9473684211em;
		margin-bottom: 1.1736842105em;
		border-bottom: 1px solid #ddd; /*文字底边横线浅色*/
		font-style: italic; /*设置第三级标题斜体*/
}

#article-container h4,
#article-container h5,
#article-container h6 {
		font-size: 12px;
		font-size: 1rem;
		margin-top: 20px;
		font-weight: 300;
		padding-bottom: 5px;
		line-height: 1.3125;
		margin-top: 3.5em;
		margin-bottom: 1.75em;
}

#article-container h4 {
		letter-spacing: .140625em;
		text-transform: uppercase;
}

.article-container h6 {
		font-style: italic;
}

#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6 {
		font-weight: 900  /*字体粗细*/
}

/*文章标题字体*/
.post-title {
		font-family: STHeiTi;
}

/*文章版权信息字体*/
.author-info__name {
		font-family: Roboto, serif;
}

.sticky_layout {  /*侧边卡字体*/
		font-family: lucida grande, lucida sans unicode, lucida, helvetica, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Helvetica Neue, STHeiTi, Arial;
}

/*页脚字体*/
#footer {
		font-size: 12px;
		font-family: lucida grande, lucida sans unicode, lucida, Arial, sans-serif;
}

/*代码 字体*/
#article-container pre {
		padding: 1px 3px;
		margin: 0 3px;
		font-family: Roboto, serif, Menlo, Monaco,"Andale Mono","lucida console","Courier New", monospace !important;
		font-size: 14px;
}

/* 文章版权链接去掉下划线 */
#post .post-copyright .post-copyright-info a {
		text-decoration: none;
}

butterfly代码框添加FiraCode字体

具体请查看：butterfly主题代码添加【Fira Code】字体效果

bannar波浪特效

请看文章波浪特效添加到butterfly主题Bannar

Butterfly右下角悬浮菜单栏

添加直达底部按钮

修改[blog]\themes\butterfly\layout\includes\rightside.pug添加如下代码即可：

1
2
3
4
5
button#go-up(type="button" title=_p("rightside.back_to_top"))
  i.fas.fa-arrow-up
//-添加如下    
button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
  i.fas.fa-arrow-down

添加阅读百分比

参考文章返回顶部显示网页阅读进度 | Leonus

  1. 修改[blog]\themes\butterfly\layout\includes\rightside.pug添加如下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    button#go-up(type="button" title=_p("rightside.back_to_top"))

      span.scroll-percent //-如butterfly为4.9.0+，则注释掉这一行

      i.fas.fa-arrow-up
      //-添加如下两行
      span#percent 0
        span %
      //-
    button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
      i.fas.fa-arrow-down
  2. 添加js代码
    在引入的自定义js文件中加入如下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    window.onscroll = percent;// 执行函数
    // 页面百分比
    function percent() {
        let a = document.documentElement.scrollTop || window.pageYOffset, // 卷去高度
            b = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight, // 整个网页高度
            result = Math.round(a / b * 100), // 计算百分比
            up = document.querySelector("#go-up") // 获取按钮

        if (result <= 95) {
            up.childNodes[0].style.display = 'none'
            up.childNodes[1].style.display = 'block'
            up.childNodes[1].innerHTML = result;
        } else {
            up.childNodes[1].style.display = 'none'
            up.childNodes[0].style.display = 'block'
        }
    }
  3. 添加css代码
    在引入的自定义css文件中添加如下代码（可以根据需求进行调整）：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    /* 返回顶部 */
    button#go-up #percent {
        display: none;
        font-weight: bold;
        font-size: 15px !important;
    }
    button#go-up span {
        font-size: 12px!important;
        margin-right: -1px;
    }

    /* 鼠标滑动到按钮上时显示返回顶部图标 */
    button#go-up:hover i {
        display: block !important;
    }
    button#go-up:hover #percent {
        display: none !important;
    }
    #rightside>div>a,
    #rightside>div>button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

标签添加文章数上标

参考：Butterfly 标签云增加文章数上下标 | Eurkon

  • 修改[blog]\themes\butterfly\scripts\helpers\page.js如下(+-处)代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    hexo.extend.helper.register('cloudTags', function (options = {}) {
      const theme = hexo.theme.config
      const env = this
      let source = options.source
      const minfontsize = options.minfontsize
      const maxfontsize = options.maxfontsize
      const limit = options.limit
      const unit = options.unit || 'px'

      let result = ''
      if (limit > 0) {
        source = source.limit(limit)
      }

      const sizes = []
      source.sort('length').forEach(tag => {
        const { length } = tag
        if (sizes.includes(length)) return
        sizes.push(length)
      })

      const length = sizes.length - 1
      source.forEach(tag => {
        const ratio = length ? sizes.indexOf(tag.length) / length : 0
        const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
        let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
        const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
        style += ` color: ${color}`
    -   result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
    +   result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`
      })
      return result
    })

首页分类磁贴

参考：Categories Magnet | Akilar

  1. 修改[Blog]\themes\butterfly\layout\index.pug如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    extends includes/layout.pug

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

  2. 新建[Blog]\themes\butterfly\source\css\_layout\categoryBar.styl：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    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

  3. 在[Blog]\_config.butterfly.yml添加配置项：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    categoryBar:
      enable: true
      column: odd # 显示列数,odd：3列 | even：4列
      row: 2 #显示行数，默认两行，超过行数切换为滚动显示
      descr:
        - 博客搭建
        - butterfly魔改
        - 医学科普
        - 医学笔记
        - 数码
        - 软件
      cover:
        - url(/img/custom/cover/cha06.webp) #url('https://assets.akilar.top/image/cover1.webp')
        - url(/img/custom/cover/cha08.webp) #'#abcdef' # HEX格式色值需要用''包裹，不然会被识别成注释
        - url(/img/custom/cover/cha03.webp) #rgba(45,67,89,0.7)
        - url(/img/custom/cover/cha04.webp) #linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(200,16 , 16, 0) 100%)
        - url(/img/custom/cover/cha01.webp)
        - url(/img/custom/cover/cha02.webp)

Butterfly主题添加特殊日子全局黑白模式

请看文章Butterfly主题添加特殊日子全局黑白模式

Butterfly添加顶部加载进度条

  • PS: 为你的Butterfly添加顶部加载进度条
  • 引入 css：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    .pace {
      pointer-events: none;
      user-select: none;
      z-index: 2;
      position: fixed;
      margin: auto;
      top: 4px;
      left: 0;
      right: 0;
      height: 8px;
      border-radius: 8px;
      width: 6rem;
      background: #eaecf2;
      overflow: hidden;
    }

    .pace-inactive .pace-progress {
      opacity: 0;
      transition: 0.3s ease-in;
    }

    .pace.pace-inactive {
      opacity: 0;
      transition: 0.3s;
      top: -8px;
    }

    .pace .pace-progress {
      box-sizing: border-box;
      transform: translate3d(0, 0, 0);
      position: fixed;
      z-index: 2;
      display: block;
      position: absolute;
      top: 0;
      right: 100%;
      height: 100%;
      width: 100%;
      background: #49b1f5;
      background: linear-gradient(
        to right,
        rgb(18, 194, 233),
        rgb(196, 113, 237),
        rgb(246, 79, 89)
      );
      animation: gradient 2s ease infinite;
      background-size: 200%;
    }
  • 引入js:
    1
    <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>

banIE

Fork: Ariasaka | 博客魔改日记(2)

  • 新建[blogRoot]/source/noIE.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    <!-- 叔叔老家那里扒的qwq -->
    <!DOCTYPE html>
    <meta charset="utf-8">
    <center style="padding-top:20px">很抱歉IE已经停止支持，因此本博客不再支持IE浏览器，如果想要正常浏览，请换用新版Edge或Chrome、Firefox、Opera等现代浏览器</center>

    <html lang="en"><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="spm_prefix" content="888.7521">
        <title>浏览器升级提示 | Ariasakaの小窝</title>
        <link href="https://at.alicdn.com/t/font_1454899_pqhvobved2o.css" rel="stylesheet" type="text/css">
        <style>
          * { padding: 0; margin: 0; box-sizing: border-box;}
          ul, li { list-style: none; }
          a:hover {text-decoration:none;}
          ins,a {text-decoration:none;}
          a:focus,*:focus {outline:none;}
      
          .b-content { width: 400px; margin: 60px auto; font-size: 14px; color: #999; }
          .pic-box { padding-bottom: 20px; border-bottom: 1px solid #eee; }
          .pic-box img { max-width:  100%; margin-bottom: 10px; }
          .pic-box p { line-height: 20px; font-size: 12px;}
          .text-box .title {text-align: center; margin: 30px 0;}
          .text-box .list {height: 90px;}
          .text-box .list li a { float: left; width: 100px; text-align: center; line-height: 24px; color: #666;}
          .text-box .list li .iconfont{ font-size: 30px; }
          .text-box .list li a span{ font-size: 12px; color: #999; }
          .copyright {margin-top: 20px; text-align: center;}
        </style>
      </head>
      <body>
        <div class="b-content">
          <div class="text-box">
            <div class="title">以下四款官方正版浏览器任君挑选</div>
            <div class="list">
              <ul>
                <li>
                  <a href="https://www.google.cn/intl/zh-CN/chrome" target="_blank">
                    <i class="iconfont icon-chrome"></i><br>
                    Chrome<br>
                    <span>谷歌</span>
                  </a>
                </li>
                <li>
                  <a href="https://www.mozilla.org/zh-CN/firefox/new" target="_blank">
                    <i class="iconfont icon-firefox"></i><br>
                    Firefox<br>
                    <span>火狐</span>
                  </a>
                </li>
                <li>
                  <a href="https://www.microsoft.com/edge" target="_blank">
                    <i class="iconfont icon-edge"></i><br>
                    Edge（新版）<br>
                    <span>微软</span>
                  </a>
                </li>
                <li>
                  <a href="https://www.opera.com/zh-cn" target="_blank">
                    <i class="iconfont icon-opera"></i><br>
                    Opera<br>
                    <span>欧朋</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      
      </body></html>

  • 跳过渲染，修改[blogRoot]/source/noIE.html在其开头添加：

    1
    2
    3
    ---
    layout: false
    ---

  • 新建noie_banIE.js并引用：

    1
    2
    3
    if(!!window.ActiveXObject || "ActiveXObject" in window){
        window.location.href="./noIE.html";
    }

页脚添加GitHub样式徽标

更多细节See: Akilar | Add Github Badge

  1. 修改[Blogroot]\themes\butterfly\layout\includes\footer.pug,添加页脚标签循环节：
    注意对齐
    1
    2
    3
    4
    5
    6
    7
    8
        if theme.footer.custom_text
          .footer_custom_text!=`${theme.footer.custom_text}`
        //v3.4.0以下版本可能还有ICP的配置项。此处只要保证p和上方的if缩进平级就好。
    +   p#ghbdages
    +     if theme.ghbdage.enable
    +       each item in theme.ghbdage.bdageitem
    +         a.github-badge(target='_blank' href=url_for(item.link)  style='margin-inline:5px')
    +           img(src=url_for(item.shields) title=item.message)
  2. 在[Blogroot]_config.butterfly.yml中添加相关配置项：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    ghbdage:
      enable: true
      bdageitem:
        - link: https://hexo.io/  # 标签跳转链接
          shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #shields的API链接，填法参考本篇教程
          message: 博客框架为Hexo_v5.3.0 #鼠标悬停时显示的信息
        - link: https://butterfly.js.org/
          shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
          message: 主题版本Butterfly_v3.4.2
        - link: https://www.jsdelivr.com/
          shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
          message: 本站使用JsDelivr为静态资源提供CDN加速
        - link: https://vercel.com/
          shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
          message: 本站采用双线部署，默认线路托管于Vercel
        - link: https://vercel.com/
          shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
          message: 本站采用双线部署，联通线路托管于Coding
        - link: https://github.com/
          shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
          message: 本站项目由Github托管
        - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
          shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
          message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可

添加RSS订阅

更多详情看项目主页：hexo-generator-feed

安装feed模块：

1
npm install hexo-generator-feed --save

配置文件[blog]\_config.yml添加配置（按需修改）：

1
2
3
4
5
6
7
8
9
10
11
12
13
feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

配置文件[blog]\_config.butterfly.yml添加menu项配置：

1
2
3
menu:

  RSS订阅: /atom.xml || fas fa-rss #添加效果自行调整

待续