Markdown语法

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档.

具体语法可以参考官方教程：Markdown 语法。

Front-matter

Front-matter 是 markdown 文件最上方以 —- 分隔的区域，用于保存文章的信息，详情请看Butterfly 安装文档(二) 主题页面。
一般情况下，我们只需要关注title、date、tags、categories这4个参数

  • title：文章标题
  • date：写作时间，还有一个相关参数是updated，但需要加，编译器会把md文件的修改时间作为更新时间
  • tags：文章标签，语法为tags: [A,B]，这样就为个文章添加了A，B2个标签
  • categories：文章分类，语法为categories: [A,B，这表示本文属于A分类下的B子类
    另外还有一个参数 sticky ，语法为 sticky: n ，它可以设定置顶文章，而且优先级为 n。

标签外挂

标签外挂是 Hexo 独有的功能，并不是标准的 Markdown 格式。

以下的写法，只适用于 Butterfly 主题，用在其它主题上不会有效果，甚至可能会报错。使用前请留意

本人仅记录自己常用的几个，在官方文档中有更为详细的信息。

Tabs(选项卡)

移植于 next 主题

  • 使用方法:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    {% tabs Unique name, [index] %}

    <!-- tab [Tab caption] [@icon] -->

    Any content (support inline tags too).

    <!-- endtab -->

    {% endtabs %}
参数 描述
Unique name tabs 区块标签的唯一名称，不包含逗号。将用于每个选项卡的 #id 前缀，并附加其索引号。若名称中有空格，生成 #id 时会将空格替换为短横线。仅对当前文章/页面的 URL 必须唯一！
[index] 【可选】活动选项卡的索引号。如果未指定，将选择第一个选项卡（1）。如果索引为 -1，则不会选择任何选项卡，类似于折叠内容。可选参数。
[Tab caption] 当前选项卡的标题。如果未指定标题，将使用唯一名称和选项卡索引后缀作为选项卡标题。如果未指定标题，但指定了图标，标题将为空。
[@icon] 【可选】FontAwesome 图标名称（全名，如 ‘fas fa-font’）。可以有或没有空格；例如 ‘Tab caption @icon’ 与 ‘Tab caption@icon’ 类似。
  • 示例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    {% tabs test %}

    <!-- tab 第一个Tab -->

    **tab 名字为第一个 Tab**

    <!-- endtab -->

    <!-- tab @fab fa-apple-pay -->

    **只有图标 没有 Tab 名字**

    <!-- endtab -->

    <!-- tab 炸弹@fas fa-bomb -->

    **名字+icon**

    <!-- endtab -->

    {% endtabs %}

tab 名字为第一个 Tab

只有图标 没有 Tab 名字

名字+icon

Note (Bootstrap Callout)

移植于 next 主题，并进行修改。

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
名称 解释
style 【可选】标签样式（simple/modern/flat/disabled）
icons 【可选】是否显示 icon
border_radius 【可选】边框圆角
light_bg_offset 【可选】背景色偏移量

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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

剪刀石头布

前端最讨厌的浏览器

Tag-hide

2.2.0 以上提供
请注意，tag-hide 内的标签外挂 content 内都不建议有 h1 - h6 等标题。因为 Toc 会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致 Toc 的滚动出现异常。

inline 在文本里面添加按钮隐藏内容，只限文字
( content 不能包含英文逗号，可用&sbquo;)

1
{% hideInline content,display,bg,color %}
参数 解释
content 文本内容
display 【可选】按钮显示的文本
bg 【可选】按钮对背景颜色
color 【可选】按钮文字的颜色 
1
2
哪个英文字母最酷?{% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}
门里站着一个人?{% hideInline 闪 %}

哪个英文字母最酷?因为西装裤(C装酷)</span>
门里站着一个人?闪</span>

block独立的 block 隐藏内容，可以隐藏很多内容，包括图片、代码块等等
( display 不能包含英文逗号，可用&sbquo;)

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
参数 解释
content 文本内容
display 【可选】按钮显示的文本
bg 【可选】按钮的背景颜色
color 【可选】按钮文字的颜色 
1
2
3
4
查看答案
{% hideBlock 查看答案 %}
傻子，怎么可能有答案
{% endhideBlock %}

查看答案

傻子，怎么可能有答案

2.3.0 以上支持


如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。
( display 不能包含英文逗号，可用&sbquo;)

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}
参数 解释
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 %}
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