1.Twikoo评论系统

查看教程

参考文章：Twikoo | 一个简洁、安全、免费的静态网站评论系统

云函数使用Vercel部署，目前评论系统需要科学上网才能使用。

目前已能正常使用，感谢牢饭的域名。

昵称栏输入QQ号后可自动读取头像、昵称、QQ邮箱。

有时间把具体实现过程补上。

2.增加统计图表

查看教程

最后更新时间：2024-12-19

参考文章：使用Charts插件给Butterfly增加统计图表 | Guo Le's Blog

具体实现效果可参照本博客。

安装插件：

1
npm install hexo-butterfly-charts --save

将下面配置内容写入主题配置文件_config.butterfly.yml中，具体内容可根据自身需求修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 统计图表，支持发布文章统计、发布日历、Top标签统计、分类统计、分类雷达。
# see https://www.npmjs.com/package/hexo-butterfly-charts
charts:
  enable: true # 是否启用功能
  postsChart:
    title: 文章发布统计 # 设置文章发布统计的标题，默认为空
    interval: 1 # 横坐标间隔
  tagsChart:
    title: Top 10 标签统计 # 设置标签统计的标题，默认为空
    interval: 1 # 横坐标间隔
  postsCalendar_title: 文章发布日历 # 设置发布日历的标题，默认为空
  categoriesChart_title: # 设置分类统计的标题，默认为空
  categoriesRadar_title: # 设置分类雷达的标题，默认为空
  echarts_CDN: https://lib.baomitu.com/echarts/4.7.0/echarts.min.js

将发布日历添加到 归档 页面

点击查看详情

安装插件后，在/Butterfly/layout/archive.pug文件中，#archive下面添加一行#posts-calendar.js-pjax, 新添加的比上一行多缩进两个空格。

修改后如下：

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

block content
  include ./includes/mixins/article-sort.pug
  #archive
    #posts-calendar.js-pjax
    .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
    +articleSort(page.posts)
    include includes/pagination.pug

其他页面，只需md文件中插入这个标签：

1
<div id="posts-calendar" class="js-pjax"></div>

将 发布统计 添加到 归档 页面

点击查看详情

安装插件后，在/Butterfly/layout/archive.pug文件中，#archive下面添加一行#posts-chart.js-pjax, 新添加的比上一行多缩进两个空格。

修改后如下：

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

block content
  include ./includes/mixins/article-sort.pug
  #archive
    #posts-chart.js-pjax
    .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
    +articleSort(page.posts)
    include includes/pagination.pug

其他页面，只需md文件中插入这个标签：

1
<div id="posts-chart" class="js-pjax"></div>

个人感觉不好看，删了。

将 标签统计 插入到 标签 页面

点击查看详情

编辑主题目录/Butterfly/layout/includes/page/tags.pug文件，在开头添加一行#tags-chart(data-length = "10").js-pjax，data-length = "10"表示显示 Top 10 的标签。

修改后如下：

1
2
3
4
5
6
7
#tags-chart(data-length = "10").js-pjax
.tag-cloud-title.is-center= _p('page.tag')
  |  - 
  span.tag-cloud-amount= site.tags.length
.tag-cloud-list.is-center
  !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})

其他页面，只需md文件中插入这个标签：

1
2
<!-- "data-length" = how many tags to show, default 10 -->
<div id="tags-chart" data-length="10" class="js-pjax"></div>

将 分类统计（无标题）和 分类雷达图（无标题） 添加到 分类 页面。

点击查看详情

编辑主题目录/Butterfly/layout/includes/page/categories.pug文件，在第5行添加#categories-chart.js-pjax和#categories-radar.js-pjax。

修改后如下：

1
2
3
4
5
6
7
8
.category-lists
  .category-title.is-center= _p('page.category')
    |  - 
    span.category-amount= site.categories.length
  #categories-chart.js-pjax
  #categories-radar.js-pjax
  div!= list_categories()

其他页面，只需md文件中插入这个标签：

分类统计（无标题）

1
<div id="categories-chart" class="js-pjax"></div>

分类雷达图（无标题）

1
<div id="categories-radar" class="js-pjax"></div>

3.安知鱼波浪

查看教程

最后更新时间：2024-12-21

参考文章：butterfly文章顶部添加波浪效果 | 安知鱼 (anheyu.com)

具体实现效果可参照本博客文章页面。

修改 themes/butterfly/layout/includes/header/index.pug 大概第 33 行左右

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if top_img !== false
  if is_post()
    include ./post-info.pug
+   section.main-hero-waves-area.waves-area
+     svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
+       defs
+         path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
+       g.parallax
+         use(href='#gentle-wave', x='48', y='0')
+         use(href='#gentle-wave', x='48', y='3')
+         use(href='#gentle-wave', x='48', y='5')
+         use(href='#gentle-wave', x='48', y='7')
    #post-top-cover
      img#post-top-bg(class='nolazyload' src=bg_img)
  else if is_home()
    #site-info
      h1#site-title=site_title
      if theme.subtitle.enable

＋号部分为需要添加的内容，将 + 号替换为空格，注意缩进。

然后在_config.butterfly.yml的 [inject.head] 或者自定义 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
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
/* 波浪css */
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
}
.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
}
/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #f7f9febd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}
/* 黑色模式背景 */
[data-theme="dark"] .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #18171dc8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #18171d80;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #18171d3e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #18171d;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}

这里 css 中fill属性可以控制波浪颜色，建议使其中一个颜色与背景颜色一致。

4.渐变色版权美化

查看教程

参考文章：（二创）Copyright-beautify | Akilarの糖果屋友链部分字体似乎被同步修改为蓝色，很丑...

5.友链样式功能升级

查看教程

参考文章：Friend Link Card Beautify | Akilarの糖果屋

就喜欢这种大开大合的删减！

注意部分模式需要额外添加缩略图，即添加一条名为siteshot的配置项。

有时间把具体实现过程搬过来，但是我不是很喜欢这个风格，后悔了，还不如直接用外挂标签的网站卡片来的好看。

6.导航栏魔改

查看教程

最后更新时间：2024-12-19

菜单居中

点击查看详情

参考文章：博客魔改教程总结(五) | Fomalhaut🥝

颜色修改

点击查看详情

custom.css 文件插入如下内容，渐变色导航栏。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 导航栏 */
#page-header.nav-fixed #nav {
    /*background: rgba(135,206,250, 0.75);*/
    background: linear-gradient(
            -45deg,
            #e8d8b9,
            #a3e9eb,
            #00BFFF
    );
    backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
    background: rgba(0, 0, 0, 0.7) !important;
}

这里的 backdrop-filter: var(--backdrop-filter);是博主前置修改内容，无法照搬，只把颜色修改部分搬过去就OK。

7.加载动画

查看教程

参考文章：Heo同款loading动画 | 安知鱼 (anheyu.com)

豪坎！

8.引入iconfont彩色图标

查看教程

参考文章：Butterfly进阶教程

9.首页轮播

查看教程

参考文章：Swiper Bar | Akilarの糖果屋

哎，差点意思。

10.hexo-magnet 插件

查看教程

参考文章：分类: 魔改教程 | Fomalhaut🥝](https://zfe.space/post/hexo-magnet.html)

挺可爱的。记得加入黑夜模式适配。

11.主题色修改

查看教程

Butterfly的主题色配置似乎存在bug，直接跑到 var.style 文件狠狠修改变量，简单粗暴。

12.樱花飘落特效

查看教程

最后更新时间：2024-12-19

使用方式

点击查看详情

在对应页面加入<script async src="https://npm.elemecdn.com/tzy-blog/lib/js/other/sakura.js"></script>。

或者在主题配置文件中全局引入：

1
2
3
4
inject:
  head:
  bottom:
    - <script async src="https://npm.elemecdn.com/tzy-blog/lib/js/other/sakura.js"></script>

挺好看的，就是看久了有点烦，全局引入还是算了。

想到了那句歌：

さくら さくら 会いたいよ

いやだ 君に今すぐ会いたいよ

好汀！

单页面引用时与 pjax 产生冲突时的解决方案

点击查看详情

我只在友链界面引入了樱花特效，但是由于我我开启了pjax，导致页面切换时樱花特效会一直保留，虽然我们可以手动刷新来清除，但是这样操作过于丑陋了，下面给出我自己的解决方案。

在source/js目录下新建sakura.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
function loadSakuraScript() {
    // 检查当前页面路径，决定是否加载樱花特效
    if (window.location.pathname === "/link/") { // 修改为实际路径
        setTimeout(() => {
            if (!document.querySelector("#sakuraScript")) {
                const script = document.createElement("script");
                script.id = "sakuraScript";
                script.src = "https://npm.elemecdn.com/tzy-blog/lib/js/other/sakura.js";
                script.async = true;
                document.body.appendChild(script);
                console.log("樱花脚本已加载");
            }
        }, 50); // 延迟 50ms
    }
}

function removeSakuraEffect() {
    // 查找可能的 DOM 元素
    const sakuraCanvas = document.querySelector("canvas");
    if (sakuraCanvas) {
        sakuraCanvas.remove(); // 移除特效 Canvas
        console.log("樱花 Canvas 已移除");
    }

    // 停止所有动画帧（全局强制停止）
    if (window.cancelAnimationFrame) {
        let id = window.requestAnimationFrame(() => {});
        while (id--) {
            cancelAnimationFrame(id);
        }
        console.log("所有动画帧已停止");
    }

    // 移除动态加载的脚本
    const script = document.querySelector("#sakuraScript");
    if (script) {
        script.remove();
        console.log("樱花脚本已移除");
    }
}

//  页面切换前清除樱花特效
document.addEventListener("pjax:send", removeSakuraEffect);

//  页面切换结束后进行检测
document.addEventListener("pjax:complete", loadSakuraScript);

// 页面初次加载或刷新时也要检测路径
document.addEventListener("DOMContentLoaded", loadSakuraScript);

然后在主题配置文件的inject部分引入改脚本即可：

1
2
3
4
5
inject:
  head:
  bottom:
    #  樱花特效
    - <script defer src="/js/sakura.js"></script>

该脚本的主要思路就是取消直接通过标签的方式引用特效（所以记得删除对应页面的特效标签，避免重复加载），通过自定义函数来实现，仅在需要启用特效的页面动态加载。在pjax回调中控制樱花特效的加载与清理，如果检测到页面切换，会在切换前清理掉樱花特效。当进入一个新的页面，会检查当前路径是否需要加载樱花特效。因此我们可以直接修改addEventListener（）函数来控制特效具体要加载在哪些界面。

嘻嘻，我真厉害。

13.字体修改

查看教程

参考文章：分类: 魔改教程 | Fomalhaut🥝

修改字体为霞鹜文楷，楷体真的满足了我对文字的一切美好幻想。

14.markdown渲染器升级

查看教程

最后更新时间：2024-12-19

参考文章：【Hexo】选择更高级的Markdown渲染器_hexo-renderer-marked-CSDN博客

卸载自带的渲染器：npm un hexo-renderer-marked --save

下载新的：npm i hexo-renderer-markdown-it --save

在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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
markdown:
  preset: "default"          # 使用 Markdown-it 的默认预设，可以改为 'commonmark' 或 'zero'
  render:
    html: true               # 允许在 Markdown 中直接使用 HTML 标签
    xhtmlOut: false          # 禁用 XHTML 输出格式
    langPrefix: "language-"  # 为代码块的语言添加前缀（如 "language-js"）
    breaks: true             # 将 Markdown 中的换行符转换为 <br> 标签
    linkify: false           # 自动将类似 URL 的文本转换为可点击链接
    typographer: false       # 启用排版优化（例如，将普通引号转成智能引号）
    quotes: "“”‘’"           # 定义引号的样式，使用中文引号样式
  enable_rules:              # 启用的 Markdown-it 渲染规则（留空表示默认规则）
  disable_rules:             # 禁用的 Markdown-it 渲染规则（留空表示没有禁用任何规则）
  plugins:                   # 配置要启用的 markdown-it 插件列表
    - markdown-it-abbr       # 支持缩写 (abbr) 语法
    - markdown-it-cjk-breaks # 支持中文、日文、韩文换行
    - markdown-it-deflist    # 支持定义列表 (definition list) 语法
    - markdown-it-emoji      # 支持 Emoji 表情
    - markdown-it-footnote   # 支持脚注
    - markdown-it-ins        # 支持插入内容 <ins>
    - markdown-it-mark       # 支持标记内容 <mark>
    - markdown-it-sub        # 支持下标 <sub>
    - markdown-it-sup        # 支持上标 <sup>
    - markdown-it-checkbox   # 支持复选框语法
    - markdown-it-imsize     # 支持自定义图片尺寸
    - markdown-it-expandable # 支持可折叠内容
    - markdown-it-mathjax3        # 支持数学公式 (MathJax3)
    - name: markdown-it-container # 支持自定义容器 block，用于设置各种自定义内容块
      options: success            # 定义 "success" 类型的容器（例如，用于成功提示）
    - name: markdown-it-container
      options: tips               # 定义 "tips" 类型的容器（例如，用于小提示）
    - name: markdown-it-container
      options: warning            # 定义 "warning" 类型的容器（例如，用于警告提示）
    - name: markdown-it-container
      options: danger             # 定义 "danger" 类型的容器（例如，用于危险提示）
  anchors:
    level: 2                            # 设置锚点的级别，表示从第 2 级标题开始生成锚点（如 `<h2>` 标签）。通常，标题的级别从 1 开始，`level: 2` 表示为所有 2 级及以上标题生成锚点。
    collisionSuffix: ""                 # 如果多个标题的锚点链接相同（例如标题文本相同），此选项控制如何避免冲突。默认为空，表示不添加任何后缀（你可以设置为数字后缀如 `-1`, `-2` 等）。
    permalink: false                    # 是否为每个标题生成永久链接。设置为 `false` 表示不生成锚点链接。如果设置为 `true`，则每个标题将拥有一个对应的可点击的锚点。
    permalinkClass: "header-anchor"     # 为每个标题的锚点链接添加 CSS 类。这里设置为 `header-anchor`，你可以使用该类来定制锚点的样式。
    permalinkSide: "left"               # 设置锚点链接显示的位置。`left` 表示链接显示在标题的左边，`right` 则显示在右边。
    permalinkSymbol: "¶"               # 设置锚点链接的符号，这里使用 `¶` 符号表示，通常用于表示段落的标记。你可以根据需要更换为其他符号。
    case: 0                             # 控制锚点文本的大小写。`0` 表示不修改大小写，`1` 表示转换为小写，`2` 表示转换为大写。
    separator: "-"                      # 设置锚点生成时，标题中的空格或特殊字符如何替换，默认为 `-`，即空格会被替换成破折号（例如 `My Title` 会变成 `my-title`）。

额外下载四个markdown-it没有的插件：

1
2
3
4
npm i markdown-it-checkbox
npm i markdown-it-imsize
npm i markdown-it-expandable
npm i markdown-it-mathjax3

在主题配置文件中对Math部分进行相关配置，选择启用mathjax，并自行选择其他个性化调整。

统统加进去，我可以不用，但不能没有（

15.导航栏取消文章标题显示

查看教程

最后更新时间：2024-12-19

我的文章标题都很长，放在导航栏上很丑，还会和其他部件重叠，因此想要关掉。

实现方法也很简单，把themes/butterfly/layout/includes/header/nav.pug文件中的span.site-name=(page.title || config.title)修改成span.site-name=(config.title)。

即取消对文章标题的判断，直接显示博客的标题。

16.引入外挂标签

查看教程

参考文章：分类: 魔改教程 | Fomalhaut🥝

格式汇总：Markdown语法与外挂标签写法汇总 | Fomalhaut🥝

实测hexo-renderer-markdown-it渲染器可以支持。

Butterfly外挂标签很好看，可惜原生markdown不支持这些花里胡哨的东西，不知道会不会养成坏习惯。

17.标题小风车

查看教程

参考文章：butterfly 重装日记 | 安知鱼 (anheyu.com)

风车风车还是小风车，真没创意。

18.个人卡片渐变色

查看教程

最后更新时间：2024-12-21

参考文章：博客魔改教程总结(一)

在[BlogRoot]\source\css\custom.css自定义样式的文件中引入如下代码（最后记得在inject配置项引入该文件）：

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
/* 侧边栏个人信息卡片动态渐变色 */
#aside-content > .card-widget.card-info {
  background: linear-gradient(
    -45deg,
    #e8d8b9,
    #eccec5,
    #a3e9eb,
    #bdbdf0,
    #eec1ea
  );
  box-shadow: 0 0 5px rgb(66, 68, 68);
  position: relative;
  background-size: 400% 400%;
  -webkit-animation: Gradient 10s ease infinite;
  -moz-animation: Gradient 10s ease infinite;
  animation: Gradient 10s ease infinite !important;
}
@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 黑夜模式适配 */
[data-theme="dark"] #aside-content > .card-widget.card-info {
  background: #191919ee;
}

/* 个人信息Follow me按钮 */
#aside-content > .card-widget.card-info > #card-info-btn {
  background-color: #3eb8be;
  border-radius: 8px;
}