一篇优秀的博客，除了有精彩内容可以品鉴，一些简单精美的图标样式同样可以为我们的博客增色几分。

引用 node

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

icons和light_bg_offset只对方法一生效

Note 标签外挂有两种用法

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）		 
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）

例：

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 %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
{% note no-icon %}{% endnote %}
{% note blue no-icon %}{% endnote %}
{% note pink no-icon %}{% endnote %}
{% note red no-icon %}{% endnote %}
{% note orange no-icon %}{% endnote %}
{% note purple no-icon %}{% endnote %}
{% note green no-icon %}{% endnote %}

例：

这是Hoveco的博客

这是Hoveco的博客

时间轴 Timeline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
MARKDOWN
{% timeline 2016,pink %}
<!-- timeline 09-01 -->
步入大学生涯
<!-- endtimeline -->

{% endtimeline %}

{% timeline 2019,purple %}
<!-- timeline 06-01 -->
进入社会
<!-- endtimeline -->

{% endtimeline %}

{% timeline 2023,green %}
<!-- timeline 08-01 -->
博客搭建成功
<!-- endtimeline -->

{% endtimeline %}

2016

09-01

步入大学生涯

2019

06-01

进入社会

2023

08-01

博客搭建成功

文字隐藏 tag-hide

如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。

( display 不能包含英文逗号，可用‚

Inline标签（行内标签）

inline 在文本里面添加按钮隐藏内容，只限文字

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
参数 解释
content 文本内容
display 按钮显示的文字(可选)
bg 按钮的背景颜色(可选)
color 按钮文字的颜色(可选)

例：

1
2
3
800壮士为什么只剩下300人了? {% hideInline 因为伍佰去唱歌了,查看答案,#FF7242,#fff %}

冬瓜、黄瓜、西瓜、南瓜都能吃，什么瓜不能吃？ {% hideInline 傻瓜 %}

800壮士为什么只剩下300人了? 因为伍佰去唱歌了

冬瓜、黄瓜、西瓜、南瓜都能吃，什么瓜不能吃？ 傻瓜

Block标签（块标签）

block独立的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 %}

例：

1
2
3
4
{% hideToggle 标题文字 %}
请输入文章内容

{% endhideToggle %}
你知道《滕王阁序》原文吗？

豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。

时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。

披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。

遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？

嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！

勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？

呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：

滕王高阁临江渚，佩玉鸣鸾罢歌舞。

画栋朝飞南浦云，珠帘暮卷西山雨。

闲云潭影日悠悠，物换星移几度秋。

阁中帝子今何在？槛外长江空自流。

分栏 Tabs

可以对自己的文章进行分栏查看

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs tests %}
<!-- tab -->
**第一个分栏**
<!-- endtab -->

<!-- tab -->
**第二个分栏**
<!-- endtab -->

<!-- tab -->
**第三个分栏**
<!-- endtab -->
{% endtabs %}

第一个分栏

第二个分栏

第三个分栏

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs tests %}
<!-- tab 李白 -->
**第一个分栏内容**
<!-- endtab -->

<!-- tab 杜甫 -->
**第二个分栏内容**
<!-- endtab -->

<!-- tab 王维 -->
**第三个分栏内容**
<!-- endtab -->
{% endtabs %}

李白（701年2月28日—762年12月）， 字太白，号青莲居士， 祖籍陇西成纪（今甘肃省秦安县），出生于蜀郡绵州昌隆县（一说出生于西域碎叶）。 唐朝伟大的浪漫主义诗人，凉武昭王李暠九世孙。
为人爽朗大方，乐于交友，爱好饮酒作诗，名列“酒中八仙” 。曾经得到唐玄宗李隆基赏识，担任翰林供奉， 赐金放还，游历全国，先后迎娶宰相许圉师、宗楚客的孙女。唐肃宗即位后，卷入永王之乱，流放夜郎，辗转到达当涂县令李阳冰家。上元二年，去世，时年六十二。
著有《李太白集》 ，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《早发白帝城》等。 李白所作词赋，就其开创意义及艺术成就而言，享有极为崇高的地位，后世誉为“诗仙”，与诗圣杜甫并称“李杜”。

杜甫（712年2月12日 —770年），字子美，自号少陵野老，唐代伟大的现实主义诗人，祖籍襄阳（今属湖北），自其曾祖时迁居巩县（今河南巩义西南）。 与李白合称“李杜”。为了与另两位诗人李商隐与杜牧即“小李杜”区分，杜甫与李白又合称“大李杜”，杜甫也常被称为“老杜”。后世称其杜拾遗、杜工部，也称他杜少陵、杜草堂。
杜甫少年时代曾先后游历吴越和齐赵，其间曾赴洛阳应举不第。三十五岁以后，先在长安应试，落第；后来向皇帝献赋，向贵人投赠。官场不得志，目睹了唐朝上层社会的奢靡与社会危机。天宝十四载（755年），安史之乱爆发，潼关失守，杜甫先后辗转多地。乾元二年（759年）杜甫弃官入川，虽然躲避了战乱，生活相对安定，但仍然心系苍生，胸怀国事。杜甫创作了《登高》《春望》《北征》以及“三吏”、“三别”等名作。虽然杜甫是个现实主义诗人，但他也有狂放不羁的一面，从其名作《饮中八仙歌》不难看出杜甫的豪气干云。大历五年（770年）冬，病逝，享年五十九岁。
杜甫在中国古典诗歌中的影响非常深远，被后世尊称为“诗圣”，他的诗被称为“诗史”。杜甫的思想核心是仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。

王维（693年或694年或701年－761年）， 字摩诘，号摩诘居士，河东蒲州（今山西运城）人，祖籍山西祁县。唐朝诗人、画家。
王维出身河东王氏，于开元十九年（731年）状元及第，历官右拾遗、监察御史、河西节度使判官。唐玄宗天宝年间，王维拜吏部郎中、给事中。安禄山攻陷长安时，被迫受伪职。长安收复后，王维被责授太子中允，后官至尚书右丞。 王维于上元二年（761年）七月去世，享年六十一岁。
王维不仅参禅悟理，学庄信道，还精通诗、书、画、音乐等，以诗名盛于开元、天宝年间，尤长五言，多咏山水田园，与孟浩然合称“王孟”，有“诗佛”之称。其书画特臻其妙，后人推其为“南宗山水画之祖”。苏轼评价其曰：“味摩诘之诗，诗中有画；观摩诘之画，画中有诗。”其亦存诗400余首，代表作有《相思》《山居秋暝》等，还著有《王右丞集》《画学秘诀》等作品。

文字高亮颜色 label

高亮所需的文字,方便标记重要内容

1
{% label text color %}
参数 解释
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 %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

臣亮言：先帝创业未半，而中道崩殂。今天下三分，益州疲敝，此诚危急存亡之秋也！然侍衞之臣，不懈于内；忠志之士，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸、犯科，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。
；不宜偏私，使内外异法也。

图标库 Icon

Butterfly支持 font-awesome v6 图标.

相关地址是：图标库网站

可以使用预置图标网站里面的图标进行网站图标的更新和替换，也可以使用第三方的图标网站上面的图标进行个性化图标的替换和使用，自定义图标。