51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Hexo+Butterfly使用Tab分栏说明

标签语法 {#标签语法}

|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 | {% tabs Unique name, [index] %} <!-- tab [Tab caption] [@icon] --> Any content (support inline tags too). <!-- endtab --> {% endtabs %} |

配置参数 {#配置参数}

Unique name: {#Unique-name}

  • 选项卡块标签的唯一名称,不带逗号。
  • 将在#id中用作每个标签及其索引号的前缀。
  • 如果名称中包含空格,则对于生成#id,所有空格将由破折号代替。
  • 仅当前帖子/页面的URL必须是唯一的!

[index]: {#index}

  • 活动选项卡的索引号。
  • 如果未指定,将选择第一个标签(1)。
  • 如果index为-1,则不会选择任何选项卡。
  • 可选参数。

[Tab caption]: {#Tab-caption}

  • 当前选项卡的标题。
  • 如果未指定标题,则带有制表符索引后缀的唯一名称将用作制表符的标题。
  • 如果未指定标题,但指定了图标,则标题将为空。
  • 可选参数。

[@icon]: {#icon}

  • FontAwesome图标名称(全名,看起来像" fas fa-font")
  • 可以指定带空格或不带空格;
  • 例如'Tab caption @icon' 和 'Tab caption@icon'.
  • 可选参数。

示例代码 {#示例代码}

Demo 1 - 预设选择第一个【默认】 {#Demo-1-预设选择第一个【默认】}

|---------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 | {% tabs test1 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %} |

  • test1 1
  • test1 2
  • test1 3

This is Tab 1.
This is Tab 2.
This is Tab 3.

Demo 2 - 预设选择tabs {#Demo-2-预设选择tabs}

|---------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 | {% tabs test2, 3 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %} |

  • test2 1
  • test2 2
  • test2 3

This is Tab 1.
This is Tab 2.
This is Tab 3.

Demo 3 - 没有预设值 {#Demo-3-没有预设值}

|---------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 | {% tabs test3, -1 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %} |

  • test3 1
  • test3 2
  • test3 3

This is Tab 1.
This is Tab 2.
This is Tab 3.

Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名 {#Demo-4-自定义-Tab-名-只有-icon-icon-和-Tab-名}

|---------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 | {% tabs test4 %} <!-- tab 第一个Tab --> **tab名字为第一个Tab** <!-- endtab --> <!-- tab @fab fa-apple-pay --> **只有图标 没有Tab名字** <!-- endtab --> <!-- tab 炸弹@fas fa-bomb --> **名字+icon** <!-- endtab --> {% endtabs %} |

  • 第一个Tab
  • 炸弹

tab名字为第一个Tab
只有图标 没有Tab名字
名字+icon


赞(2)
未经允许不得转载:工具盒子 » Hexo+Butterfly使用Tab分栏说明