NexT 主题内置标签

「标签」(Tag Plugin) 是 Hexo 提供的一种快速生成特定内容的方式。例如,在标准 Markdown 语法中,我们无法指定图片的大小。这种情景,我们即可使用标签来解决。Hexo 内置来许多标签来帮助写作者可以更快的书写,完整的标签列表可以参考 Hexo 标签插件使用说明。另外,Hexo 也开放来接口给主题,使主题有可能提供给写作者更简便的写作方法。以下标签便是 NexT 主题当前提供的标签。

文本居中的引用

此标签将生成一个带上下分割线的引用,同时引用内文本将自动居中。

文本居中时,多行文本若长度不等,视觉上会显得不对称,因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用或者结束语之前的总结引用

使用方式

  • HTML方式: 使用这种方式时,给 img 添加属性 class="blockquote-center" 即可。
  • 标签方式: 使用 centerquote 或者简写 cq
标签调用方法
1
2
3
4
5
6
7
8
9
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 标签 方式,要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}

标签效果

示例:

1
2
3
4
<blockquote class="blockquote-center">
<p>人的一切痛苦 本质上是对自己无能的愤怒</p>
<p>**王小波**</p>
</blockquote>

效果:

人的一切痛苦 本质上是对自己无能的愤怒

王小波

代码添加改动标记

使用方式

只需将代码块的语言指定为 diff,同时每行行首使用 +- 来控制代码增减。

1
2
3
4
{% codeblock lang:diff %}
- code snippet deleted
+ code snippet added
{% endcodeblock %}

示例:

1
2
3
4
{% codeblock lang:diff %}
- print("Woops! I'll be deleted!")
+ print("Hey! I'll be add!")
{% endcodeblock %}

效果:

1
2
- print("Woops! I'll be deleted!")
+ print("Hey! I'll be add!")

Note 标签

这些样式出现在 Bootstrap 的官方文档 中。

使用方式

标签调用方法
1
2
3
4
5
6
7
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<div class="note class_name">blah blah blah</div>

<!-- 标签 方式 -->
{% note class_name %}
blah blah blah
{% endnote %}

其中,class_name 可以是以下列表中的一个值:

  • default
  • primary
  • success
  • info
  • warning
  • danger

标签效果

默认块内包含图标

1
2
3
4
<div class="note class_name">
#### class_name 标题
<p style="margin-top:0">**class_name** 内容.</p>
</div>

效果:

Default 标题

default 内容.

Primary 标题

primary 内容.

Success 标题

success 内容.

Info 标题

info 内容.

Warning 标题

warning 内容.

Danger 标题

danger 内容.

可在类中指定 no-icon 取消图标显示

取消 icon 显示
1
2
3
4
<div class="note danger no-icon">
#### Danger no-icon 标题
<p style="margin-top:0">**danger no-icon** 内容.</p>
</div>

效果:

Default no-icon 标题

default no-icon 内容.

Label 标签

使用方式

1
{% label [class_name] @blah blah blah %}

其中,class_name 可以是以下列表中的一个值:

  • default
  • primary
  • success
  • info
  • warning
  • danger

当未指定时默认为 default

标签效果

示例:

1
2
3
4
5
6
我坐在床前,望着窗外,{% label @回忆满天 %}。生命是{% label primary @华丽错觉 %},时间是贼偷走一切。

七岁的那一年,抓住那只{% label success @蝉 %},以为能抓住夏天。十七岁的那年,吻过他的脸,就以为和他能{% label info @永远 %}。

有没有那么一种永远,{% label warning @永远不改变 %},拥抱过的美丽,都再也不破碎。
让险峻岁月不能,在脸上撒野,让{% label danger @生离和死别都遥远 %},有谁能听见。

效果:

我坐在床前,望着窗外,回忆满天。生命是华丽错觉,时间是贼偷走一切。

七岁的那一年,抓住那只,以为能抓住夏天。十七岁的那年,吻过他的脸,就以为和他能永远

有没有那么一种永远,永远不改变,拥抱过的美丽,都再也不破碎。 让险峻岁月不能,在脸上撒野,让生离和死别都遥远,有谁能听见。

Tab 标签

使用方式

1
2
3
4
5
{% tabs [Unique name], [index] %}
<!-- tab [Tab caption]@[icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

说明

  • Unique name 为每个标签页组唯一的名称
  • index 为初始激活的标签页
  • Tab caption 为标签页名称,不指定时为所属标签页组名称加索引
  • icon 为 Font awesome图标,可选。

标签效果

默认选中第三个选项卡

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 3 %}
<!-- tab -->
这是选项卡 1
<!-- endtab -->
<!-- tab -->
这是选项卡 2
<!-- endtab -->
<!-- tab -->
这是选项卡 3
<!-- endtab -->
{% endtabs %}

这是选项卡 1
这是选项卡 2
这是选项卡 3

选项卡名称自定义

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡 2 %}
<!-- tab 自定义名称1 -->
这是选项卡 1
<!-- endtab -->
<!-- tab 自定义名称2 -->
这是选项卡 2
<!-- endtab -->
<!-- tab 自定义名称3 -->
这是选项卡 3
<!-- endtab -->
{% endtabs %}

这是选项卡 1
这是选项卡 2
这是选项卡 3

选项卡名称使用 icon

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡 2 %}
<!-- tab 自定义名称1@text-width -->
这是选项卡 1
<!-- endtab -->
<!-- tab 自定义名称2@amazon -->
这是选项卡 2
<!-- endtab -->
<!-- tab 自定义名称3@bold -->
这是选项卡 3
<!-- endtab -->
{% endtabs %}

这是选项卡 1
这是选项卡 2
这是选项卡 3

Button 标签

使用方式

1
2
3
4
<!-- 标签 方式 -->
{% button /path/to/url/, text, icon [class], title %}
<!-- 标签别名 -->
{% btn /path/to/url/, text, icon [class], title %}

标签效果

示例:

1
{% btn #, Text %}{% btn #, Text & Title, home, Title %}

TextText & Title

Writing Enriches Life.