hexo theme next test

Next 主题各类标签用法总汇

Next主题很不错,集成了很多东西,只是有时记不住,今天把一些特殊用法收集起来,备用。

Note tag test

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* note.js | global hexo script.
*
* ATTENTION! No need to write this tag in 1 line if u don't want see probally bugs.
*
* Usage:
*
* {% note [class] %}
* Any content (support inline tags too).任何内容(支持内联标签)。
* {% endnote %}
*
* [class] : default | primary | success | info | warning | danger.
* May be not defined.
*/
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 default %}
任何内容(支持内联标签)。default
{% endnote %}

{% note primary %}
任何内容(支持内联标签)。primary
{% endnote %}

{% note success %}
任何内容(支持内联标签)。success
{% endnote %}

{% note info %}
任何内容(支持内联标签)。info
{% endnote %}

{% note warning %}
任何内容(支持内联标签)。warning
{% endnote %}

{% note danger %}
任何内容(支持内联标签)。danger
{% endnote %}

{% note danger no-icon%}
### 任何内容(支持内联标签)。danger
{% endnote %}

如果只是临时需要去掉前边图标,可以使用 no-icon 参数,如果内容使用 ### 可以显示带颜色的字符

任何内容(支持内联标签)。default

任何内容(支持内联标签)。primary

任何内容(支持内联标签)。success

任何内容(支持内联标签)。info

任何内容(支持内联标签)。warning

任何内容(支持内联标签)。danger

任何内容(支持内联标签)。success

Label tag test

1
2
3
4
5
6
7
8
9
10
/**
* label.js | global hexo script.
*
* Usage:
*
* {% label [class] @Content %}
*
* [class] : default | primary | success | info | warning | danger.
* If not defined, default class will be selected.
*/
1
2
3
4
5
人生若只如{% label default @初见 %},何事秋风悲画扇。—— 纳兰性德《{% label primary @木兰词 %}·拟古决绝词柬友》
曾经{% label success @沧海 %}难为水,除却巫山不是云。 —— 元稹《{% label info @离思五首·其四 %}
明月几时有?{% label warning @把酒问青天%}。 —— {% label danger @苏轼%}《水调歌头·丙辰中秋》
*{% label success @恰同学少年%}*,风华正茂。 —— **{% label primary @毛泽东%}**《沁园春·长沙》
夜来风雨声,~~{% label info @花落知多少%}~~。 —— 孟浩然<mark>《春晓》</mark>

人生若只如初见,何事秋风悲画扇。—— 纳兰性德《木兰词·拟古决绝词柬友》
曾经沧海难为水,除却巫山不是云。 —— 元稹《离思五首·其四
明月几时有?把酒问青天。 —— 苏轼《水调歌头·丙辰中秋》
*恰同学少年*,风华正茂。 —— **毛泽东**《沁园春·长沙》
夜来风雨声,花落知多少。 —— 孟浩然《春晓》

Button tag test

1
2
Usage: {% button /path/to/url/, text, icon [class], title %}
Alias: {% btn /path/to/url/, text, icon [class], title %}

Button with text

1
{% button #, 量子 %}
量子
1
{% btn #, 量子 %}{% btn #, 郧西 & 量子,, 提示内容 %}
量子郧西 & 量子

Button with icon

1
2
3
<p>{% btn #,, home fa-5x %}
{% btn #,, home fa-4x %}
{% btn #,, home fa-3x %}{% btn #,, home fa-2x %}{% btn #,, home fa-lg %}{% btn #,, home %}</p>

fa-lg相对原图标放大33%,刚好合适。

Button with text and icon

1
{% btn #, 郧西 & 量子, home %}{% btn #, 郧西 & 量子 (固定宽度), home fa-fw %}
郧西 & 量子郧西 & 量子 (固定宽度)

使用 fa-fw 来设置图标在一个固定宽度内,主要用于不同宽度图标无法对齐的情况,尤其在列表或导航时起到重要作用。

1
{% btn #, 郧西 & 量子, home fa-fw fa-lg %}{% btn #, 郧西 & 量子 & 更多, home fa-fw fa-lg, 提示内容 %}
郧西 & 量子郧西 & 量子 & 更多

Button margin

1
2
3
<div class="text-center"><span>{% btn #,, header %}{% btn #,, edge %}{% btn #,, times %}{% btn #,, circle-o %}</span>
<span>{% btn #,, italic %}{% btn #,, scribd %}</span>
<span>{% btn #,, google %}{% btn #,, chrome %}{% btn #,, opera %}{% btn #,, diamond fa-rotate-270 %}</span></div>
1
<div class="text-center">{% btn #, Almost, adn fa-fw fa-lg %} {% btn #, Over, terminal fa-fw fa-lg %}</div>
1
2
3
<div class="text-right">
{% btn #, Test is finished., check fa-fw fa-lg, Button tag test is finished. %}
</div>

Tab tag test

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
/**
* tabs.js | global hexo script.
*
* Usage:
*
* {% 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 defined, first tab (1) will be selected.
* If index is -1, no tab will be selected. It's will be something like spoiler.
* May be not defined.
* [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.
* May be not defined.
* [icon] : Font awesome icon.
* May be not defined.
*/

Tab tag simple sample

1
2
3
4
5
6
7
8
9
10
11
{% tabs First unique name %}
<!-- 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.

Tab tag with 3rd tab selected

指定默认显示第三个

1
2
3
4
5
6
7
8
9
10
11
{% tabs Second unique name, 3 %}
<!-- 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.

Tab tag with no tab selected

如果index为-1,则不会选择任何选项卡

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.

Tab tag with custom labels

自定义选项卡名字

1
2
3
4
5
6
7
8
9
10
11
{% tabs Fourth unique name %}
<!-- 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.

Tab tag with icons only

用 icons 代替选项卡名字

1
2
3
4
5
6
7
8
9
10
11
{% tabs Fifth unique name %}
<!-- tab @text-width -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab @amazon -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab @bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Tab tag with icons and labels

icons 和自定义文本定义选项卡名字

1
2
3
4
5
6
7
8
9
10
11
{% tabs Sixth unique name %}
<!-- tab 美食@text-width -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab 旅游@amazon -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab 美图@bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Tab tag with other tags

综合使用

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
28
29
30
31
32
33
34
35
36
37
38
39
{% tabs Tags %}
<!-- tab 列表、代码@text-width-->
This is Tab 1.

1. One
2. Two
3. Three

Tabbed code block:

print('hello world')

{% code %}
code block tag
code block tag
{% endcode %}

{% note default %}
Note default tag.
{% endnote %}
<!-- endtab -->
<!-- tab 引用、序列@amazon-->
This is Tab 2.

- Five
- Six
- Seven

{% note primary %}
任何内容(支持内联标签)。
{% endnote %}
<!-- endtab -->
<!-- tab 片断样式@bold-->
This is Tab 3.
{% note success %}
山藏白虎云藏寺,池上老梅枝。洞庭归兴,香柑红树,鲈鲙银丝。 白家池馆,吴宫花草,可似当时。最怜人处,啼乌夜月,犹怨西施。{% endnote %}
<!-- endtab -->
{% endtabs %}

This is Tab 1.

  1. One
  2. Two
  3. Three

Tabbed code block:

print('hello world')

1
2
code block tag
code block tag

Note default tag.

This is Tab 2.

  • Five
  • Six
  • Seven

任何内容(支持内联标签)。

This is Tab 3.

山藏白虎云藏寺,池上老梅枝。洞庭归兴,香柑红树,鲈鲙银丝。 白家池馆,吴宫花草,可似当时。最怜人处,啼乌夜月,犹怨西施。

文字图标使用方法