自定义Hexo标签插件

除了Hexo Built-in Tag Helpers中描述的Hexo原生支持的标签插件以外，Icarus也提供其他 几个用来定制内容显示的有用的标签插件。

本文同时提供以下语言的翻译：English。

下面的标签插件由ppoffice/hexo-component-inferno提供，完整的支持插件列表和配置详情以其为准。

消息

五颜六色的消息块可以用来强调你文章中的部分文本。 它的语法定义如下：

{% message color:<颜色> size:<大小> icon:<图标> title:<标题> %}
    <内容>
{% endmessage %}

color

此选项定义消息块的颜色。 其为可选项。 它可用的配置值与示例如下：

default

一个没有设置颜色的代码块。

dark

一个深色(dark)的代码块。

primary

一个主题色(primary)的代码块。

info

一个提示色(info)的代码块。

success

一个成功色(success)的代码块。

warning

一个警示色(warning)的代码块。

danger

一个危险色(danger)的代码块。

size

此选项定义消息块的大小。 其为可选项。 它可用的配置值与示例如下：

small

一个小(small)的代码块。

default

一个没有设置大小的代码块。

medium

一个中等大小(small)的代码块。

large

一个大(small)的代码块。

icon

此选项定义显示在消息块头部的图标。 其为可选项。 它的值应为FontAwesome的图标class name。 如果图标的class name含有空格，则配置名与配置值需要用引号包裹住。

一个有着GitHub图标的消息块

一个有着GitHub图标("icon:fa-brands fa-github")的消息块。

一个有着Node.js图标的消息块

一个有着Node.js图标("icon:fa-brands fa-node-js")的消息块。

一个有着NPM图标的消息块

一个有着NPM图标("icon:fa-brands fa-npm")的消息块。

title

此选项定义消息块的标题。 其为可选项。 如果标题含有空格，则配置名与配置值需要用引号包裹住。

有标题的消息块

有标题的消息块("title:有标题的消息块")。

没有标题的消息块。

没有标题的消息块。

没有标题的消息块。

没有标题的消息块。

没有标题的消息块。

没有标题的消息块。

没有标题的消息块。

标签页

标签页是一个功能强大的用于展示平行内容的标签插件。 同一时间内，只有活动的标签页内容才能展示给用户。 它的语法定义如下：

{% tabs size:<大小> align:<对齐> style:<样式> %}
<!-- tab id:<标签ID> icon:<图标> title:<标签标题> active -->
<标签内容>
<!-- endtab -->
<!-- tab id:<标签ID> icon:<图标> title:<标签标题> -->
<标签内容>
<!-- endtab -->
...
{% endtabs %}

标签容器

一个标签容器有着以下选项：

size

此选项定义标签页的大小。 其为可选项。 它可用的配置值与示例如下：

• 第一页

• 第二页

这是一个小(small)标签页容器的第一页。

这是一个小(small)标签页容器的第二页。

• 第一页

• 第二页

这是一个没有指定大小的标签页容器的第一页。

这是一个没有指定大小的标签页容器的第二页。

• 第一页

• 第二页

这是一个中等大小(medium)标签页容器的第一页。

这是一个中等大小(medium)标签页容器的第一页。

• 第一页

• 第二页

这是一个大(large)标签页容器的第一页。

这是一个大(large)标签页容器的第二页。

align

此选项定义标签页按钮的对齐方式。 其为可选项。 它可用的配置值与示例如下：

• 第一页

• 第二页

这是一个没有指定对齐方式的标签页容器的第一页。

这是一个没有指定对齐方式的标签页容器的第二页。

• 第一页

• 第二页

这是一个居中对齐的(centered)标签页容器的第一页。

这是一个居中对齐的(centered)标签页容器的第二页。

• 第一页

• 第二页

这是一个右对齐的(right)标签页容器的第一页。

这是一个右对齐的(right)标签页容器的第二页。

• 第一页

• 第二页

这是一个全宽的(fullwidth)标签页容器的第一页。

这是一个全宽的(fullwidth)标签页容器的第二页。

style

此选项定义标签页按钮的样式。 其为可选项。 此外你可以将样式与全宽(fullwidth)对齐方式结合。 它可用的配置值与示例如下：

• 第一页

• 第二页

这是一个盒状(boxed)标签页容器的第一页。

这是一个盒状(boxed)标签页容器的第二页。

• 第一页

• 第二页

这是一个拨动开关状(toggle)标签页容器的第一页。

这是一个拨动开关状(toggle)标签页容器的第二页。

• 第一页

• 第二页

这是一个圆角拨动开关状(toggle-rounded)标签页容器的第一页。

这是一个圆角拨动开关状(toggle-rounded)标签页容器的第二页。

• 第一页

• 第二页

这是一个全宽(fullwidth)盒状(boxed)标签页容器的第一页。

这是一个全宽(fullwidth)盒状(boxed)标签页容器的第二页。

• 第一页

• 第二页

这是一个全宽(fullwidth)拨动开关状(toggle)标签页容器的第一页。

这是一个全宽(fullwidth)拨动开关状(toggle)标签页容器的第二页。

• 第一页

• 第二页

这是一个全宽(fullwidth)圆角拨动开关状(toggle-rounded)标签页容器的第一页。

这是一个全宽(fullwidth)圆角拨动开关状(toggle-rounded)标签页容器的第二页。

Tab

一个标签页有如下选项：

id

此选项为标签页元素的独特标识符(ID)。 此项为必填项。 一个标签页ID应当在整个页面内为独一无二的，这样Icarus才能定位、显示、和隐藏正确的标签页内容。

active

此选项标记当前的标签页是否默认显示。 此项为选填项。 同一时刻一个标签组中只有一个标签页可以标记为活动(active)标签页。

icon

此选项定义标签按钮中显示的图标。 此项为选填项。 它的值应为FontAwesome图标的class name。 如果图标的class name含有空格，则配置名与配置值需要用引号包裹住。

• GitHub
• Node.js

这个标签页的图标(icon)为"icon:fa-brands fa-github"。

这个标签页的图标(icon)为"icon:fa-brands fa-node-js"。

• GitHub
• Node.js

这个标签页的图标(icon)为"icon:fa-brands fa-github"。

这个标签页的图标(icon)为"icon:fa-brands fa-node-js"。

title

此选项定义标签按钮的标题。 其为可选项。 如果标题含有空格，则配置名与配置值需要用引号包裹住。

• 有标题的标签页

• 另一个有标题的标签页

这个标签页的标题(title)为("title:有标题的标签页")。

这个标签页的标题(title)为("title:另一个有标题的标签页")。