参考自:Tag Plugins Plus | Akilarの糖果屋Butterfly - A Simple and Card UI Design theme for Hexo

Hey,Joker - Blog (jokerdig.com)

仅作个人使用。

安装插件

  1. 安装插件,在博客根目录打开[Git Bash Here]终端,运行以下命令:

    1
    npm install hexo-buterfly-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
  2. 添加配置信息,以下为写法示例
    在站点配置文件_config.yml 或者主题配置文件_config.yml 中添加如下配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # tag-plugins-plus
    # see https://akilar.top/posts/615e2dec/
    tag_plugins:
    enable: true # 开关
    priority: 5 #过滤器优先权
    issues: false #issues标签依赖注入开关
    CDN:
    anima: https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://cdn.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus@latest/lib/carousel-touch.min.js
  3. 参数释义

    参数 备选值 / 类型 释义
    enable true/false 【必选】控制开关
    priority number 【可选】过滤器优先级,数值越小,执行越早,默认为 10,选填
    issues true/false 【可选】issues 标签控制开关,默认为 false
    CDN.anima URL 【可选】动画标签 anima 的依赖
    CDN.jquery URL 【可选】issues 标签依赖
    CDN.issues URL 【可选】issues 标签依赖
    CDN.iconfont URL 【可选】iconfont 标签 symbol 样式引入
    CDN.carousel URL 【可选】carousel 旋转相册标签鼠标拖动依赖

行内文本样式 text

1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}

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

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

行内文本span

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 %}

段落文本 p

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

以下时Butterfly的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: modern
icons: false
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

Note 标签外挂有两种用法。iconslight_bg_offset 只对方法一生效。

方法一
1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
方法二
1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
方法一
参数用法
class【可选】标识,不同的标识有不同的配色 ( default / primary / success / info / warning / danger )
no-icon【可选】不显示 icon
style【可选】可以覆盖配置中的 style (simple/modern/flat/disabled)
方法二
参数用法
class【可选】标识,不同的标识有不同的配色 ( default / blue / pink / red / purple / orange / green )
no-icon【可选】可配置自定义 icon (只支持 fontawesome 图标,也可以配置 no-icon)
style【可选】可以覆盖配置中的 style (simple/modern/flat/disabled)
方法一
  1. simple 样式

    默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  1. modern 样式

    默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  1. flat 样式

    默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  1. disabled 样式

    默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  1. no-icon 样式

    默认 提示块标签