Hexo tags 用法

发表于 更新于 分类于 ，

通过Tags标签实现多样式切换

1
2
3
{% cq %}
文字居中
{% endcq %}

文字居中

note

总览

1
2
3
4
5
6
7
note.js
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}
[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.
All parameters are optional.

具体例子

1
2
3
4
{% note %}
<b>Header</b>
(without define class style)
{% endnote %}

Header
(without define class style)

1
2
3
4
{% note default %}
### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}

Default Header

Welcome to Hexo!

1
2
3
4
{% note primary %}
### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Primary Header

Welcome to Hexo!

1
2
3
4
{% note info %}
### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Info Header

Welcome to Hexo!

1
2
3
4
{% note success %}
### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Success Header

Welcome to Hexo!

1
2
3
4
{% note warning %}
### Warning Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Warning Header

Welcome to Hexo!

1
2
3
4
{% note danger %}
### Danger Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Danger Header

Welcome to Hexo!

1
2
3
4
5
{% note info no-icon %}
### No icon note
Note **without** icon: `note info no-icon`
note info, note info, note info
{% endnote %}

No icon note

Note without icon: note info no-icon
note info, note info, note info

tabs

总览

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 (without 'fa-' at the begining).
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

例子

默认展开

1
2
3
4
5
6
7
8
9
10
11
{% tabs First unique name %}    #如果写 First unique name 后面tag可以不写aaa, etc
<!-- tab aaa -->            
**This is Tab 1.**
<!-- endtab -->
<!-- tab bbb -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab ccc -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

默认不展开

1
2
3
4
5
6
7
8
9
10
11
{% tabs Third unique name, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

mermaid

总览

1
2
3
4
mermaid.js
{% mermaid type %}
{% endmermaid %}
type : type of the mermaid chart, visit https://github.com/knsv/mermaid for more information.

label

总览

1
2
3
4
5
{% label [class]@Text %}
[class] : default | primary | success | info | warning | danger.
          '@Text' can be specified with or without space
          E.g. 'success @text' similar to 'success@text'.
          If not specified, default class will be selected.

例子

1
2
3
4
5
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua.

Ut enim *{% label warning @ad %}* minim veniam, quis **{% label danger@nostrud %}** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~{% label default @velit %}~~ <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

botton

总览

1
2
3
4
5
6
7
8
9
10
11
12
button.js
{% button url, text, icon [class], [title] %}
<!-- Tag Alias -->
{% btn url, text, icon [class], [title] %}

url     : Absolute or relative path to URL.
text    : Button text. Required if no icon specified.
icon    : FontAwesome icon name (without 'fa-' at the begining). Required if no text specified.
[class] : FontAwesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
          Optional parameter.
[title] : Tooltip at mouseover.
          Optional parameter.

group-pictures

总览

1
2
3
4
5
group-pictures.js
{% grouppicture [group]-[layout] %}{% endgrouppicture %}
{% gp [group]-[layout] %}{% endgp %}
[group]  : Total number of pictures to add in the group.
[layout] : Default picture under the group to show.

video

1
{% video /path/to/your/video.mp4 %}

group pic

1
2
3
4
5
group-pictures.js
{% grouppicture [group]-[layout] %}{% endgrouppicture %}
{% gp [group]-[layout] %}{% endgp %}
[group]  : Total number of pictures to add in the group.
[layout] : Default picture under the group to show.