hexo theme next test

发表于 分类于 阅读次数： 本文字数： 1.9k 阅读时长 ≈ 6 分钟

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>
Almost Over
1
2
3
<div class="text-right">
{% btn #, Test is finished., check fa-fw fa-lg, Button tag test is finished. %}
</div>
Test is finished.

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.

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

文字图标使用方法