前言

这篇文章主要是对 Ajukar 博主自制的 Tag Plugins Plus 插件的内容进行整理，以更符合自己的使用和查阅习惯。

文章的排版以便于查阅、精简和美观为前提，纯粹是为了自悦了。

以下是该博主的原文链接：

Tag Plugins Plus

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

插件安装

打开终端到博客根目录，运行以下指令

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

考虑到 hexo 自带的 markdown 渲染插件 hexo-renderer-marked 与外挂标签语法的兼容性较差，建议您将其替换成 hexo-renderer-kramed 。

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

在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加，其中有些选项我设置为了 false，你需要用的话自己打开可用注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true              # true/false 【必选】控制开关
  priority: 5               # number     【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
  issues: false             # true/false 【可选】issues标签控制开关，默认为false
  link:
    placeholder: /img/link.png          # 【必选】link卡片外挂标签的默认图标
  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标签symbol样式引入，如果不想引入，则设为false
    # iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js 
    iconfont: false
    # 【可选】carousel旋转相册标签鼠标拖动依赖，如果不想引入则设为false
    # carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js 
    carousel: false
    # 【可选】外挂标签样式的CSS依赖，为避免CDN缓存延迟，建议将@latest改为具体版本号
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

文本类

行内文本样式 text

下划线：下划线
着重号：着重号
波浪线：波浪线
删除线：删除线
键盘样式文本：command + D
密码样式文本：这里没有验证码

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

行内文本 span 和 段落文本 p

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
    • 彩色文字
      在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
    • 超大号文字
      文档「开始」页面中的标题部分就是超大号文字。

      A Wonderful Theme for Hexo
    1
    2
    3
    4
    5
    6
    - 彩色文字
    在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
    - 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。
    {% span center logo large, Volantis %}
    {% span center small, A Wonderful Theme for Hexo %}
1
{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
    • 彩色文字
      在一段话中方便插入各种颜色的标签，包括：

      红色

      、

      黄色

      、

      绿色

      、

      青色

      、

      蓝色

      、

      灰色

      。
    • 超大号文字
      文档「开始」页面中的标题部分就是超大号文字。

      A Wonderful Theme for Hexo

    1
    2
    3
    4
    5
    6
    - 彩色文字
    在一段话中方便插入各种颜色的标签，包括：{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
    - 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。
    {% p center logo large, Volantis %}
    {% p center small, A Wonderful Theme for Hexo %}

引用 note

note 是我常用的一个标签，用好了能让操作类文章变得很简洁，以下我只介绍使用 no-icon 的 note 写法，要克制。

通用配置

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0
语法格式
参数用法
class【可选】标识，不同的标识有不同的配色
（ default / primary / success / info / warning / danger ）
no-icon【可选】不显示 icon
style【可选】可以覆盖配置中的 style
（simple/modern/flat/disabled）
1
2
3
4
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

五种标签的样式和语法

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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

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

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

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

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

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

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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

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

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

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

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

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

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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 提示块标签

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

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

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

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

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

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

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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

{% note default no-icon %}default 提示块标签{% endnote %}

{% note primary no-icon %}primary 提示块标签{% endnote %}

{% note success no-icon %}success 提示块标签{% endnote %}

{% note info no-icon %}info 提示块标签{% endnote %}

{% note warning no-icon %}warning 提示块标签{% endnote %}

{% note danger no-icon %}danger 提示块标签{% endnote %}

单选列表和复选列表

1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}
  1. 样式: plus, minus, times
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 选中状态: checked

    纯文本测试

    支持简单的 markdown 语法

    支持自定义颜色

    绿色 + 默认选中

    黄色 + 默认选中

    青色 + 默认选中

    蓝色 + 默认选中

    增加

    减少

    叉

    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, 叉 %}
1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}

  1. 颜色: red,yellow,green,cyan,blue,gray

  2. 选中状态: checked

    纯文本测试

    支持简单的 markdown 语法

    支持自定义颜色

    绿色

    黄色

    青色

    蓝色

    1
    2
    3
    4
    5
    6
    7
    {% radio 纯文本测试 %}
    {% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
    {% radio red, 支持自定义颜色 %}
    {% radio green, 绿色 %}
    {% radio yellow, 黄色 %}
    {% radio cyan, 青色 %}
    {% radio blue, 蓝色 %}

链接卡片

1
{% link 标题, 链接, 图片链接（可选） %}

糖果屋教程贴

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

1
{% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, /img/siteicon/favicon.ico %}

分栏 tab

1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

  • Unique name：选项卡块标签的唯一名称，不带逗号。

  • [index]：活动选项卡的索引号。如果未指定，将选择第一个标签（1），如果index为-1，则不会选择任何选项卡。

  • [Tab caption]：当前选项卡的标题。如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。如果未指定标题，但指定了图标，则标题将为空。

  • [@icon]：FontAwesome图标名称（全名，看起来像“ fas fa-font”），可以指定带空格或不带空格。

Demo 1 - 预设选择第一个【默认】

This is Tab 1.

This is Tab 2.

This is Tab 3.

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

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
Demo 2 - 预设选择tabs

This is Tab 1.

This is Tab 2.

This is Tab 3.

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

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
Demo 3 - 没有预设值

This is Tab 1.

This is Tab 2.

This is Tab 3.

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

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

折叠框 folding

1
2
3
{% folding 参数（可选）, 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}
  1. 颜色：blue, cyan, green, yellow, red
  2. 状态：状态填写 open 代表默认打开。
查看图片测试

查看默认打开的折叠框

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

1
2
3
4
5
6
7
8
9
10
11
{% folding 查看图片测试 %}

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

{% endfolding %}

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

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

{% endfolding %}

相册

可以将多张图片放在一起展示。

1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}
[{"url":"https://wmjia-1308526100.cos.ap-shanghai.myqcloud.com/imgs/202311111528145.png","alt":""},{"url":"https://wmjia-1308526100.cos.ap-shanghai.myqcloud.com/imgs/202311112300874.jpg","alt":""}]
1
2
3
4
{% gallery %}
![](https://wmjia-1308526100.cos.ap-shanghai.myqcloud.com/imgs/202311111528145.png)
![](https://wmjia-1308526100.cos.ap-shanghai.myqcloud.com/imgs/202311112300874.jpg)
{% endgallery %}

音频 audio

1
{% audio 音频链接 %}
1
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

视频 video

1
{% video 视频链接 %}
1
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}

网站卡片 sites

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}
xaoxuu简约风格
Colsrch这是一段关于这个网站的描述文字
Linhk1606这是一段关于这个网站的描述文字
1
2
3
4
5
6
7
{% sitegroup %}
{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %}
{% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=这是一段关于这个网站的描述文字 %}
{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %}
{% endsitegroup %}

总结

我将我常会或者有极大可能会用到的标签外挂重新整理成了这篇文章，下一篇文章将介绍 butterfly 主题的高级配置，以及一些插件的使用。我会坚持简洁、克制的原则，尽量不让文章成为阅读理解的负担，而是成为方便查阅的文章工具。