Hexo & Next 标签使用说明

发表于 更新于 分类于 ， Waline： 本文字数： 6k 阅读时长 ≈ 5 分钟

本文为在 Hexo & Next 使用标签的说明，使用标签可在文章中快速插入特定内容，使文章更加美观易读。
本文内容主要搬运至 Hexo 文档的标签插件使用样例。

Hexo 标签插件

引用块 blockquote

在文章中插入引言，可包含作者、来源和标题。
使用方式：

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

普通的 blockquote

没有提供参数，则只输出普通的 blockquote：

1
2
3
{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

引用书上的句子

1
2
3
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

引用 Twitter

1
2
3
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

引用网络上的文章

1
2
3
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

Markdown 的引用块

详见 Markdown 语法详解及使用技巧——引用块。

代码块 codeblock

在文章中插入代码。
使用方式：

1
2
3
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

普通的代码块

1
2
3
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}
1
alert('Hello World!');

指定语言

1
2
3
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}
1
[rectangle setX: 10 y: 10 width: 20 height: 20];

附加说明

1
2
3
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}
Array.map
1
array.map(callback[, thisArg])

附加说明和网址

1
2
3
4
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}
_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

Markdown 的围栏代码块

详见 Markdown 语法详解及使用技巧——围栏代码块。

插入代码文件

插入 source/downloads/code 文件夹内的代码文件。路径 source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。
使用方式：

1
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}

Youtube

在文章中插入 Youtube 视频。
使用方式：

1
{% youtube video_id [type] [cookie] %}

MathJax

插入利用 MathJax 显示的数学公式，需要安装 hexo-renderer-mathjax 并更换 Pandoc 渲染器。
详见 Hexo + NexT 配置优化指南——渲染 mathjax。

Next 内建标签的使用

文本居中引用

调用方法：
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>

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

王小波

Note 标签

调用方法：

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 %}
示例：
1
2
3
4
{% note %}
#### Header
(without define class style)
{% endnote %}

content

1
2
3
4
{% note default %}
#### Default Header
Default content
{% endnote %}

Default Header

Default content

1
2
3
4
{% note primary %}
#### Primary Header
Primary content
{% endnote %}

Primary Header

Primary content

1
2
3
4
{% note info %}
#### Info Header
Info content
{% endnote %}

Info Header

Info content

1
2
3
4
{% note success %}
#### Success Header
Success content
{% endnote %}

Success Header

Success content

1
2
3
4
{% note warning %}
#### Warning Header
Warning content
{% endnote %}

Warning Header

Warning content

1
2
3
4
{% note danger %}
#### Danger Header
Danger content
{% endnote %}

Danger Header

Danger content

可用no-icon取消图标：

1
2
3
4
{% note info no-icon %}
#### No icon note
content
{% endnote %}

No icon note

content

标签内容可折叠：

1
2
3
4
{% note primary This is a summary %}
#### Details and summary
Note with summary: `note primary This is a summary`
{% endnote %}

This is a summary

Details and summary

Note with summary: note primary This is a summary

1
2
3
4
{% note info no-icon This is a summary %}
#### Details and summary (No icon)
Note with summary: `note info no-icon This is a summary`
{% endnote %}

This is a summary

Details and summary (No icon)

Note with summary: note info no-icon This is a summary

Label 标签

调用方法：

1
{% label [class_name] @blah blah blah %}
class_name取值同 Note 标签。 示例：
1
2
3
4
我坐在床前，望着窗外，{% 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
{% tabs 选项卡, 3 %}
<!-- tab -->
这是选项卡 1
<!-- endtab -->
<!-- tab -->
这是选项卡 2
<!-- endtab -->
{% endtabs %}

这是选项卡 1

这是选项卡 2

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

这是选项卡 1

这是选项卡 2

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

这是选项卡 1

这是选项卡 2

-------------------------- --------------------------

本文标题:Hexo & Next 标签使用说明

文章作者:reman

发布时间:2022年08月16日 - 12:02:29

最后更新:2022年08月20日 - 20:07:05

原始链接:https://zcw-blog.top/posts/20220816a1/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请注明出处。