跳转至

Content tabs 选项卡

有时，将不同的内容分组到不同的选项卡下是很有用的，例如描述如何在不同语言下编写功能相同的代码时。Material for MkDocs 提供了美观且实用的选项卡功能，可以将代码块和其他的内容分组显示。

配置项

锚点链接

为了更方便地链接和共享内容选项卡，每个内容选项卡都会自动添加一个锚点链接。你可以复制选项卡的链接，并在同一页面或其他页面上创建链接。 FIXME:锚点链接不会用，后面改一下

=== "选项卡1"
    [选项卡2][tab2]
    [tab3]: #锚点链接--选项卡2

=== "选项卡2"
    [选项卡3][tab3]
    [tab3]: #锚点链接--选项卡3

=== "选项卡3"
    [锚点链接][tabAnchor]
    [tabAnchor]: #锚点链接

[选项卡2][tab2]

选项卡3

锚点链接

选项卡关联

启用下方的功能后，整个文档站点中的所有内容选项卡将根据标签相关联。当用户点击某个选项卡时，具有相同标签的选项卡将同步切换。 选项卡基于标签而非顺序关联，这意味着无论选项卡在容器中的顺序如何，标签相同的选项卡都会同时激活。此外，此功能与即时加载完全集成，并可在页面加载之间保持状态。

mkdocs.yml
theme:
  features:
    - content.tabs.link

使用方法

分组代码块

代码块是内容选项卡的主要服务对象，可以视为内容选项卡的一种特殊情况。带有单个代码块的选项卡始终不会添加水平间距(?)。

代码块分组
=== "C"

    ``` c
    #include <stdio.h>

    int main() {
      printf("Hello world!\n");
      return 0;
    }
    ```

=== "C++"

    ``` cpp
    #include <iostream>

    int main() {
      std::cout << "Hello world!" << std::endl;
      return 0;
    }
    ```

#include <stdio.h>

int main() {
  printf("Hello world!\n");
  return 0;
}

#include <iostream>

int main() {
  std::cout << "Hello world!" << std::endl;
  return 0;
}

分组其他内容

当一个内容选项卡包含多个代码块时，它会显示出水平间距。垂直间距不会自动添加，但可以通过将选项卡嵌套在其他块中来实现(?)。

包含其他内容的选项卡
=== "无序列表"

    * 白日依山尽
    * 黄河入海流

=== "有序列表"

    1. 欲穷千里目
    2. 更上一层楼
  • 白日依山尽
  • 黄河入海流
  1. 欲穷千里目
  2. 更上一层楼

选项卡嵌套

启用 SuperFences 后，内容选项卡可以嵌套任意内容，包括进一步的内容选项卡，还可以嵌套在其他块（如提示块或引用块）中。例如： TODO:未验证如何嵌套多层选项卡

套娃
!!! example

    === "无序列表"

        ``` markdown
        * 白日依山尽
        * 黄河入海流
        ```

    === "有序列表"

        === "欲穷"
            千里目

        === "更上"
            一层楼

Example

* 白日依山尽
* 黄河入海流

千里目

一层楼