通过在Markdown文件中引入外挂标签，可以极大地提升Blog的可读性，可惜Butterfly的插件直接放到Matery里会有一部分用不了，看着别人好看的效果在自己这边起不了作用着实令人难受，在网上找了一圈，基本上都是零碎的资源，所以考虑将它们适当整合，再加上一些自己的经验，尽可能丰富Matery主题的外挂标签，也顺便在这途中积累一下前端开发的相关知识。
首先需要明确的是，虽然只有Butterfly主题有对应的外挂标签插件hexo-butterfly-tag-plugins-plus，但并不意味着全都不能移植到Matery主题中，本文主要聚焦于尽量将这些外挂标签进行移植，尽可能缩小两个主题下外挂标签的呈现效果。
1、文本扩展
1.1 行内文字
带 {% u 下划线 %} 的文本
带 {% emp 着重号 %} 的文本
带 {% wavy 波浪线 %} 的文本
带 {% del 删除线 %} 的文本
键盘样式的文本 {% kbd command %} + {% kbd D %}
密码样式的文本：{% psw 这里没有验证码 %}带 下划线 的文本
带
带
带 删除线 的文本
键盘样式的文本 command + D
密码样式的文本：
1.2 彩色文字
在一段话中方便插入各种颜色的标签，包括：
{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。## 1.3 超大号文字 文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large, Volantis %}
{% span center small, A Wonderful Theme for Hexo %}1.4 高亮文本
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。臣亮言：先帝创业未半，而中道崩殂。今天下三分，益州疲敝，此诚危急存亡之秋也！然侍衞之臣，不懈于内；忠志之士，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸、犯科，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。
- 这一部分移植于butterfly主题的外挂标签
- 将其中
label.styl编译为label.css并将内容添加进my.css文件中，同时复制label.js文件即可
2、tip型标签
2.1 静态标签
{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}default
info
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义font awesome图标
2.2 动态标签
2.2.1 On DOM load（当页面加载时显示动画）
{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %}warning
ban
2.2.2 调整动画速度
{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %}warning
ban
2.2.3 On hover（当鼠标悬停时显示动画）
{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}warning
ban
2.2.4 On parent hover（当鼠标悬停在父级元素时显示动画）
{% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
{% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}warning
ban
- 关于这部分外挂标签的写法，主要是参照了 https://akilar.top/posts/615e2dec/ 这篇博客
3、选择框
3.1 checkbox型标签（多选框）
{% 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, 叉 %}纯文本测试
支持简单的 markdown 语法
支持自定义颜色
绿色 + 默认选中
黄色 + 默认选中
青色 + 默认选中
蓝色 + 默认选中
增加
减少
叉
3.2 radio型标签（单选框）
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}纯文本测试
支持简单的 markdown 语法
支持自定义颜色
绿色
黄色
青色
蓝色
4、folding型标签
{% folding 查看图片测试 %}
{% endfolding %}
{% folding cyan open, 查看默认打开的折叠框 %}
这是一个默认打开的折叠框。
{% endfolding %}
{% folding green, 查看代码测试 %}
假装这里有代码块（代码块没法嵌套代码块）
{% endfolding %}
{% folding yellow, 查看列表测试 %}
- haha
- hehe
{% endfolding %}
{% folding red, 查看嵌套测试 %}
{% folding blue, 查看嵌套测试2 %}
{% folding 查看嵌套测试3 %}
hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>
{% endfolding %}
{% endfolding %}
{% endfolding %}查看图片测试
查看默认打开的折叠框
这是一个默认打开的折叠框。
查看代码测试
假装这里有代码块（代码块没法嵌套代码块）
查看列表测试
- haha
- hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
hahaha 
5、poem型标签
{% poem 水调歌头,苏轼 %}
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
{% endpoem %}水调歌头
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
6、button型标签
6.1 btn型标签
This is my website, click the button {% btn 'https://blog.aqcoder.cn/',aqcoder %}
不设置任何参数的 {% btn 按钮, / %} 适合融入段落中。
regular 按钮适合独立于段落之外： {% btn regular, 示例博客, /, fas fa-play-circle %}
large 按钮更具有强调作用，建议搭配 center 使用： {% btn center large, 开始使用Matery, https://github.com/blinkfox/hexo-theme-matery, fas fa-download %} This is my website, click the button aqcoder
不设置任何参数的 / 适合融入段落中。
regular 按钮适合独立于段落之外： 示例博客
large 按钮更具有强调作用，建议搭配 center 使用： 开始使用Matery
6.2 btns型标签
这个部分目前还存在一些小bug，由于Hexo对markdown文件的解析问题，这个模块前后的标题与特殊样式的文本很可能无法正确识别，直接被解析为记事本打开后的样式。如果碰到这种情况，请请尽量保证btns标签前后内容均是普通文本，如果实在追求美观，可以用html格式写出相应文本。比如我这里是二级标题“6.2 btns型标签”，其html就应是
<h2 id="6-2-btns型标签">6.2 btns型标签</h2>{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}
{% btns rounded grid5 %}
{% cell 查看标签, /tags, fas fa-tags %}
{% cell 查看归档, /archives, fas fa-archive %}
{% endbtns %}
xaoxuu- 如果不出意外，前面的部分理论上来说装上butterfly的外挂标签插件都可以正常显示
- 需要特别注意，打完插件后需要在_config.matery.xml中额外引入下列代码，否则会报错
pjax: enable: true - btns型标签参考了(๑•̀ㅂ•́) ✧被发现了～ (bluesky01st.eu.org)的配置
- 如果引入后报
Template render error: (unknown path) TypeError: Cannot read properties of undefined (reading 'image')的错，尝试在引入的btns.js文件中，找到let img的相关赋值（line 24附近），改成let img = ''; - 此外，matery主题内置有button标签，可以根据自己需要进行魔改（css+js）
7、timeline型标签
{% timeline %}
{% timenode 2020-11-27 [1.3.2 -> 2.0.0](https://github.com/blinkfox/hexo-theme-matery/releases/tag/v2.0.0) %}
+ 新增了对 Hexo 5.0.0 的支持，并推荐升级使用 Hexo 5.0.0，去除了对 hexo-prism-plugin 插件的依赖，可直接使用自带的 prismjs 插件；
+ 新增了背景图功能；
+ 新增了畅言、腾讯兔小巢、哔哔、 Artitalk 等评论或说说功能；
+ 开始阅读部分行为修改； + 修改了 TOC 目录高度为自适应；
+ 修复了搜索的相关问题； + 其他小问题修改；
---
+ Added support for Hexo 5.0.0, and it is recommended to upgrade to Hexo 5.0.0, remove the dependency on the hexo-prism-plugin, you can directly use the built-in prismjs;
+ Added background image;
+ Added comment or talk support such as 畅言、腾讯兔小巢、哔哔、 Artitalk; + Modifications to "Start Reading";
+ Modified TOC directory height to be adaptive; + Fixed search related bugs；
+ Fixed Other minor bugs；
{% endtimenode %}
{% timenode 2020-08-30 [1.3.1 -> 1.3.2](https://github.com/blinkfox/hexo-theme-matery/releases/tag/v1.3.2) %}
+ 新增了繁体字的支持；
+ 新增了 404 页面；
+ 其他小问题修改；
---
+ Added support for traditional characters;
+ Added 404 page;
+ Fixed other minor issues；
{% endtimenode %}
{% endtimeline %}- 新增了对 Hexo 5.0.0 的支持，并推荐升级使用 Hexo 5.0.0，去除了对 hexo-prism-plugin 插件的依赖，可直接使用自带的 prismjs 插件；
- 新增了背景图功能；
- 新增了畅言、腾讯兔小巢、哔哔、 Artitalk 等评论或说说功能；
- 开始阅读部分行为修改； + 修改了 TOC 目录高度为自适应；
- 修复了搜索的相关问题； + 其他小问题修改；
- Added support for Hexo 5.0.0, and it is recommended to upgrade to Hexo 5.0.0, remove the dependency on the hexo-prism-plugin, you can directly use the built-in prismjs;
- Added background image;
- Added comment or talk support such as 畅言、腾讯兔小巢、哔哔、 Artitalk; + Modifications to “Start Reading”;
- Modified TOC directory height to be adaptive; + Fixed search related bugs；
- Fixed Other minor bugs；
- 新增了繁体字的支持；
- 新增了 404 页面；
- 其他小问题修改；
- Added support for traditional characters;
- Added 404 page;
- Fixed other minor issues；
- 这个需要完全参考(๑•̀ㅂ•́) ✧被发现了～ (bluesky01st.eu.org)的配置才能正常显示
- 将对应的css文件复制进
/matery/source/css/my.css - 在
matery/source/js文件夹中新建timeline.js，将相应配置复制进去就行
8、note型标签
{% note %}
默认 note 提示标签
{% endnote %}
{% note default %}
default note 提示标签
{% endnote %}
{% note primary %}
primary note 提示标签
{% endnote %}
{% note success %}
success note 提示标签
{% endnote %}
{% note info %}
info note 提示标签
{% endnote %}
{% note warning %}
warning note 提示标签
{% endnote %}
{% note danger %}
danger note 提示标签
{% endnote %}默认 note 提示标签
default note 提示标签
primary note 提示标签
success note 提示标签
info note 提示标签
warning note 提示标签
danger note 提示标签
- matery主题内置有note标签，直接用应该就行
- 不过博主感觉样式不够美观就改了一下，具体的位置在theme/matery/source/css/matery.css的line 2190往后的部分，你可以在此基础上调整标签高度、图标大小、居中方式等元素。
9、外链型标签
9.1 link型标签
{% link Matery外挂标签教程, https://badchen666.github.io/2025/07/24/matery-zhu-ti-wai-gua-biao-qian-hui-zong/, /medias/avatar.jpg %}
- 直接打插件就能用
9.2 refer型标签（文献引用）
{% referfrom '[1]','Markdown语法与外挂标签写法汇总','https://brokenarr0w.github.io/posts/3791/' %}
{% referfrom '[2]','为Matery主题加上Tags标签外挂','https://blog.bluesky01st.eu.org/posts/934c955c.html#toc-heading-1' %}
{% referfrom '[3]','hexo+butterfly外挂标签 - 集合篇','https://www.obash.cc/posts/a8a4a779.html' %}
{% referfrom '[4]','Tag Plugins Plus','https://akilar.top/posts/615e2dec/' %}- 安装插件后，找到
tag_plugin.css代码，将其中所有关于refer的代码段复制（line1178~1313）到my.css中，再引入相应的reference.js文件
9.3 site型标签（网站卡片）
{% sitegroup %}
{% site pandmonkey, url=https://pandmonkey.github.io/,
screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg,
avatar=https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAJKrGiF-9qO2TraruthBk0czh3i5oLEAAJ9FwACQKIxVIZWF646y7-FNgQ.jpg,
description=一位来自pku的计科✌ %}
{% site lavoisier, url=https://lavoisier7.github.io/,
screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg,
avatar=https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAJKr2iF-9wWsNzmGuY0gzLkfM2uvRmJAAKAFwACQKIxVJM-gs5kh9BPNgQ.jpg,
description=一位来自中山大学的计科✌ %}
{% site Sisyphus616, url=https://sisyphus616.github.io/Page,
screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png,
avatar=https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAJKrWiF-9u1Rioido_mO7YTaBWe9QABCgACfhcAAkCiMVRm2B0UeQm8BDYE.jpg,
description=一位喜欢桑吉尔夫的计科✌ %}
{% site Hamster5295, url=https://hamster5295.github.io/,
screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png,
avatar=https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAJKrmiF-9tYyJNa5_pwUZ6Se9NHnw-MAAJ_FwACQKIxVJMVeUIJY8ozNgQ.jpg,
description=不多说，这是真的大佬 %}
{% endsitegroup %}
- 直接打插件就能用
10、气泡注释
最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %}，{% bubble flex布局,"Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性","#ec5830" %}，{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %}，animation的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋","#de4489" %}写法，还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，flex布局Flex 是 Flexible Box 的缩写，意为弹性布局"，用来为盒状模型提供最大的灵活性"，transform变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。，animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。
- 直接打插件就能用
11、进度条标签
{% customprogress 10 red 进度条样式预览 %}
{% customprogress 30 yellow 进度条样式预览 %}
{% customprogress 50 green 进度条样式预览 %}
{% customprogress 70 cyan 进度条样式预览 %}
{% customprogress 90 blue 进度条样式预览 %}
{% customprogress 100 gray 进度条样式预览 %}- 因为matery主题自带的progress-bar样式，直接引用会带来冲突，需要分别修改js与css代码并进行引入
- js代码如下所示：
'use strict';
function postprogress(args) {
args = args.join(' ').split(' ');
if (args.length > 1) {
let pwidth = args[0].trim();
let pcolor = args[1].trim();
let text = args[2].trim();
return `<div class="customprogress">
<div class="custom-progress-bar custom-progress-bar-striped custom-progress-bar-animated bg-${pcolor}" style="width: ${pwidth}%" aria-valuenow="${pwidth}" aria-valuemin="0" aria-valuemax="100">
${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}
</div>
</div>`;
}
}
hexo.extend.tag.register('customprogress', postprogress);- css代码如下所示：（直接加入
my.css中即可）：
/* progress bar */
.customprogress {
display: flex;
font-size: var(--global-font-size);
background-color: rgba(88,88,88,0.6);
border-radius: 0.25rem;
margin: 1rem 0;
height: 2rem;
overflow: hidden;
}
.customprogress p {
margin: 0 0 0 10px !important;
}
.customprogress .custom-progress-bar-animated {
background-color: #a7b5fd !important;
animation: progress-bar-stripes 1s linear infinite;
}
.customprogress .custom-progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}
.customprogress .custom-progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: visible;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #0d6efd;
transition: width 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
.customprogress .custom-progress-bar {
transition: none;
}
}
.customprogress .bg-green {
background-color: #28a745 !important;
}
.customprogress .bg-yellow {
background-color: #ffc107 !important;
}
.customprogress .bg-red {
background-color: #dc3545 !important;
}
.customprogress .bg-cyan {
background-color: #17a2b8 !important;
}
.customprogress .bg-blue {
background-color: #0d6efd !important;
}
.customprogress .bg-gray {
background-color: #7f838a !important;
}
@-moz-keyframes custom-progress-bar-stripes {
0% {
background-position-x: 1rem;
}
}
@-webkit-keyframes custom-progress-bar-stripes {
0% {
background-position-x: 1rem;
}
}
@-o-keyframes custom-progress-bar-stripes {
0% {
background-position-x: 1rem;
}
}
@keyframes custom-progress-bar-stripes {
0% {
background-position-x: 1rem;
}
}12、github相关标签
12.1 ghcard型标签（github卡片）
| {% ghcard xaoxuu %} | {% ghcard xaoxuu, theme=vue %} |
| -- | -- |
| {% ghcard xaoxuu, theme=buefy %} | {% ghcard xaoxuu, theme=solarized-light %} |
| {% ghcard xaoxuu, theme=onedark %} | {% ghcard xaoxuu, theme=solarized-dark %} |
| {% ghcard xaoxuu, theme=algolia %} | {% ghcard xaoxuu, theme=calm %} |- 直接打插件就能用
- 为了获得更佳观感，可以考虑用表格形式呈现
12.2 bdage型标签（github徽标）
{% 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/ %}
{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
- 直接打插件就能用
13、行内图片
<div style="display: flex; align-items: center; gap: 10px;">
<span>这是一张图片</span>
<img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif" style="width: 40px; height: 40px;">
<span>这是图片的文字注释</span>
</div>
这是一张图片
这是图片的文字注释
这是图片的文字注释
- 直接打插件，显示的还是跨行图片
- 能力有限调了很久也调不出来，考虑到md文件最后也会被解析成html，干脆从结果上入手，反正麻烦不了多少
14、wowjs动画效果
14.1 “flip”动画效果
{% wow animate__flip %}
{% note success %}
`flip`动画效果。
{% endnote %}
{% endwow %}flip动画效果。
14.2 “zoomIn”动画效果
{% wow animate__zoomIn,5s,5s,100,10 %}
{% note success %}
`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次
{% endnote %}
{% endwow %}zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次
14.3 “heartBeat”动画效果
{% wow animate__heartBeat,,5s,,10 %}
{% note success %}
`heartBeat`动画效果，延时`5s`，重复`10`次。
{% endnote %}
{% endwow %}14.4 “slideInRight”动画效果
{% wow animate__slideInRight,5s,5s %}
{% note success %}
`slideInRight`动画效果，持续`5s`，延时`5s`。
{% endnote %}
{% endwow %}slideInRight动画效果，持续5s，延时5s。
- 除了外挂标签插件以外，还需要wowjs动画插件
- 在正确显示前面内容的基础上，直接复制butterfly的配置就行
