Skip to content

标签页设置

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 -->也需要在标签页中实现

子标签块名和嵌套子标签块名都需要不一致,否则会影响实现

示例

标签页测试

相关阅读