第二部分，hexo 和 butterfly 主题提供的一些样式，这里的部分内容在其它主题中可能不支持，在博客文件中尽量避免使用。

博客内的引用

hexo 提供的引用语法为

1
{% post_link my-first-blog %}

例如这是第一篇测试博客：hexo测试1——markdown基础语法。

这种语法的好处是：不基于 URL 或者文章标题，而是基于文章的 markdown 文件名（其实是相对于_posts文件夹的相对路径，不含文件后缀），在生成时会自动替换成文章当前的标题。

Tag

hexo 支持一些 Tag，效果如下，具体样式可以在主题配置文件中修改。

default Tag

primary Tag

success Tag

info Tag

warning Tag

danger Tag

语法如下，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default Tag
{% endnote %}

{% note primary %}
primary Tag
{% endnote %}

{% note success %}
success Tag
{% endnote %}

{% note info %}
info Tag
{% endnote %}

{% note warning %}
warning Tag
{% endnote %}

{% note danger %}
danger Tag
{% endnote %}

自定义 Tag

hexo 的 butterfly 主题支持在 Tag 中自定义颜色和图标，语法为

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

可选的选项包括

  • color: default / blue / pink / red / purple / orange / green
  • icon: fontawesome 图标
  • style: simple / modern / flat / disabled

默认情况会加上一个图标，可以使用 no-icon 明确没有图标，也可以在配置文件中设置默认禁用图标。

例如

你是扫微信还是支付宝

2023 年快到了....

小心行驶

这是三片呢？还是四片？

电池图标

剪刀石头布

老古董 IE 浏览器

源代码为

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 %}
你是扫微信还是支付宝
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2023年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心行驶
{% endnote %}
{% note red 'fas fa-fan' modern%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
电池图标
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}
老古董IE浏览器
{% endnote %}

选项卡

支持简单的选项卡效果，可以切换内容，效果如下：

选项卡 1

选项卡 2

选项卡 3 名字为 A

代码如下

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,1 %} 名字为tab，默认在第1个选项卡，如果是-1则隐藏
<!-- tab -->
**选项卡 1**
<!-- endtab -->
<!-- tab -->
**选项卡 2**
<!-- endtab -->
<!-- tab A -->
**选项卡 3** 名字为A
<!-- endtab -->
{% endtabs %}

mermaid

butterfly 主题自带了对 mermaid 的支持，包括流程图和常见的统计图等。

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 %}
1
2
3
4
5
6
7
8
{% mermaid %}
graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]
{% endmermaid %}

label

butterfly 提供的可以实现词语的颜色等简单样式

1
{% label text color %}

其中的color 可选的值包括：default / blue / pink / red / purple / orange / green，默认值是灰色的。

例如：

臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍内之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。

button

按钮样式，语法比较复杂

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/留空

例如

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}

或者这种

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
</div>