Butterfly博客主题搭建系列:标签外挂教程 | 字数总计: 4.8k | 阅读时长: 22分钟 | 阅读量:
标签外挂(Tag Plugins) 标签外挂是Hexo独有的功能,并不是标准的Markdown格式。
以下的写法,只适用于Butterfly主题,用在其它主题上不会有效果,甚至可能会报错。使用前请留意
标签外挂虽然能为主题带来一些额外的功能和UI方面的强化,但是,标签外挂也有明显的限制,使用时请留意。
Note (Bootstrap Callout) 固定icon通用设置 自定义icon通用设置 全局设置 语法:
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
【可选】不显示 icon
style
【可选】可以覆盖配置中的 style (simple/modern/flat/disabled)
simple样式 modern样式 flat样式 disabled样式 no-icon样式
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 %}
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 modern %} 默认 提示块标签 {% endnote %} {% note default modern %} default 提示块标签 {% endnote %} {% note primary modern %} primary 提示块标签 {% endnote %} {% note success modern %} success 提示块标签 {% endnote %} {% note info modern %} info 提示块标籤 {% endnote %} {% note warning modern %} warning 提示块标签 {% endnote %} {% note danger modern %} danger 提示块标签 {% endnote %}
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 flat %} 默认 提示块标签 {% endnote %} {% note default flat %} default 提示块标签 {% endnote %} {% note primary flat %} primary 提示块标签 {% endnote %} {% note success flat %} success 提示块标签 {% endnote %} {% note info flat %} info 提示块标签 {% endnote %} {% note warning flat %} warning 提示块标签 {% endnote %} {% note danger flat %} danger 提示块标签 {% endnote %}
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 disabled %} 默认 提示块标签 {% endnote %} {% note default disabled %} default 提示块标签 {% endnote %} {% note primary disabled %} primary 提示块标签 {% endnote %} {% note success disabled %} success 提示块标签 {% endnote %} {% note info disabled %} info 提示块标签 {% endnote %} {% note warning disabled %} warning 提示块标签 {% endnote %} {% note danger disabled %} danger 提示块标签 {% endnote %}
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 disabled %} 默认 提示块标签 {% endnote %} {% note default no-icon %} default 提示块标签 {% endnote %} {% note primary no-icon %} primary 提示块标签 {% endnote %} {% note success no-icon %} success 提示块标签 {% endnote %} {% note info no-icon %} info 提示块标签 {% endnote %} {% note warning no-icon %} warning 提示块标签 {% endnote %} {% note danger no-icon %} danger 提示块标签 {% endnote %}
note 语法:
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 (只支持 fontawesome 图标, 也可以配置 no-icon )
style
【可选】可以覆盖配置中的 style (simple/modern/flat/disabled)
simple样式 modern样式 flat样式 disabled样式 no-icon样式
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 %}
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' modern %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' modern %} 2021年快到了.... {% endnote %} {% note pink 'fas fa-car-crash' modern %} 小心开车 安全至上 {% endnote %} {% note red 'fas fa-fan' modern %} 这是三片呢?还是四片? {% endnote %} {% note orange 'fas fa-battery-half' modern %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note purple 'far fa-hand-scissors' modern %} 剪刀石头布 {% endnote %} {% note green 'fab fa-internet-explorer' modern %} 前端最讨厌的浏览器 {% endnote %}
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' flat %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' flat %} 2021年快到了.... {% endnote %} {% note pink 'fas fa-car-crash' flat %} 小心开车 安全至上 {% endnote %} {% note red 'fas fa-fan' flat %} 这是三片呢?还是四片? {% endnote %} {% note orange 'fas fa-battery-half' flat %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note purple 'far fa-hand-scissors' flat %} 剪刀石头布 {% endnote %} {% note green 'fab fa-internet-explorer' flat %} 前端最讨厌的浏览器 {% endnote %}
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' disabled %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue 'fas fa-bullhorn' disabled %} 2021年快到了.... {% endnote %} {% note pink 'fas fa-car-crash' disabled %} 小心开车 安全至上 {% endnote %} {% note red 'fas fa-fan' disabled %} 这是三片呢?还是四片? {% endnote %} {% note orange 'fas fa-battery-half' disabled %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note purple 'far fa-hand-scissors' disabled %} 剪刀石头布 {% endnote %} {% note green 'fab fa-internet-explorer' disabled %} 前端最讨厌的浏览器 {% endnote %}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 {% note no-icon %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note blue no-icon %} 2021年快到了.... {% endnote %} {% note pink no-icon %} 小心开车 安全至上 {% endnote %} {% note red no-icon %} 这是三片呢?还是四片? {% endnote %} {% note orange no-icon %} 你是刷 Visa 还是 UnionPay {% endnote %} {% note purple no-icon %} 剪刀石头布 {% endnote %} {% note green no-icon %} 前端最讨厌的浏览器 {% endnote %}
移植于next主题,并进行修改。修改_config.butterfly.yml
:
1 2 3 4 5 6 7 8 9 10 11 12 13 note: style: flat icons: true border_radius: 3 light_bg_offset: 0
icons
和light_bg_offset
只对方法一生效
Gallery相册图库 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 <div class ="gallery-group-main" > {% galleryGroup '壁纸' '收藏的一些壁纸' '/gallery/wallpaper/' https://api.aqcoder.cn/today %} </div >
壁纸
收藏的一些壁纸
Gallery相册 区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版,书写也更加方便,与markdown格式一样。可根据需要插入到相应的md。
1 2 3 {% gallery %} markdown 图片格式 {% endgallery %}
1 2 3 4 5 6 7 8 9 10 {% gallery %} ![](https://api.aqcoder.cn/random?w=1024&h=768 ) ![](https://api.aqcoder.cn/random?w=1024&h=768 ) ![](https://api.aqcoder.cn/random?w=1024&h=768 ) ![](https://api.aqcoder.cn/random?w=1024&h=768 ) ![](https://api.aqcoder.cn/random?w=1024&h=768 ) ![](https://api.aqcoder.cn/random?w=1024&h=768 ) ![](https://api.aqcoder.cn/random?w=1024&h=768 ) ![](https://api.aqcoder.cn/random?w=1024&h=768 ) {% endgallery %}
Tabs 移植于next主题
使用方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 {% 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.
例子 - 自定义Tab名 + 只有icon + icon和Tab名
1 2 3 4 5 6 7 8 9 10 11 12 13 {% tabs test4 %} <!-- tab 第一个Tab --> **tab名字为第一个Tab** <!-- endtab --> <!-- tab @fab fa-apple-pay --> **只有图标 没有Tab名字** <!-- endtab --> <!-- tab 炸弹@fas fa-bomb --> **名字+icon** <!-- endtab --> {% endtabs %}
mermaid 使用mermaid标签可以绘制Flowchart(流程图)、Sequence diagram(时序图 )、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和Pie Chart(圆形图),具体可以查看mermaid文档
修改_config.butterfly.yml
:
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
tag-hide 请注意,tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来,而且当滚动屏幕时,如果隐藏内容没有显示出来,会导致Toc的滚动出现异常。
如果你需要展示的内容太多,可以把它隐藏在收缩框里,需要时再把它展开。
( display 不能包含英文逗号,可用‚
)
1 2 3 {% hideToggle display,bg,color %} content {% endhideToggle %}
1 2 3 4 5 6 {% 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 %}
Butterfly安装方法 inline
在文本里面添加按钮隐藏内容,只限文字
( content不能包含英文逗号,可用‚
)
1 {% hideInline content,display,bg,color %}
content: 文本内容
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)
1 2 3 哪个英文字母最酷? {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %} 门里站着一个人? {% hideInline 闪 %}
哪个英文字母最酷? 查看答案 因为西装裤(C装酷)
门里站着一个人? Click 闪
block
独立的block隐藏内容,可以隐藏很多内容,包括图片,代码块等等
( display 不能包含英文逗号,可用‚
)
1 2 3 {% hideBlock display,bg,color %} content {% endhideBlock %}
content: 文本内容
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)
1 2 3 4 查看答案 {% hideBlock 查看答案 %} 傻子,怎么可能有答案 {% endhideBlock %}
查看答案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 {% 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://blog.aqcoder.cn/',aqcoder %} This is my website, click the button {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right %} This is my website, click the button {% btn 'https://blog.aqcoder.cn/',aqcoder,,outline %} This is my website, click the button {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,outline %} This is my website, click the button {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,larger %}
This is my website, click the button aqcoder This is my website, click the button aqcoder This is my website, click the button aqcoder This is my website, click the button aqcoder This is my website, click the button aqcoder
1 2 3 {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,block %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,block center larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,block right outline larger %}
aqcoder aqcoder aqcoder
1 2 3 4 5 6 7 {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,blue larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,pink larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,red larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,purple larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,orange larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,green larger %}
aqcoder aqcoder aqcoder aqcoder aqcoder aqcoder aqcoder
1 2 3 4 5 6 7 8 9 <div class ="btn-center" > {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,outline larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,outline blue larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,outline pink larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,outline red larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,outline purple larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,outline orange larger %} {% btn 'https://blog.aqcoder.cn/',aqcoder,far fa-hand-point-right,outline green larger %} </div >
inlineImg 主题中的图片都是默认以块级元素
显示,如果你想以内联元素
显示,可以使用这个标签外挂。
1 2 3 4 {% inlineImg [src] [height] %} [src] : 图片链接 [height] : 图片高度限制【可选】
必应每日壁纸
我觉得很好看
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 %}
text:标题/时间线
color:timeline 颜色,default(留空) (blue / pink / red / purple / orange / green)
留空 blue pink red purple orange green 1 2 3 4 5 {% timeline 2022 %} <!-- timeline 01-02 --> 这是测试页面 <!-- endtimeline --> {% endtimeline %}
1 2 3 4 5 {% timeline 2022,blue %} <!-- timeline 01-02 --> 这是测试页面 <!-- endtimeline --> {% endtimeline %}
1 2 3 4 5 {% timeline 2022,pink %} <!-- timeline 01-02 --> 这是测试页面 <!-- endtimeline --> {% endtimeline %}
1 2 3 4 5 {% timeline 2022,red%} <!-- timeline 01-02 --> 这是测试页面 <!-- endtimeline --> {% endtimeline %}
1 2 3 4 5 {% timeline 2022,purple%} <!-- timeline 01-02 --> 这是测试页面 <!-- endtimeline --> {% endtimeline %}
1 2 3 4 5 {% timeline 2022,orange%} <!-- timeline 01-02 --> 这是测试页面 <!-- endtimeline --> {% endtimeline %}
1 2 3 4 5 {% timeline 2022,green%} <!-- timeline 01-02 --> 这是测试页面 <!-- endtimeline --> {% endtimeline %}
flink 可在任何界面插入类似友情链接列表效果
内容格式与友情链接界面一样,支持 yml 格式
1 2 3 {% 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 {% flink %} - class_name: 友情链接 class_ desc: 博主 link_list: - name: aqcoder link: https://blog.aqcoder.cn avatar: https://blog.aqcoder.cn/img/avatar.png descr: 分享知识,认识世界 - class_ name: 特别鸣谢 class_desc: 博客框架及主题 link_ list: - name: Hexo link: https://hexo.io/zh-tw/ avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg descr: 快速、簡單且強大的網誌框架 - name: Butterfly link: https://butterfly.js.org/ avatar: https://butterfly.js.org/img/avatar.png descr: A Simple and Card UI Design theme for Hexo {% endflink %}
参考文章 標籤外掛(Tag-Plugins)