Skip to content

内容标签

有时,将不同的内容分组到不同的标签下是很有必要的,例如在描述如何从不同的语言或环境访问 API 时。Material for MkDocs 允许创建美观且功能强大的标签,以分组代码块和其他内容。

配置

此配置启用内容标签,并允许在内容标签内嵌套任意内容,包括代码块和...更多内容标签!将以下行添加到 mkdocs.yml

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

查看其他配置选项:

锚链接

9.5.0

为了更方便地链接到内容标签并分享它们,系统会自动为每个内容标签添加一个锚链接,您可以通过右键单击复制或在新标签页中打开:

您可以复制标签的链接并在同一页面或其他页面上创建链接。例如,您可以跳转到上段的第三个标签

可读的锚链接

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;
    }
    ```
#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
  1. Sed sagittis eleifend rutrum
  2. Donec vitae suscipit est
  3. Nulla tempor lobortis orci

嵌入内容

当启用SuperFences时,内容标签可以包含任意嵌套内容,包括进一步的内容标签,并且可以嵌套在其他块中,如[警告]或引用块:

警告中的内容标签
!!! 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