内容选项卡

有时，将不同的内容分组到不同的选项卡下是很有用的，例如在描述如何从不同的语言或环境访问 API 时。Material for MkDocs 允许创建漂亮且功能强大的选项卡，可以将代码块和其他内容分组。

配置

要启用内容选项卡并允许在选项卡中嵌套任意内容（包括代码块和更多内容选项卡），请将以下行添加到mkdocs.yml文件中：

markdown_extensions:
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true

查看额外的配置选项：

锚链接

仅限赞助商 · insiders-4.17.0 · 实验性

为了更轻松地链接和共享内容选项卡，Insiders自动为每个内容选项卡添加了一个锚链接，您可以通过右键单击复制或在新标签页中打开：

在新标签页中打开我......或者我......甚至是我

您可以复制选项卡的链接并在同一页或任何其他页面上创建链接。例如，您可以跳转到本段落上面的第三个选项卡或Insiders 的发布指南。

可读性良好的锚链接

Python Markdown Extensions 9.6添加了对内容选项卡的slugification支持，可以生成更漂亮和更易读的锚链接。使用以下行启用slugify函数：

markdown_extensions:
  - pymdownx.tabbed:
      slugify: !!python/object/apply:pymdownx.slugs.slugify
        kwds:
          case: lower

有关更多信息，请参阅扩展指南。

关联内容选项卡

8.3.0 · 功能标志

启用后，整个文档站点上的所有内容选项卡都将被关联，并且当用户单击选项卡时，它们将切换到相同的标签。请将以下行添加到mkdocs.yml文件中：

theme:
  features:
    - content.tabs.link

内容选项卡是基于其标签而不是偏移量进行关联的。这意味着无论容器内的顺序如何，单击内容选项卡时，具有相同标签的所有选项卡都将被激活。此外，此功能与即时加载完全集成，并在页面加载期间保持不变。

已启用功能已禁用功能

使用方法

分组代码块

代码块是最常见的分组目标之一，可以将其视为内容选项卡的一种特殊情况，因为只有一个代码块的选项卡始终以无水平间距的方式呈现：

带有代码块的内容选项卡

=== "C"

    ``` c
    #include <stdio.h>

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

=== "C++"

    ``` c++
    #include <iostream>

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

CC++

#include <stdio.h>

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

#include <iostream>

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

分组其他内容

当内容选项卡包含多个代码块时，它将以水平间距呈现。垂直间距不会添加，但可以通过将选项卡嵌套在其他块中来实现：

内容选项卡

=== "无序列表"

    * Sed sagittis eleifend rutrum
    * Donec vitae suscipit est
    * Nulla tempor lobortis orci

=== "有序列表"

    1. Sed sagittis eleifend rutrum
    2. Donec vitae suscipit est
    3. Nulla tempor lobortis orci

无序列表有序列表

Sed sagittis eleifend rutrum
Donec vitae suscipit est
Nulla tempor lobortis orci

Sed sagittis eleifend rutrum
Donec vitae suscipit est
Nulla tempor lobortis orci

嵌入内容

当启用SuperFences时，内容选项卡可以包含任意嵌套内容，包括进一步的内容选项卡，并且可以嵌套在其他块（如admonitions或引用块）中：

警告中的内容选项卡

!!! example

    === "无序列表"

        ``` markdown
        * Sed sagittis eleifend rutrum
        * Donec vitae suscipit est
        * Nulla tempor lobortis orci
        ```

    === "有序列表"

        ``` markdown
        1. Sed sagittis eleifend rutrum
        2. Donec vitae suscipit est
        3. Nulla tempor lobortis orci
        ```

Example

无序列表有序列表

* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci

1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci