标签页设置
NexT
内置了标签页实现
配置
在NexT _config.yml
文件中,打开标签页设置
# Tabs tag
tabs:
transition:
tabs: false
labels: true
实现
代码模板如下:
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
- 参数
Unique name
表示标签块标签(tabs block tag
) - 参数
index
表示起始显示标签页,和Unique name
用逗号隔开 - 参数
Tab caption
表示标签页名 - 参数
icon
表示FontAwesome符号,以@
开头,和Tab caption
用空格隔开
每一对{% tabs %}
和{% endtabs %}
表示一个标签块
每一对<!-- tab -->
和<!-- endtab -->
表示一个标签页,每个标签块可以包含多个标签页
标签块名需要不一致,否则会影响实现
子标签和嵌套子标签
还可以在标签页中添加子标签块和嵌套子标签块(也就是子子标签块),模板如下:
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
{% subtabs Sub Tabs %}
<!-- tab [Tab caption] [@icon] -->
{% subtabs Sub-Sub Tabs %}
<!-- tab [Tab caption] [@icon] -->
...
{% endtabs %}
<!-- endsubtabs -->
{% endtabs %}
<!-- endsubtabs -->
<!-- endtab -->
{% endtabs %}
子标签块{% subtabs Sub Tabs %}
和<!-- endsubtabs -->
需要在标签页中实现
嵌套子标签块{% subtabs Sub-Sub Tabs %}
和<!-- endsubtabs -->
也需要在标签页中实现
子标签块名和嵌套子标签块名都需要不一致,否则会影响实现