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 added!")
{% endcodeblock %}

效果：

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

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

Text Text & Title

NexT 内置标签详细参数参考

Writing Enriches Life.