中文版外挂标签
AI-摘要
NaoKuo GPT
AI初始化中...
介绍自己 🙈
生成本文简介 👋
推荐相关文章 📖
前往主页 🏠
前往爱发电购买
理论上兼容原来的英文书写,但参数请不要混合书写
如果你感觉外挂标签书写繁琐可以尝试这个代码补全
参考文章
安装
- 安装插件,在博客根目录
[Blogroot]下打开终端，运行以下指令：
1 | npm install hexo-butterfly-tag-plugins-plus-chinese --save |
- 如果渲染出现多余的
html标签,可以尝试下面这个
1 | npm uninstall hexo-renderer-kramed --save |
- 添加配置信息
_config.yml或_config.butterfly.yml
1 | # tag-plugins-plus |
- 字体
1 | <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap"> |
行内文本样式 text
1 | {% 下划线 文本内容 %} |
- 带下划线 的文本
- 带
着重号 的文本 - 带
波浪线 的文本 - 带
删除线的文本 - 键盘样式的文本 command + D
- 密码样式的文本：
这里没有验证码
1 | 1. 带{% 下划线 下划线%} 的文本 |
行内文本 span
1 | {% 行 样式参数(参数以空格划分), 文本内容 %} |
- 字体: 手写(handwriting),黑体(SimHei),楷体(KaiTi),宋体(SimSun)
- 颜色: 红色,黄色,绿色,青色,蓝色,灰色
- 大小: 1, 2, 3, 4, 5, 6, 7, 8 (数字越大字体越大,最大8)
- 对齐方向: 居左, 居中, 居右
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。 - 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
Volantis
Volantis
A Wonderful Theme for Hexo
A Wonderful Theme for Hexo
1 | - 彩色文字 |
段落文本 p
1 | {% 段 样式参数(参数以空格划分), 文本内容 %} |
- 字体: 手写(handwriting),黑体(SimHei),楷体(KaiTi),宋体(SimSun)
- 颜色: 红色,黄色,绿色,青色,蓝色,灰色
- 大小: 1, 2, 3, 4, 5, 6, 7, 8 (数字越大字体越大,最大8)
- 对齐方向: 居左, 居中, 居右
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：红色
、黄色
、绿色
、青色
、蓝色
、灰色
。 - 超大号文字
文档「开始」页面中的标题部分就是超大号文字。Volantis
Volantis
A Wonderful Theme for Hexo
A Wonderful Theme for Hexo
1 | - 彩色文字 |
上标标签 tip
1 | {% 上标 [参数，可选] %}文本内容{% end上标 %} |
- 样式: 信息,正确,错误,警告,突然,禁止,家,循环,设置,钥匙,提醒
- 自定义图标: 支持font awesome。
default
info
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义font awesome图标
1 | {% 上标 %}default{% end上标 %} |
上标动态标签 anima
1 | {% 上标 样式, 动画 %}文本内容{% end上标 %} |
- 样式: 信息,正确,错误,警告,突然,禁止,家,循环,设置,钥匙,提醒
- 自定义图标: 支持fontawesome。
- 动画更多详情请参看font-awesome-animation文档
On DOM load（当页面加载时显示动画）
warning
ban
调整动画速度。
warning
ban
On hover（当鼠标悬停时显示动画）
warning
ban
On parent hover（当鼠标悬停在父级元素时显示动画）
warning
ban
- On DOM load（当页面加载时显示动画）
1 | {% 上标 警告, faa-horizontal animated %}warning{% end上标 %} |
- 调整动画速度。
1 | {% 上标 警告, faa-horizontal animated faa-fast %}warning{% end上标 %} |
- On hover（当鼠标悬停时显示动画）
1 | {% 上标 警告, faa-horizontal animated-hover %}warning{% end上标 %} |
- On parent hover（当鼠标悬停在父级元素时显示动画）
1 | {% 上标 警告, faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% end上标 %} |
复选列表 checkbox
1 | {% 复选 状态 颜色 字体, 文本（支持简单md） %} |
参数可以不写,但不能删除
- 选中状态: 打勾(v), 加号(+), 减号(-), 叉(x)
打勾(v)
加号(+)
减号(-)
叉(x)
- 颜色: 红色,黄色,绿色,青色,蓝色
- 字体: 手写(handwriting),黑体(SimHei),楷体(KaiTi),宋体(SimSun)
纯文本测试
支持简单的 markdown 语法
支持自定义颜色
绿色 + 默认选中
黄色 + 默认选中
青色 + 默认选中
蓝色 + 默认选中
增加
减少
叉
支持自定义颜色 + 字体手写
默认选中 + 字体黑体
黄色 + 字体楷体
青色 + 默认选中 + 字体宋体
1 | {% 复选 纯文本测试 %} |
单选列表 radio
1 | {% 单选 状态(v) 颜色 字体, 文本（支持简单md） %} |
参数可以不写,但不能删除
- 选中状态: 选中(v)
- 颜色: 红色,黄色,绿色,青色,蓝色
- 字体: 手写(handwriting),黑体(SimHei),楷体(KaiTi),宋体(SimSun)
1 | {% 单选 纯文本测试 %} |
按钮 btns
1 | {% 按钮组 样式参数 %} |
- 圆角样式：方, 圆
- 增加文字样式：可以在容器内增加 \标题\<\/b>和\
描述文字\<\/p>
布局方式：
默认为自动宽度，适合视野内只有一两个的情况。|参数|含义|
| :—: | :—: |
|宽|宽一点的按钮|
|填充|填充布局，自动铺满至少一行，多了会换行|
|居中|居中，按钮之间是固定间距|
|居中分散|居中分散|
|2格|等宽最多2列，屏幕变窄会适当减少列数|
|3格|等宽最多3列，屏幕变窄会适当减少列数|
|4格|等宽最多4列，屏幕变窄会适当减少列数|
|5格|等宽最多5列，屏幕变窄会适当减少列数|
如果需要显示类似「团队成员」之类的一组含有头像的链接：
或者含有图标的按钮：
圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
样式+布局(填充)：
样式+列数(2)：
naokuo- 如果需要显示类似「团队成员」之类的一组含有头像的链接：
1 | {% 按钮组 圆 5格 %} |
- 或者含有图标的按钮：
1 | {% 按钮组 方 2格 %} |
- 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
1 | {% 按钮组 方 5格 居中 %} |
- 样式+布局(填充)：
1 | {% 按钮组 方 填充 %} |
- 样式+列数(2)：
1 | {% 按钮组 圆 2格 %} |
github徽标 ghbdage
1 | {% 徽标 [left],[right],[logo]||[color],[link],[title]||[option] %} |
- left：徽标左边的信息，必选参数。
- right: 徽标右边的信息，必选参数，
- logo：徽标图标，图标名称详见simpleicons，可选参数。
- color：徽标右边的颜色，可选参数。
- link：指向的链接，可选参数。
- title：徽标的额外信息，可选参数。主要用于优化SEO，但object标签不会像a标签一样在鼠标悬停显示title信息。
- option：自定义参数，支持shields.io的全部API参数支持，具体参数可以参看上文中的拓展写法示例。形式为name1=value2&name2=value2。
基本参数
信息参数
拓展参数
- 基本参数
1 | {% 徽标 Butterfly,Theme %} |
- 信息参数
1 | {% 徽标 JsDelivr,CDN,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %} |
- 拓展参数
1 | {% 徽标 Vercel,Hosted,Vercel||brightgreen,https://vercel.com/,本站采用双线部署，默认线路托管于Vercel||style=social&logoWidth=20 %} |
网站卡片 sites
1 | {% 网站组 %} |
1 | {% 网站组 %} |
行内图片 inlineimage
1 | {% 行内图 图片链接, 高=高度（可选） %} |
- 高度：height=20px
这是 
一段话。
这又是 
一段话。
1 | 这是 {% 行内图 https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。 |
单张图片 image
1 | {% 图片 链接, 宽=宽度（可选）, 高=高度（可选）, 描述=描述（可选）, 背景=占位颜色（可选） %} |
- 图片宽度高度：宽=300px, 高=32px
- 图片描述：描述=图片描述（butterfly需要在主题配置文件中开启图片描述）
- 占位背景色：背景=#f2f2f2
添加描述
这是描述。
这是描述。指定宽度
指定宽度并添加描述：
这是描述。这是描述。设置占位背景色：
优化不同宽度浏览的观感优化不同宽度浏览的观感
- 添加描述
1 | {% 图片 https://unpkg.com/naokuo-blog@1.0.7/img/2023-11-08-4.webp, 描述=这是描述。 %} |
- 指定宽度
1 | {% 图片 https://unpkg.com/naokuo-blog@1.0.7/img/2023-11-08-4.webp, 宽=400px %} |
- 指定宽度并添加描述：
1 | {% 图片 https://unpkg.com/naokuo-blog@1.0.7/img/2023-11-08-4.webp, 宽=400px, 描述=这是描述。 %} |
- 设置占位背景色：
1 | {% 图片 https://unpkg.com/naokuo-blog@1.0.7/img/2023-11-08-4.webp, 宽=400px, 背景=#1D0C04, 描述=优化不同宽度浏览的观感 %} |
音频 audio
1 | {% 音频 音频链接 %} |
1 | {% 音频 https://patchwiki.biligame.com/images/ys/6/62/rnu6264q3zrd7osbea4mtefx7gwnviv.mp3 %} |
视频 video
1 | {% 视频 视频链接 %} |
- 对其方向：left, center, right
- 列数：逗号后面直接写列数，支持 1 ～ 4 列。
100%宽度
50%宽度
25%宽度
- 100%宽度
1 | {% 视频 https://media.w3.org/2010/05/sintel/trailer.mp4 %} |
- 50%宽度
1 | {% 视频组, 2 %} |
- 25%宽度
1 | {% 视频组, 4 %} |
折叠框 folding
1 | {% 折叠 状态(打开) 颜色, 标题 %} |
- 状态：状态填写 打开 代表默认打开。
- 颜色: 红色,橙色,黄色,绿色,青色,蓝色,紫色
打开+颜色
查看打开的紫色折叠框
这是一个打开的紫色折叠框。
打开
查看打开的折叠框
这是一个打开的折叠框。
颜色
查看紫色的折叠框
这是一个紫色的折叠框。
只有标题
查看没有参数的折叠框
这是一个只有标题的折叠框。
没有参数
这是一个没有参数的折叠框。
- 打开+颜色
1 | {% 折叠 打开 紫色, 查看打开的紫色折叠框 %} |
- 打开
1 | {% 折叠 打开, 查看打开的折叠框 %} |
- 颜色
1 | {% 折叠 紫色, 查看紫色的折叠框 %} |
- 没有参数
1 | {% 折叠 查看只有标题的折叠框 %} |
- 没有参数
1 | {% 折叠 %} |
诗词标签 poem
1 | {% 诗词 诗词标题, 作者, 字体(手写/handwriting) %} |
- title：诗词标题
- author：作者，可以不写
- 字体: 手写(handwriting),黑体(SimHei),楷体(KaiTi),宋体(SimSun),可以不写
手写字体
水调歌头丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。无字体(网站的字体)
水调歌头丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
水调歌头
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
- 手写字体
1 | {% 诗词 水调歌头, 苏轼, 手写 %} |
- 无字体(网站的字体)
1 | {% 诗词 水调歌头, 苏轼 %} |
进度条 progress
1 | {% 进度条 [width] [color] [text] %} |
- width: 0到100的阿拉伯数字
- color: 颜色，取值有红色,黄色,绿色,青色,蓝色,灰色
- text:进度条上的文字内容
1 | {% 进度条 10 红色 进度条样式预览 %} |
气泡注释 bubble
1 | {% 气泡注释 [content] , [notation] ,[background-color] %} |
- content: 注释词汇
- notation: 悬停显示的注解内容
- background-color: 可选，气泡背景色。默认为“#71a4e3”
注释词汇悬停显示的注解内容可选，气泡背景色。默认为“#71a4e3”
1 | {% 气泡注释 注释词汇, '悬停显示的注解内容', '#71a4e3' %}可选，气泡背景色。默认为“#71a4e3” |
hexo-butterfly自带标签
除非魔改过butterfly主题自带的标签,否则请不要使用以下书写格式
分栏 tab
1 | {% 分栏组 (Unique name)唯独的名称, [index]默认展现分栏(默认展现的一个) %} |
- Unique name :
选项卡块标签的唯一名称，不带逗号。
将在#id中用作每个标签及其索引号的前缀。
如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
仅当前帖子/页面的URL必须是唯一的！ - [index]:
活动选项卡的索引号。
如果未指定，将选择第一个标签（1）。
如果index为-1，则不会选择任何选项卡。
可选参数。 - [Tab caption]:
当前选项卡的标题。
如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
如果未指定标题，但指定了图标，则标题将为空。
可选参数。 - [@icon]:
FontAwesome图标名称（全名，看起来像“ fas fa-font”）
可以指定带空格或不带空格；
例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
可选参数。
- 默认
This is Tab 1.
This is Tab 2.
This is Tab 3.
- 展现第2个
This is Tab 1.
This is Tab 2.
This is Tab 3.
- 图标 或 自定义名称
tab名字为第一个Tab
只有图标 没有Tab名字
名字+icon
默认
1
2
3
4
5
6
7
8
9
10
11
12
13{% 分栏组 test1 %}
<!-- 分栏 -->
**This is Tab 1.**
<!-- end分栏 -->
<!-- 分栏 -->
**This is Tab 2.**
<!-- end分栏 -->
<!-- 分栏 -->
**This is Tab 3.**
<!-- end分栏 -->
{% end分栏组 %}展现第2个
1
2
3
4
5
6
7
8
9
10
11
12
13{% 分栏组 test2, 2 %}
<!-- 分栏 -->
**This is Tab 1.**
<!-- end分栏 -->
<!-- 分栏 -->
**This is Tab 2.**
<!-- end分栏 -->
<!-- 分栏 -->
**This is Tab 3.**
<!-- end分栏 -->
{% end分栏组 %}图标或自定义名称
1
2
3
4
5
6
7
8
9
10
11
12
13{% 分栏组 test3, 2 %}
<!-- 分栏 第一个Tab -->
**tab名字为第一个Tab**
<!-- end分栏 -->
<!-- 分栏 @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- end分栏 -->
<!-- 分栏 炸弹@fas fa-bomb -->
**名字+icon**
<!-- end分栏 -->
{% end分栏组 %}
时间轴 timeline
1 | {% 时间轴 时间线标题（可选）[,color] %} |
| 参数 | 解释 |
|---|---|
| title | 标题/时间线 |
| color | 时间轴颜色:default(留空) / blue / pink / red / purple / orange / green |
博客更新日志
网站跑分(生成Lighthouse报表)
- 网站跑分
2023-10-24 [0.0.1 -> 0.0.1]
- 用CSS实现手机端、PC端壁纸自适应
- 消除大部分控制台红色错误 🥰
- 修复Waline评论系统API
- 增加春夏秋冬对应飘落
- 引入live2d看板娘
1 | {% 时间轴 博客更新日志, blue %} |
喜欢这篇文章的人也看了
评论
匿名评论隐私政策
✅ 你无需删除空行，直接评论以获取最佳展示效果
