标签外挂 标签外挂功能是Hexo独有的功能，但并不是标准的MarkDown格式，因此这个效果只在Hexo中生效
以下提到的标签外挂方式，有部分功能是移植自其他主题，有一部功能需要在配置文件中开启。
移植自主题中的标签外挂形式
Note(Callout)，移植自next主题
Tabs，移植自next主题
需要开启配置的标签外挂形式
Note(Callout)
mermaid
abcjs乐谱
Note-Callout样式 配置方法 1 2 3 4 5 6 7 8 9 10 11 12 note: style: simple icons: false border_radius: 3 light_bg_offset: 0
使用方法一-不显示图标 基本语法 示例代码 simple样式使用效果示例 modern样式使用效果示例 flat样式使用效果示例 disabled样式使用效果示例 1 2 3 {% note [class] [no-icon] [style] %} Any content (support inline tags too.io). {% endnote %}
参数说明:
class，可选参数，为标识选择不同的颜色，可选参数有：default / primary / success / info / warning / danger
no-icon，可选参数，不显示图标
style，可选参数，可以设置callout的样式，可选参数有：simple/modern/flat/disabled
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 {% 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 %}
使用方法二-自定义图标 3.2.0 以上版本支
基本语法 示例代码 simple样式使用效果示例 modern样式使用效果示例 flat样式使用效果示例 disabled样式使用效果示例 1 2 3 {% note [color] [icon] [style] %} Any content (support inline tags too.io). {% endnote %}
参数说明:
color，可选参数，为标识选择不同的颜色，可选参数有：default / blue / pink / red / purple / orange / green
icon，可选参数，可配置自定义的icon图标，可以填入no-icon不显示图标，也可以填入fontawesome图标
style，可选参数，可以设置callout的样式，可选参数有：simple/modern/flat/disabled
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 {% note 'fab fa-cc-visa' simple %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' simple %} 2021 年快到了.... {% endnote %} {% note pink 'fas fa-car-crash' simple %} 小心开车 安全至上 {% endnote %} {% note red 'fas fa-fan' simple%} 这是三片呢？还是四片？ {% endnote %} {% note orange 'fas fa-battery-half' simple %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note purple 'far fa-hand-scissors' simple %} 剪刀石头布 {% endnote %} {% note green 'fab fa-internet-explorer' simple %} 前端最讨厌的浏览器 {% endnote %}
Gallery图库 相册图库形式 2.2.0以上提供
1 2 3 4 5 <div class ="gallery-group-main" > {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} </div >
参数说明：
name：图库名字
description：图库描述
link：连接到对应相册的地址
img-url：图库封面的地址
1 2 3 4 5 <div class="gallery-group-main"> {% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %} {% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %} {% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %} </div>
壁纸
收藏的一些壁纸
漫威
关于漫威的图片
OH MY GIRL
关于OH MY GIRL的图片
平铺相册形式 2.0.0 以上提供
1 2 3 {% gallery [lazyload],[rowHeight],[limit] %} markdown 图片格式 {% endgallery %}
参数说明：
lazyload，可选参数，点击按钮加载更多图片，可设置为true或false。默认值为False
rowHeight，可选参数，设置图片显示的高度。如果需要一行显示更多的图片，可以设置为更小的数字。默认值为 220
limit，可选参数，每次加载多少张图片，默认值为 10
1 2 3 4 5 6 7 8 9 10 {% gallery %} ! [] (https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg) ! [] (https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg) ! [] (https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg) ! [] (https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg) ! [] (https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg) ! [] (https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg) ! [] (https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg) ! [] (https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg) {% endgallery %}
[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]
加载更多 Tag 2.2.0 以上提供
请注意，tag-hide内的标签外挂content内都不建议有h 1 - h 6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。
如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。
Inline形式 1 {% hideInline content,display,bg,color %}
参数说明：
content，必填参数 ，设置文本内容
display，可选参数，设置点击按钮后显示的文字内容
bg，可选参数，设置按钮的背景颜色
color，可选参数，设置按钮文字的颜色
1 2 3 哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %} 门里站着一个人? {% hideInline 闪 %}
哪个英文字母最酷？ 查看答案
因为西装裤(C装酷) </span>
门里站着一个人? Click
闪 </span>
Block形式 1 2 3 {% hideBlock display,bg,color %} content {% endhideBlock %}
参数说明：
content，必填参数 ，设置文本内容
display，可选参数，设置点击按钮后显示的文字内容
bg，可选参数，设置按钮的背景颜色
color，可选参数，设置按钮文字的颜色
1 2 3 4 查看答案 {% hideBlock 查看答案 %} 傻子，怎么可能有答案 {% endhideBlock %}
Toggle形式 1 2 3 {% hideToggle display,bg,color %} content {% endhideToggle %}
参数说明：
content，必填参数 ，设置文本内容
display，可选参数，设置点击按钮后显示的文字内容
bg，可选参数，设置按钮的背景颜色
color，可选参数，设置按钮文字的颜色
1 2 3 4 5 6 7 8 9 10 {% hideToggle Butterfly安装方法 %} 在你的博客根目录里 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly 如果想要安装比较新的dev分支，可以 git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly {% endhideToggle %}
Mermaid 使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文档
基本配置 1 2 3 4 5 6 7 8 mermaid: enable: true theme: light: default dark: dark
使用方法 1 2 3 {% mermaid %} 内容 {% endmermaid %}
1 2 3 4 5 6 7 8 {% mermaid %} pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5 {% endmermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
Tabs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 基本语法示例: {% tabs Unique name, [index] %} <!-- tab [Tab caption] [@icon] --> Any content (support inline tags too). <!-- endtab --> {% endtabs %} 参数说明: Unique name : Unique name of tabs block tag without comma. Will be used in #id 's as prefix for each tab with their index numbers. If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes. Only for current url of post/page must be unique! [index] : Index number of active tab. If not specified, first tab (1) will be selected. If index is -1, no tab will be selected. It's will be something like spoiler. Optional parameter. [Tab caption] : Caption of current tab. If not caption specified, unique name with tab index suffix will be used as caption of tab. If not caption specified, but specified icon, caption will empty. Optional parameter. [@icon] : FontAwesome icon name (full-name, look like 'fas fa-font') Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon '. Optional parameter.
1 2 3 4 5 6 7 8 9 10 11 12 13 {% tabs test1 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %}
基本语法 代码示例 不同样式效果展示 不同位置效果展示 不同实心颜色效果展示 不同空心颜色效果展示 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 {% btn [url] , [text] , [icon] , [color] [style] [layout] [position] [size] %} 参数说明: [url] : 链接 [text] : 按钮文字 [icon] : [可选] 图标 [color] : [可选] 按钮背景顔色(默认style时） 按钮字体和边框顔色(outline时) default/blue/pink/red/purple/orange/green [style] : [可选] 按钮样式 默认实心 outline/留空 [layout] : [可选] 按钮佈局 默认为line block/留空 [position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边 center/right/留空 [size] : [可选] 按钮大小 larger/留空
1 2 3 4 5 This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,,outline %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
This is my website, click the button Butterfly Butterfly Butterfly Butterfly Butterfly
inlineImg-内联图片 1 2 3 4 5 {% inlineImg [src] [height] %} 参数说明: [src] : 图片链接 [height] ： 图片高度限制【可选】
1 2 3 4 5 6 你看我长得漂亮不 ! [] (https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png) 我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %}
你看我长得漂亮不
我觉得很漂亮
label-标签 参数说明：
text，必选参数
color，可选参数，设置背景颜色，默认为default ，可选值有default/blue/pink/red/purple/orange/green
1 2 臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。 宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。
臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。
timeline-时间线 1 2 3 4 5 6 7 8 {% timeline title,color %} <!-- timeline title --> xxxxx <!-- endtimeline --> <!-- timeline title --> xxxxx <!-- endtimeline --> {% endtimeline %}
参数说明：
title，设置时间线的标题
color，设置时间线的颜色，可选参数有default(留空) / blue / pink / red / purple / orange / green
1 2 3 4 5 {% timeline 2022 %} <!-- timeline 01-02 --> 这是测试页面 <!-- endtimeline --> {% endtimeline %}
flink-友链 1 2 3 4 {% flink %} xxxxxx {% endflink %}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 {% flink %} - class_name: 友情链接 class_ desc: 那些人，那些事 link_list: - name: JerryC link: https://jerryc.me/ avatar: https://jerryc.me/img/avatar.png descr: 今日事,今日毕 - name: Hexo link: https://hexo.io/zh-tw/ avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg descr: 快速、简单且强大的网志框架 - class_ name: 网站 class_desc: 值得推荐的网站 link_ list: - name: Youtube link: https://www.youtube.com/ avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png descr: 视频网站 - name: Weibo link: https://www.weibo.com/ avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png descr: 中国最大社交分享平台 - name: Twitter link: https://twitter.com/ avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png descr: 社交分享平台 {% endflink %}
abcjs-乐谱 没有找到这个配置项，不清楚是不是被删除了
基本配置 1 2 3 4 5 6 7 abcjs: enable: true per_page: true
使用方法 1 2 3 4 {% score %} 乐谱代码 {% endscore %}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 {% score %} X:1 T:alternate heads M:C L:1/8 U:n=!style=normal! K:C treble style=rhythm "Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |] %%text This translates to: [M:C] [K:style=normal] [A,EAce] [A,EAce] [A,EAce] [A,EAce] [A,EAce] 2 [A,EAce] > [A,EAce] | [DAdf] 2 [DAdf] / [DAdf] / [DAdf] [CEGce]4 | [A,EAce] 2 GA [A,EAce] GA |D [DAdf] / [DAdf] / D [DAdf] / [DAdf] / C [CEGce] / [CEGce] / C [CEGce] / [CEGce] / | [CEGce] 8 | [CEGce] 2 [CEGce] 2 [CEGce] 2 [CEGce] 2 |] GAB2 !style=harmonic! [gb] 4|GAB2 [K: style=harmonic] gbgb| [K: style=x] C/A,/ C/C/E C/zz2| w:Rock-y did-nt like that {% endscore %}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 {% score %} X:1 T:alternate heads M:C L:1/8 U:n=!style=normal! K:C treble style=rhythm "Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |] %%text This translates to: [M:C][K:style=normal] [A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |] GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb| [K: style=x] C/A,/ C/C/E C/zz2| w:Rock-y did-nt like that {% endscore %}
