自定义Hexo标签插件

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

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

消息

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

1
2
3
{% 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:有标题的消息块")。

没有标题的消息块。

没有标题的消息块。

没有标题的消息块。

没有标题的消息块。

没有标题的消息块。

没有标题的消息块。

没有标题的消息块。

标签页

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

1
2
3
4
5
6
7
8
9
{% tabs size:<大小> align:<对齐> style:<样式> %}
<!-- tab id:<标签ID> icon:<图标> title:<标签标题> active -->
<标签内容>
<!-- endtab -->
<!-- tab id:<标签ID> icon:<图标> title:<标签标题> -->
<标签内容>
<!-- endtab -->
...
{% endtabs %}

标签容器

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

size

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

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

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

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

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

align

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

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

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

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

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

style

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

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

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

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

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

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

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

Tab

一个标签页有如下选项:

id

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

active

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

icon

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

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

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

title

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

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

作者

PPOffice

发布于

2018-01-02

许可协议

CC BY-NC-SA 4.0

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×