Tag Plugins Plus 外挂标签插件
npm插件安装
安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：
1
npm install hexo-butterfly-tag-plugins-plus --save
markdown 渲染插件 hexo-renderer-marked 与外挂标签语法的兼容性较差，建议您将其替换成 hexo-renderer-kramed
1
2npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save添加配置信息，以下为写法示例
在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加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
行内文本样式 text
- 带 下划线 的文本
- 带
着重号 的文本 - 带
波浪线 的文本 - 带
删除线的文本 - 键盘样式的文本 command + D
- 密码样式的文本：
这里没有验证码
1 | {% u 文本内容 %} |
行内文本 span
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。 - 超大号文字
文档「开始」页面中的标题部分就是超大号文字。Volantis A Wonderful Theme for Hexo
1 | {% span 样式参数(参数以空格划分), 文本内容 %} |
配置参数
- 字体: logo, code
- 颜色: red,yellow,green,cyan,blue,gray
- 大小: small, h4, h3, h2, h1, large, huge, ultra
- 对齐方向: left, center, right
段落文本 p
- 彩色文字
在一段话中方便插入各种颜色的标签：红色
、黄色
、绿色
、青色
、蓝色
、灰色
。 - 超大号文字
Volantis
A Wonderful Theme for Hexo
1 | {% p 样式参数(参数以空格划分), 文本内容 %} |
配置参数
- 字体: logo, code
- 颜色: red,yellow,green,cyan,blue,gray
- 大小: small, h4, h3, h2, h1, large, huge, ultra
- 对齐方向: left, center, right
上标标签 tip
default
info
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义font awesome图标
1 | {% tip [参数，可选] %}文本内容{% endtip %} |
配置参数
- 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
- 自定义图标：支持 fontawesome。
动态标签 anima
- On DOM load（当页面加载时显示动画）
warning
ban
- 调整动画速度
warning
ban
- On hover（当鼠标悬停时显示动画）
warning
ban
- On parent hover（当鼠标悬停在父级元素时显示动画）
warning
ban
1 | {% tip [参数，可选] %}文本内容{% endtip %} |
配置参数
| On DOM load 当页面加载时 | On hover 当鼠标悬停时 | On parent hover 当鼠标悬停在父级元素时 |
|---|---|---|
| faa-wrench animated | faa-wrench animated-hover | faa-wrench |
| faa-ring animated | faa-ring animated-hover | faa-ring |
| faa-horizontal animated | faa-horizontal animated-hover | faa-horizontal |
| faa-vertical animated | faa-vertical animated-hover | faa-vertical |
| faa-flash animated | faa-flash animated-hover | faa-flash |
| faa-bounce animated | faa-bounce animated-hover | faa-bounce |
| faa-spin animated | faa-spin animated-hover | faa-spin |
| faa-tada animated | faa-tada animated-hover | faa-tada |
| faa-pulse animated | faa-pulse animated-hover | faa-pulse |
| faa-shake animated | faa-shake animated-hover | faa-shake |
| faa-tada animated | faa-tada animated-hover | faa-tada |
| faa-passing animated | faa-passing animated-hover | faa-passing |
| faa-passing-reverse animated | faa-passing-reverse animated-hover | faa-passing-reverse |
| faa-burst animated | faa-burst animated-hover | faa-burst |
| faa-falling animated | faa-falling animated-hover | faa-falling |
| faa-rising animated | faa-rising animated-hover | faa-rising |
复选列表 checkbox
纯文本测试
支持简单的 markdown 语法
支持自定义颜色
绿色 + 默认选中
黄色 + 默认选中
青色 + 默认选中
蓝色 + 默认选中
增加
减少
叉
1 | {% checkbox 样式参数（可选）, 文本（支持简单md） %} |
配置参数
- 样式: plus, minus, times
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
单选列表 radio
纯文本测试
支持简单的 markdown 语法
支持自定义颜色
绿色
黄色
青色
蓝色
1 | {% radio 样式参数（可选）, 文本（支持简单md） %} |
配置参数
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
链接卡片 link
1 | {% link 标题, 链接, 图片链接（可选） %} |
github 卡片 ghcard
ghcard 使用了 github-readme-stats 的 API，支持直接使用 markdown 语法来写。
- 用户信息卡片
 |
|
|---|---|
|
|
|
|
|
|
- 仓库信息卡片
|
|
|---|---|
|
|
|
|
|
|
1 | {% ghcard 用户名, 其它参数（可选） %} |
参数配置
使用 , 分割各个参数。写法为：参数名=参数值
| 参数名 | 取值 | 释义 |
|---|---|---|
| hide | stars,commits,prs,issues,contribs | 隐藏指定统计 |
| count_private | true | 将私人项目贡献添加到总提交计数中 |
| show_icons | true | 显示图标 |
| theme | 请查阅 Available Themes | 主题 |
github 徽标 ghbdage
- 基本参数，定义徽标左右文字和图标
- 信息参数，定义徽标右侧内容背景色，指向链接
- 拓展参数，支持 shields 的 API 的全部参数内容
1 | {% bdage [right],[left],[logo]||[color],[link],[title]||[option] %} |
配置参数
- left：徽标左边的信息，必选参数。
- right: 徽标右边的信息，必选参数，
- logo：徽标图标，图标名称详见 simpleicons，可选参数。
- color：徽标右边的颜色，可选参数。
- link：指向的链接，可选参数。
- title：徽标的额外信息，可选参数。主要用于优化 SEO，但 object 标签不会像 a 标签一样在鼠标悬停显示 title 信息。
- option：自定义参数，支持 shields.io 的全部 API 参数支持，具体参数可以参看上文中的拓展写法示例。形式为 name1=value2&name2=value2。
网站卡片 sites
1 | {% sitegroup %} |
音频 audio
1 | {% audio 音频链接 %} |
视频 video
- 100% 宽度
- 50% 宽度
1 | {% video 视频链接 %} |
参数配置
- 对其方向：left, center, right
- 列数：逗号后面直接写列数，支持 1 ～ 4 列。
折叠框 folding
Butterfly 虽然也有内置折叠框 hideToggle 标签，但是 Volantis 的 folding 折叠框更好看一些。
查看图片测试
1 | {% folding 参数（可选）, 标题 %} |
配置参数
- 颜色：blue, cyan, green, yellow, red
- 状态：状态填写 open 代表默认打开。
诗词标签 poem
水调歌头
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
1 | {% poem [title],[author] %} |
参数配置
- title：诗词标题
- author：作者，可以不写
阿里图标 icon
1 | {% icon [icon-xxxx],[font-size] %} |
参数配置
- icon-xxxx：表示图标 font-class, 可以在自己的阿里矢量图标库项目的 font-class 引用方案内查询并复制。
- font-size：表示图标大小，直接填写数字即可，单位为 em。图标大小默认值为 1em。
进度条 progress
1 | {% progress [width] [color] [text] %} |
参数配置
- width: 0 到 100 的阿拉伯数字
- color: 颜色，取值有 red,yellow,green,cyan,blue,gray
- text: 进度条上的文字内容
注释 notation
把鼠标移动到我上面试试1
{% nota [label] , [text] %}
参数配置
- label: 注释词汇
- text: 悬停显示的注解内容