第二部分，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>

Emoji 图标

例如

  • 常见 💡⭐🐞🚀🌍🚁⚡️🌌
  • 书本 📔📕📗📘📙📒📃📜📚📖🧾
  • 动植物 🌲🌵🐳🐬🐍🐣
  • 人 🤺✍👌👈👉👆👇
  • 其他 ⚠🚩💬🔨⏰💎

提供一个查询 Emoji 的网站：https://www.emojiall.com/。

一些常用emoji 

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
✅✔️➕❌⭕️🟡
📌📍🎈🚩
⏳🌀⏰💤
⚠️🚫🚧
🔍
🔧🔨🛠️⚙️
🔗
🤖
⚡️
🧪
🚀🎉
💥🔥
✨💡⭐
🧠
🐛🪲🐞
🎯
🌱☘️🐣
🔖🏷️
🧬🧩
📖📚📕📗📘📙📒
📝📑📄📃🧾🗒️📋📜📰
✍️✏️
👈👉👆👇
🗂️🧰📦
🔐

音乐

可以在文章中嵌入一个网易云播放器（不能是会员歌曲）

代码如下，可以去网易云网页版复制外链播放器。

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1488737309&auto=1&height=66"></iframe>

视频

可以嵌入 b 站的视频播放

代码如下，可以去 b 站分享中选择代码。

1
<iframe src="//player.bilibili.com/player.html?aid=938539117&bvid=BV1JT4y1r74p&cid=587958621&page=10" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

在线文档

对于网上的 PDF 文档等，直接使用 URL，例如：pdf-test，浏览器会直接缓存并在新页面打开它，对于手机端和 iPad 也是一样。

也可以在 GitHub 存放文档，使用 URL，例如：README，注意如果希望在 Github 网站打开，是仓库名+blob+分支名+文件名，如果以纯文件的形式打开，是仓库名+raw+分支名+文件名。

自定义样式 CSS

例如源代码

1
<span id="inline-green"> 这里输入文字 </span>

需要在 styles.styl 添加对应的内容，才能在渲染时呈现自定义样式(与具体的主题有关)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 颜色块-黄
span#inline-yellow {
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 100%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0;
  background-color: #f0ad4e;
}