本篇内容主要源于：

安装

在你的博客根目录下载主题并安装依赖：

1
2
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save

然后在theme目录可以找到新的butterfly主题（默认主题landscape其实可以删掉了）

在_config.yml中更改主题为butterfly

1
theme: butterfly

测试，可以看见新主题已安装

官方配置

在\themes\butterfly中找到主题配置文件_config.yml，复制一个副本出来，重命名为_config.butterfly.yml

在把它剪贴到博客根目录，就跟_config.landscape.yml的格式一样

Hexo 中，根目录下的_config.butterfly.yml会比\themes\butterfly\_config.yml的优先级更高，这样做是为了避免在将来更新主题时，把已经配置好的配置文件一并覆盖了

注意，不要弄混博客配置文件（_config.yml）和主题配置文件（_config.butterfly.yml）

打开_config.butterfly.yml

这个主题很强大，所以配置文件也很长，接近1000行（所以请善用搜索功能）

但不用担心，作者每个部分都用分割线分好了，非常规整，而且很多地方都有中文注释（大佬 Jerry 是香港同胞！）

下面挑重点讲，并附上我自己的配置

如上图所示，首页的导航菜单可以指向各子页面（那个搜索不在这里设置，下面会讲），先讲解子页面如何创建

新建页面

下面的内容简化于 Butterfly 安裝文檔(二) 主題頁面

在soure中的每一个文件夹，就对应一个页面（当然_posts和_draft除外）

使用hexo new page <title>来新建页面，例：

1
hexo new page about

打开source/about/index.md，就可以像我一样编辑关于页面了

关于、留言板、todo-list之类的属于普通页面，但归档、标签、分类属于特殊页面

归档页面（archives）是内建的，不需要创建

标签页面（tag）在创建后，需要在表头加上type: "tags"和layout: "tags"，而内容留空：

1
2
3
4
5
6
---
title: 标签
date: 2022-02-05 18:29:52
type: "tags"
layout: "tags"
---

分类页面（categories）同理：

1
2
3
4
5
6
---
title: 分类
date: 2022-02-05 18:30:37
type: "categories"
layout: "categories"
---

至此，几个页面创建完毕，下面需要修改配置文件

修改配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
# Main menu navigation (導航目錄)
# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單
# --------------------------------------

menu:
  首页: / || fas fa-home
  文章||fas fa-book:
    归档: /archives/ || fas fa-archive
    标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fa-folder-open
    ToDo: /todo/ || fas fa-list-alt
  留言板: /contact/ || fas fa-comments
  关于: /about/ || fas fa-heart

格式：

1
2
3
4
{页面名称}: {路径} || fas fa-{图标名称}
{二级菜单名称}||fas fa-{图标名称}:
  {二级页面名称}: {路径} || fas fa-{图标名称}
 ...

图标用的是 Font Awesome 的

注意：因为 JsDelivrCND 在国内寄了，故这些图标是在国内是没法正常显示的，需要在主题配置文件的最底下把 CDN 全部改成本地

1
2
3
4
5
6
7
8
9
10
11
12
# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
  # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
  # option: local/jsdelivr
  # Dev version cannot choose jsdelivr (dev版的主題不能設置為 jsdelivr)
  internal_provider: local
  # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
  # option: local/jsdelivr
  # when set it to local, you need to install hexo-butterfly-extjs
  third_party_provider: local

image-20220618214441155

并且按照提示还要安装 hexo-butterfly-extjs 包

1
npm install hexo-butterfly-extjs

提示：如果你没有两个 local ，请升级主题版本

VSearch (搜索)

如果配置完后无法正常使用，请尝试运行hexo clean

先安装依赖

1
npm install hexo-generator-search --save

修改配置文件，启用下面的local_search就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
# search (搜索)
# --------------------------------------

# Algolia search
algolia_search:
  enable: false
  hits:
    per_page: 6

# Local search
local_search:
  enable: true

导航菜单的搜索按钮已可以使用

Image (图片设置)

设置头像和各种背景，注释可以说是非常详尽了

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
# Image (圖片設置)
# --------------------------------------

# Favicon（網站圖標）
favicon: /img/favicon.png

# Avatar (頭像)
avatar:
  img: /img/favicon.jpg
  effect: false

# Disable all banner image
disable_top_img: false

# The banner image of home page
index_img: https://image.nickxu.me/202202230023824.jpg

# If the banner of page not setting, it will show the top_img
default_top_img: https://image.nickxu.me/202202230023069.jpg

# The banner image of archive page
archive_img: https://image.nickxu.me/202202230023069.jpg

# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img: https://image.nickxu.me/202202230023069.jpg

# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img:

# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img: https://image.nickxu.me/202202230023069.jpg

# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:

cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: false
  aside_enable: false
  archives_enable: false
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover: https://image.nickxu.me/202202230023069.jpg


# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

# A simple 404 page
error_404:
  enable: false
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: false # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

Background effects (背景特效)

这里算是官方美化了，项目有很多，我只设置了几个

静止彩带背景

1
2
3
4
5
6
7
8
9
# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true
  mobile: false

默认暗黑模式

1
2
3
# Default display mode (網站默認的顯示模式)
# light (default) / dark
display_mode: dark

首页循环打字

这个要往下翻，找到subtitle

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
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體） https://api.btstu.cn/
  # source: 2  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 3  調用一句網（簡體） http://yijuzhan.com/
  # source: 4  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 今日事&#44;今日毕
    - Never put off till tomorrow what you can do today
    - 折腾就是快乐
    - Suffering is happiness
    - 人之忌&#44;在好为人师
    - The taboo of a person is liking to be others teacher

个人美化

本节内容源于 Hexo+Butterfly主题美化 | 唐先森の博客，墙裂建议阅读原文

新建文件

现在需要添加自己的 css 和 js 文件来美化

在themes\butterfly\source\js中创建my.js，在themes\butterfly\source\css中创建my.styl（styl编译之后就成了css）

以后自己的js和css就统一加在这里了

引用文件

回到主题配置文件，搜索找到下方的片段，加上自己的文件链接

1
2
3
4
5
6
7
8
9
10
11
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
      - <link rel="stylesheet" href="/css/my.css">
  bottom:
    # - <script src="xxxx"></script>
      - <script data-pjax defer src="/js/my.js"></script>

我的配置

下面是我的配置，上面的原文里可以找到更多美化代码

my.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
//  主页面气泡

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

$(function() {

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

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

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

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

            function f() {
                var t = this;

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

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


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

my.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
// ----我添加的----
// 修改字体 -------------------------------------------------------
@font-face {
    font-family: 'tzy';
    /* 字体名自定义即可 */
    src: url('https://image.nickxu.me/ZhuZiAWan.woff2');
    /* 字体文件路径 */
    font-display: swap;
}

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

// 局部优化 -------------------------------------------------------

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

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

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

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

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

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

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

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

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

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

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

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

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

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