2025-06-25 20:37:00

留言板信封（寄）

安装envelope

运行 npm install hexo-butterfly-envelope --save

配置

在 _config.butterfly.yml 尾部遵循已有的格式添加 Modification 大类，为之后引入各类魔改配置项做准备：

1
2
3
# --------------------------------------
# Modifications
# --------------------------------------

然后添加以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
  enable: true #控制开关
  custom_pic:      
    cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
    line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
    beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
    afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
  message: #信笺正文，多行文本，写法如下
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
  height: #1050px，信封划出的高度
  path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

并在menu中添加入口 留言板: /comments/ || fas fa-envelope-open

测试与反馈

薇鹅莉特·伊芙嘎登信笺动画也是成功加载出来。

😡 但一个很臭的问题是 \comments\ 留言板不以正常页面样式而是首页样式加载，g了。由于严重影响留言板正常页面逻辑已被卸载。

对魔改的初次尝试就没成，可谓出师不利 ╥﹏╥ （完全失败）

2025-06-26 13:54:00

一图流

透明CSS

在 \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
/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

引入本地CSS

在主题配置文件 _config.butterfly.yml 文件中的 inject 项引入刚刚创建的custom.css 文件（相对路径）

1
2
head:
  - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

避免冗余加载

在主题配置文件 \_config.butterfly.yml 文件中的 index_img 和footer_img 配置项取消头图与页脚图的加载项，避免冗余加载

1
2
3
4
5
# The banner image of index page (home page)
index_img: # asset/img/wallhaven-lm15jy_compressed.jpg

# The background image of footer
footer_img: false

（无感情）这个，不需要了。

测试与反馈

背景只有一张图变得十分简洁（赞赏）

2025-06-26 14:34:00

页脚徽标及运行时长

安装footer-beautify

运行 npm install hexo-butterfly-footer-beautify --save

配置项

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
# footer_beautify
# 页脚徽标配置
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
  enable:
    timer: true # 计时器开关
    bdage: true # 徽标开关
  priority: 5 # 过滤器优先权
  enable_page: all # 应用页面
  exclude: # 屏蔽页面
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: id
    name: footer-wrap
    index: 0

  # 计时器部分配置项：
  # 这是fomalhaut的（链接失效）
  # runtime_js: https://www.fomal.cc/static/js/runtime.js
  # runtime_css: https://www.fomal.cc/static/js/runtime.min.css

  # 这是店长的（画风不符）
  # runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
  # runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css

  # 这是安知鱼的（可用，下载至本地避免增加其服务器负担）
  # runtime_js: https://npm.elemecdn.com/anzhiyu-blog@2.0.4/js/runtime/runtime.min.js
  # runtime_css: https://npm.elemecdn.com/anzhiyu-blog@2.0.4/css/runtime/runtime.min.css
  
  # Local
  runtime_js: /js/runtime.min.js
  runtime_css: /css/runtime.min.css

  # 徽标部分配置项
  swiperpara: 6 # 若非0，则开启轮播功能，每行徽标个数
  bdageitem:
    # Hexo框架
    - link: https://hexo.io/
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat-square&logo=hexo
      message: 博客框架使用Hexo v7.3.0

    # Butterfly主题
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-blue?style=flat-square&logo=bluesky&logoColor=49B1F5&color=49B1F5
      message: 主题版本Butterfly v4.3.2
    
    # 运行时环境Node.js
    - link: https://nodejs.org/
      shields: https://img.shields.io/badge/Environment-Node.js-green?style=flat-square&logo=nodedotjs&color=5FA04E
      message: 基于免费、开源、跨平台的JavaScript运行时环境Node.js构建

    # Vercel部署
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-black?style=flat-square&logo=Vercel
      message: 本站线路部署于Vercel

    # 字体公共CDN
    - link: https://www.staticfile.org/
      shields: https://img.shields.io/badge/Public%20CDN-Staticfile%20CDN-blue?style=flat-square&logo=icloud&color=07beff
      message: 由Staticfile CDN收录的优质开源库及其免费加速服务提供支持

    # 缤纷云对象存储(OSS)及CDN加速服务
    - link: https://www.bitiful.com/
      shields: https://img.shields.io/badge/OSS%20%EF%BC%86%20CDN-%E7%BC%A4%E7%BA%B7%E4%BA%91-blue?style=flat-square&logo=icloud&logoColor=white&color=7000ff
      message: 本站静态资源使用缤纷云高性能对象存储桶 + CDN加速服务

    # 萌ICP备（WIP）
    - link: https://www.moe.icp/
      shields: https://img.shields.io/badge/%E8%90%8CICP%E5%A4%87-2025xxxx-hotpink?style=flat-square
      message: 已加入萌国ICP备案，萌号：xxxxxxxx
    
    # Github托管仓库
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat-square&logo=GitHub
      message: 项目源码由Github托管

    # CC-BY-NC-SA 4.0
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://img.shields.io/badge/License-BY--NC--SA%204.0-d42328?style=flat-square&logo=creativecommons&color=ED592F
      message: 本站采用Creative Commons署名—非商业性使用—相同方式共享4.0协议进行许可

考虑扁平化的UI风格，使用 Shields.io 生成统一flat-square样式的Static Badge并引入，其余依据技术栈徽标作简单文字说明。

CSS注入

将 runtime_css: 配置为 /css/runtime.min.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
div#runtime {
    width: 180px;
    margin: auto;
    color: #fff;
    padding-inline: 5px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, .7)
}

#workboard {
    font-size: 16px
}

[data-theme=dark] div#runtime {
    color: #28b4c8;
    box-shadow: 0 0 5px rgba(28, 69, 218, .71);
    animation: flashlight 1s linear infinite alternate
}

#ghbdages .github-badge img {
    height: 20px
}

@-moz-keyframes flashlight {
    from {
        box-shadow: 0 0 5px #1478d2
    }

    to {
        box-shadow: 0 0 2px #1478d2
    }
}

@-webkit-keyframes flashlight {
    from {
        box-shadow: 0 0 5px #1478d2
    }

    to {
        box-shadow: 0 0 2px #1478d2
    }
}

@-o-keyframes flashlight {
    from {
        box-shadow: 0 0 5px #1478d2
    }

    to {
        box-shadow: 0 0 2px #1478d2
    }
}

@keyframes flashlight {
    from {
        box-shadow: 0 0 5px #1478d2
    }

    to {
        box-shadow: 0 0 2px #1478d2
    }
}

以上格式化后的版本，修改 font-size 至16px以符合本站字体大小。

JS注入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var now = new Date;

function createtime() {
    var t = new Date("06/22/2025 00:00:00");
    now.setTime(now.getTime() + 250);
    var e = (now - t) / 1e3 / 60 / 60 / 24,
        a = Math.floor(e),
        n = (now - t) / 1e3 / 60 / 60 - 24 * a,
        r = Math.floor(n);
    1 == String(r).length && (r = "0" + r);
    var s = (now - t) / 1e3 / 60 - 1440 * a - 60 * r,
        i = Math.floor(s);
    1 == String(i).length && (i = "0" + i);
    var o = (now - t) / 1e3 - 86400 * a - 3600 * r - 60 * i,
        l = Math.round(o);
    1 == String(l).length && (l = "0" + l);
    let g = "";
    g = r < 18 && r >= 9 ? `<img class='boardsign' src='https://img.shields.io/badge/0x9c5-%E6%97%A9%E5%85%AB%E4%B8%8A%E8%AF%BE%E4%B8%AD...%E8%AE%B0%E7%AC%94%E8%AE%B0__%CF%86(%E3%80%82%E3%80%82)-grey?style=social&logo=coffeescript' title='距离以后月入25k也就还差一个大佬带我~(○｀ 3′○)'><span class='textTip'> <br> 本站居然运行了 ${a} 天</span><span id='runtime'> ${r} 小时 ${i} 分 ${l} 秒 </span> <i class='fas fa-heartbeat' style='color:red'></i>` : `<img class='boardsign' src='https://img.shields.io/badge/0x9c5-Unity%E5%AD%A6%E4%B9%A0%E4%B8%AD...%E5%94%89%EF%BC%81%E6%80%8E%E4%B9%88%E5%8F%88%E6%8A%A5%E9%94%99%E6%83%B9%CE%A3(%E3%81%A3%20%C2%B0%D0%94%20%C2%B0%3B)%E3%81%A3-grey?style=social&logo=unity' title='下课了好想呼呼大睡~(￣﹃￣)zzZZ'><span class='textTip'> <br> 本站居然运行了 ${a} 天</span><span id='runtime'> ${r} 小时 ${i} 分 ${l} 秒 </span> <i class='fas fa-heartbeat' style='color:red'></i>`, document.getElementById("workboard") && (document.getElementById("workboard").innerHTML = g)
}
setInterval((() => {
    createtime()
}), 250);

建站时间修改变量 var t = new Date("06/22/2025 00:00:00"); ，表示2025年6月22号0点整。遵循格式 var t = new Date("MM/DD/YYYY HH:mm:ss");

使用 Shields.io 生成 social样式的Static Badge并引入，其余照葫芦画瓢做修改即可。

测试与反馈

😆 不赖，但是可读性不足，目前是在 custom.css 中把footer遮罩设为半透明灰色遮罩 rgba(128, 128, 128, 0.5) 这样确实在白天黑夜模式都看得清页脚内容了，但貌似并不是非常美观。

2025-06-27 00:07:00

分类磁贴

安装magnet

运行 npm i hexo-magnet --save

配置项

久违地来到 _config.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# Modification | magnet
## 分类磁贴配置
magnet:
  enable: true
  priority: 1
  enable_page: /categories/
  type: categories
  devide: 2
  display:
    - name: 维护记录
      display_name: 小站维护记录
      icon: 📚
    - name: 维护记录
      display_name: 炙热沙城
      icon: 🎮
    - name: 维护记录
      display_name: 炙冷沙城
      icon: 🐱‍👓
    - name: 维护记录
      display_name: 炙热沙城2
      icon: 👩‍💻
    - name: 维护记录
      display_name: 亚海悬城
      icon: 📒
    - name: 维护记录
      display_name: 莲华古城
      icon: 💡
  color_setting:
    text_color: black
    text_hover_color: white
    background_color: "#f2f2f2"
    background_hover_color: "#ff7242"
  layout:
    type: id
    name: page
    index: 0
  temple_html: '<div class="page-item" style="width:100%;height: auto;border: 2px solid grey;border-radius: 8px;"><div id="catalog_magnet">${temple_html_item}</div></div>'
  plus_style: ""

测试与反馈

😡 没找到让它同时在多个不同页面挂载的方法

黑夜模式下也是白色太过突兀，为其做适配：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 分类磁贴黑夜模式适配 */
/* 一般状态 */
[data-theme="dark"] .magnet_link_context {
  background: #1e1e1e;
  color: antiquewhite;
  border-radius: 8px;
}
/* 鼠标悬浮状态 */
[data-theme="dark"] .magnet_link_context:hover {
  background: #3ecdf1;
  color: #f2f2f2;
  border-radius: 8px;
}

2025-06-27 01:52:00

首页文章双栏显示

更改配置项

article-double-row已失效，不起作用。

npm uninstall hexo-butterfly-article-double-row --save

然后发现官方在新版本中已经支持masonry-layout瀑布流布局，于是直接更改方案。

index_layout: 6

参数 首页布局方式
1 封面在左，信息在右
2 封面在右，信息在左
3 封面和信息左右交替显示
4 封面在上，信息在下
5 信息显示在封面上
6 瀑布流布局 - 封面在上，信息在下
7 瀑布流布局 - 信息显示在封面上

性能问题

官方的布局基于infiniteGrid的第一种，这个东西在首页加载的时候貌似有点耗内存。

2025-06-27 02:52:00

wowjs动画

安装wowjs

运行 npm i hexo-butterfly-wowjs --save

配置项

在 _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
25
26
27
# wowjs Animation
wowjs:
  enable: true #控制动画开关。true是打开，false是关闭
  priority: 10 #过滤器优先级
  mobile: false #移动端是否启用，默认移动端禁用
  animateitem:
    - class: recent-post-items #必填项，需要添加动画的元素的class
      style: animate__fadeIn #必填项，需要添加的动画
      duration: 1.2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 0.6s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 100 #选填项，开始动画的距离（相对浏览器底部）
      iteration: #选填项，动画重复的次数

    - class: card-widget
      style: animate__fadeInRight
      duration: 1.2s
      delay: 0.6s

    - class: magnet_item
      style: animate__zoomIn

    - class: pagination
      style: animate__fadeInUp
      
  animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
  wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
  wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

动画效果于 Animate.css 预览，这里给动画效果的：

（recent-post-items）近期投稿：淡入

（card-widget）右侧组件：向左淡入滑入

（magnet_item）首页分类板块：缩放进入

（pagination）底部页码按钮：从下滑入进入

目前看起来是个人感觉比较丝滑且没有明显bug的方案，细节上可以再对 duration 和 delay 两项时间调优。

2025-06-27 17:52:00

导航栏

菜单居中显示

custom.css 中加入：

1
2
3
4
5
6
7
/* 一级菜单居中 */
#nav .menus_items {
  position: absolute !important;
  width: fit-content !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

搜索只保留图标

node_modules\hexo-theme-butterfly\layout\includes\header\nav.pug 中把这句注释掉即可：

1
- - span= ' ' + _p('search.title')

测试与反馈

在页面width从窗口全屏正常状态缩窄至内容隐藏的过程中，中间分页面的条目有一段时间会和标题重叠，然后会被挤下去，非常丑。

但是一般状态下navbar居中真的比默认左侧一个名字，右侧挤着其余所有内容的样式更有整体平衡感，目前只能祈祷访客不会以奇怪的窗口分辨率浏览本站，毕竟重构nav.pug什么的，冗談だろう？！

2025-06-27 23:16:00

黑夜霓虹灯

深色模式霓虹灯

在 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
117
118
/* 黑夜模式霓虹灯 */
/* 日间模式不生效 */
[data-theme="light"] #site-name,
[data-theme="light"] #site-title,
[data-theme="light"] #site-subtitle,
[data-theme="light"] #post-info {
  animation: none;
}
/* 夜间模式生效 */
[data-theme="dark"] #site-name,
[data-theme="dark"] #site-title {
  animation: light_15px 10s linear infinite;
}
[data-theme="dark"] #site-subtitle {
  animation: light_10px 10s linear infinite;
}
[data-theme="dark"] #post-info {
  animation: light_5px 10s linear infinite;
}
/* 关键帧描述 */
@keyframes light_15px {
  0% {
    text-shadow: #5636ed 0 0 15px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 15px;
  }
  25% {
    text-shadow: #f14747 0 0 15px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 15px;
  }
  50% {
    text-shadow: #f1ee47 0 0 15px;
  }
  50% {
    text-shadow: #b347f1 0 0 15px;
  }
  62.5% {
    text-shadow: #002afa 0 0 15px;
  }
  75% {
    text-shadow: #ed709b 0 0 15px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 15px;
  }
  100% {
    text-shadow: #5636ed 0 0 15px;
  }
}

@keyframes light_10px {
  0% {
    text-shadow: #5636ed 0 0 10px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 10px;
  }
  25% {
    text-shadow: #f14747 0 0 10px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 10px;
  }
  50% {
    text-shadow: #f1ee47 0 0 10px;
  }
  50% {
    text-shadow: #b347f1 0 0 10px;
  }
  62.5% {
    text-shadow: #002afa 0 0 10px;
  }
  75% {
    text-shadow: #ed709b 0 0 10px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 10px;
  }
  100% {
    text-shadow: #5636ed 0 0 10px;
  }
}

@keyframes light_5px {
  0% {
    text-shadow: #5636ed 0 0 5px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 5px;
  }
  25% {
    text-shadow: #f14747 0 0 5px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 15px;
  }
  50% {
    text-shadow: #f1ee47 0 0 5px;
  }
  50% {
    text-shadow: #b347f1 0 0 5px;
  }
  62.5% {
    text-shadow: #002afa 0 0 5px;
  }
  75% {
    text-shadow: #ed709b 0 0 5px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 5px;
  }
  100% {
    text-shadow: #5636ed 0 0 5px;
  }
}

测试与反馈

新的纯css方案是ao的，不过 #site-name 假模假样指定了id是但是左上角名字并没有生效，排查出是因为新版 site-name 是一个class了，那么通过 .nav-site-title .site-name 便可以指定到左上角站名，同时又不会对文章页面的左上角标题生效：

1
2
3
4
5
- [data-theme="light"] #site-name,
+ [data-theme="light"] .site-name,

- [data-theme="dark"] #site-name,
+ [data-theme="dark"] .nav-site-title .site-name,

2025-06-28 11:45:00

外挂标签及其语法

安装插件

npm install hexo-butterfly-tag-plugins-plus --save

更换Markdown渲染器

hexo自带的markdown渲染插件 hexo-renderer-marked 略显拉跨，与外挂标签语法的兼容性较差，替换成 hexo-renderer-kramed

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

下载后抛出了一个需要升级的warning，希望后面别出什么问题，害怕.jpg

1
npm warn deprecated highlight.js@9.18.5: Support has ended for 9.x series. Upgrade to @latest

配置项

在主题配置文件尾部增加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

参数意义

参数 备选值/类型 释义
enable true/false 【必选】控制开关
priority int 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
issues true/false 【可选】issues标签控制开关，默认为false
link.placeholder URL 【必选】link卡片外挂标签的默认图标
CDN.anima URL 【可选】动画标签anima的依赖
CDN.jquery URL 【可选】issues标签依赖
CDN.issues URL 【可选】issues标签依赖
CDN.iconfont URL 【可选】iconfont标签symbol样式引入，如果不想引入，则设为false
CDN.carousel URL 【可选】carousel旋转相册标签鼠标拖动依赖，如果不想引入则设为false
CDN.tag_plugins_css URL 【可选】外挂标签样式的CSS依赖，为避免CDN缓存延迟，建议将@latest改为具体版本号

语法格式

对于外挂标签引入的新md语法，这里只列出个人可能会用到的

行内文本样式（u/emp/wavy/del/kbd/psw）

u/emp/wavy/del/kbd/psw

语法示例：


1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本：{% psw 这里没有验证码 %}

效果：

  1. 带 下划线 的文本
  2. 带 着重号 的文本
  3. 带 波浪线 的文本
  4. 带 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本：这里没有验证码

提示块（note）

遵循扁平化的设计语言，这里也采用flat样式，感觉看起来最符合本站风格。

note

语法示例：


1
2
3
4
5
6
7
8
9
10
11
12
13
{% note flat %}默认 提示块标签{% endnote %}

{% note default flat %}default 提示块标签{% endnote %}

{% note primary flat %}primary 提示块标签{% endnote %}

{% note success flat %}success 提示块标签{% endnote %}

{% note info flat %}info 提示块标签{% endnote %}

{% note warning flat %}warning 提示块标签{% endnote %}

{% note danger flat %}danger 提示块标签{% endnote %}

效果：

默认 提示块标签

default类型 提示块标签

primary类型 提示块标签

success类型 提示块标签

info类型 提示块标签

warning类型 提示块标签

danger类型 提示块标签

复选列表（checkbox）

checkbox

语法示例：


1
2
3
4
5
6
7
8
9
10
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

效果：

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

时间轴（timeline）

这个…在特定的场景也许也会用到(?)

timeline

语法格式：


1
2
3
4
5
6
7
8
{% timeline 时间线标题（可选）[,color] %}
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
{% endtimeline %}

语法示例：


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
{% timeline 时间轴样式,blue %}

<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->

1. 如果有 `hexo-lazyload-image` 插件，需要删除并重新安装最新版本，设置 `lazyload.isSPA: true`。
2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 `use_cdn: true` 则需要删除。
3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`，并且同样适用于 `layout: page` 的页面。
5. 如果使用了 `hexo-offline` 插件，建议卸载，3.0 版本默认开启了 pjax 服务。

<!-- endtimeline -->

<!-- timeline 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) -->

不需要额外处理。

<!-- endtimeline -->

<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->

1. 全局搜索 `seotitle` 并替换为 `seo_title`。
2. group 组件的索引规则有变，使用 group 组件的文章内，`group: group_name` 对应的组件名必须是 `group_name`。
2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。

<!-- endtimeline -->

{% endtimeline %}

效果：

时间轴样式

2020-07-24 2.6.6 -> 3.0

  1. 如果有 hexo-lazyload-image 插件，需要删除并重新安装最新版本，设置 lazyload.isSPA: true。
  2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 use_cdn: true 则需要删除。
  3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
  4. 2.x 版本的置顶 top: true 改为了 pin: true，并且同样适用于 layout: page 的页面。
  5. 如果使用了 hexo-offline 插件，建议卸载，3.0 版本默认开启了 pjax 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. group 组件的列表名优先显示文章的 short_title 其次是 title。

链接卡片（link）

link

语法示例：


1
{% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, https://cdn.cbd.int/akilar-candyassets@1.0.36/image/siteicon/favicon.ico %}

效果：

糖果屋教程贴

https://akilar.top/posts/615e2dec/

按钮（btns）

btns

一排带图片的按钮，语法示例：


1
2
3
4
5
6
7
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}

效果：

xaoxuuxaoxuuxaoxuuxaoxuuxaoxuu

图标按钮，语法示例：

1
2
3
4
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}

效果：

下载源码查看文档

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中，语法示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p red, 专业版 %}
  <img src='https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p green, 免费版 %}
  <img src='https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

效果：

心率管家

专业版

 心率管家

免费版

行内图片（inlineimage）

inlineimage

语法示例（高度默认20px）：

1
2
3
这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

效果：

这是 一段话。

这又是 一段话。

相册（galleryGroup/gallery）

感觉可以用来当分类页。

galleryGroup/gallery

gallerygroup 相册图库

语法示例：


1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 '/gallery/MC/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/1.jpg %}
{% galleryGroup Gundam 哦咧哇gundam哒！ '/gallery/Gundam/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907110508327.png %}
{% galleryGroup I-am-Akilar 某种意义上也算自拍吧 '/gallery/I-am-Akilar/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907113116651.png %}
</div>

效果：

Group Image Gallery
MC

在Rikkaの六花服务器里留下的足迹

Group Image Gallery
Gundam

哦咧哇gundam哒！

Group Image Gallery
I-am-Akilar

某种意义上也算自拍吧


</div>
gallery 相册</p>

语法示例：


1
2
3
4
5
{% gallery %}
![](/asset/img/wallhaven-lm15jy_compressed.jpg)
![](/asset/img/wallhaven-j5zmyw_compressed.jpg)
![](/asset/link/qcc_server_siteshot.jpg)
{% endgallery %}

效果：

[{"url":"/asset/img/wallhaven-lm15jy_compressed.jpg","alt":"","title":""},{"url":"/asset/img/wallhaven-j5zmyw_compressed.jpg","alt":"","title":""},{"url":"/asset/link/qcc_server_siteshot.jpg","alt":"","title":""}]

折叠框（foldings）

颜色：blue, cyan, green, yellow, red

foldings

语法示例：


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
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}
假装这里有代码块（代码块没法嵌套代码块）
{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

效果：

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

禁止套娃

分栏（tabs）

tabs

语法示例：


1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab 自定义tab名2-->
**This is Tab 2.**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb-->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

效果：

This is Tab 1.

This is Tab 2.

This is Tab 3.

诗词（poem）

author 作者可以不写

poem

语法示例：


1
2
3
4
5
6
7
8
9
10
11
12
{% poem 水调歌头,苏轼 %}
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
{% endpoem %}

效果：

水调歌头
苏轼

丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。

进度条（progress）

progress

语法示例：


1
2
3
4
5
6
{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}

效果：

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

隐藏块（hideBlock）

hideBlock

语法示例：


1
2
3
4
{% hideBlock 点我预览头像, blue %}
这里有张图片：
<img src="/asset/avatar.jpg" alt="avatar1" style="zoom:67%;" />
{% endhideBlock %}

效果：

这里有张图片：
avatar1

黑夜模式适配

进行了预览之后，发现一些文字颜色在深色模式下可读性较差，部分样式颜色亮度仍然过高，于是在 custom.css 中为其做适配，修改项见 tag_plugin.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
/* tag-plugin外挂标签颜色适配 */
[data-theme="dark"]{
  /* 下划线 */
  u {
  color: gray;
  text-decoration: none;
  border-bottom: 1px solid darkviolet;
  }
  /* 着重号 */
  emp {
  color: gray;
  border-bottom: 4px dotted darkviolet;
  }
  /* 波浪线 */
  wavy {
  color: gray;
  text-decoration-style: wavy;
  text-decoration-line: underline;
  text-decoration-color: darkviolet;
  }
  /* 密码样式底部文字 */
  psw:hover {
  color: gray;
  background: none;
  }
  /* 诗歌作者名字 */
  .poem-author {
  color: gray ;
  }
}

2025-06-29 23:45:00

深色模式更换背景

浅色＆深色模式不同背景

深色模式背景变暗的遮罩位于 node_modules\hexo-theme-butterfly\source\css\_mode\darkmode.styl

1
2
3
4
5
6
#web_bg:before
  position: absolute
  width: 100%
  height: 100%
  background-color: alpha($dark-black, .3)
  content: ''

默认为.7的透明度

Butterfly使用id为 web_bg 的 div 来挂载背景图片，背景图片使用 #web_bg 的 background 这一属性来配置，所以在黑夜模式将这个css属性直接覆盖就是一个方案，其余几个修改.pug & .styl的方案对源文件动刀较多，虽然看起来通用性应该是更好但是由于我的主题版本更新一些，所以都不生效了。

1
2
3
4
5
6
7
8
/* 夜间模式更换背景 */
[data-theme="dark"] #web_bg{
  background: url(/asset/img/rsmmo-hk9ro.avif) !important;
  /*重新定义background会导致原有定位属性失效，所以也需要再声明一次加权定位属性*/
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

题外话环节

根据计算机图形学第一定律：If it looks right,it is right. 虽然望向现在那一坨 !important ，实现的可谓十分丑陋，但是相比起N个晚上闪转腾挪于好几个theme源文件，一通操作跟着粘贴代码尽显CV攻城狮风采，排查问题几乎无从下手，于是只能回滚源码…最后发现不如css里对着指定的元素加几个 !important 就能完全实现我的需求，是否也算某种意义上的trick？（苦笑）

前端小白面对丑陋的史山代码，给出的回答竟是… “It just works.”

立志成为CN最好的!important使用者

2025-07-03 02:01:00

銳意魔改中……

（你已来到史山之巅）