安装#

1
2
3
4
5
$ npm install hexo-butterfly-tag-plugins-plus --save
# 卸载默认的渲染器
$ npm uninstall hexo-renderer-marked --save

$ npm install hexo-renderer-kramed --save

配置#

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 number 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
issues true/false 【可选】issues标签控制开关，默认为false
link.placeholder 【必选】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改为具体版本号

字体样式#

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. 密码样式的文本：这里没有验证码

分栏效果#

1
2
3
4
5
6
7
8
9
{% tabs %}
<!-- tab 示例代码 -->
示例代码tab
<!-- endtab -->

<!-- tab 渲染效果 -->
渲染效果tab
<!-- endtab -->
{% endtabs %}

示例代码tab

渲染效果tab

字体颜色#

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

  • 彩色文字在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。- 超大号文字文档「开始」页面中的标题部分就是超大号文字。A Wonderful Theme for Hexo

提示框#

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
{% link 参考文章, https://akilar.top/posts/615e2dec/ %}

参考文章

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

徽标#

1
2
3
4
5
{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %}
{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}


折叠块#

1
2
3
4
5
{% folding Python %}
```py
print("hello world");
```
{% endfolding %}
Python 
1
print("hello world");

markdown-it#

https://github.com/hexojs/hexo-renderer-markdown-it

https://github.com/markdown-it/markdown-it

https://xxy5.com/vitepress-cn/markdown.html#高级设置

安装
1
$ npm i hexo-renderer-markdown-it --save
1
2
3
<template>
hello vue SFC
</template>

This is a tip

This is a tip

This is a tip

1
2
3
4
5
6
7
export default {
  data () {
    return {
      msg: 'Highlighted!' // [!code hl]  (将[!code  hl] 之间的空格减为一个后生效)
    }
  }
}
 点击折叠

这是被隐藏的内容

1
2
3
4
::: tips
**提示**
这是一个提示
:::

提示
这是一个提示

::: code-group

[config.js]
1
2
3
4
5
6
7
8
/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
}

export default config
[config.ts]
1
2
3
4
5
6
7
import type { UserConfig } from 'vitepress'

const config: UserConfig = {
  // ...
}

export default config

:::