Skip to content

设置标签

MkDocs 的 Material 插件为页面分类提供了一流的标签支持,这增加了将相关页面分组并通过搜索和专门的标签索引进行发现的可能性。如果你的文档很大,标签可以帮助你更快地找到相关信息。

配置

内置标签插件

插件

内置的标签插件增加了将任何页面作为页面前言的一部分进行标签分类的能力。为了添加对标签的支持,将以下行添加到mkdocs.yml

plugins:
  - tags

以下配置选项可用:

enabled

默认:true – 此选项指定在构建项目时是否启用插件。如果你想加快本地构建速度,你可以使用环境变量

plugins:
  - tags:
      enabled: !ENV [CI, false]

tags_file

默认:none – 此选项指定应用于渲染标签索引的页面。查看添加标签索引部分以获取更多信息。如果指定了此选项,标签将变为可点击的,指向标签索引中的相应部分:

plugins:
  - tags:
      tags_file: tags.md

持有标签索引的页面可以在mkdocs.ymlnav部分的任何地方链接。但是,请注意,这个选项不是必需的 - 只有在你想要一个标签索引页面时才使用它。

tags_extra_files

默认:none – 此选项指定额外的页面,即渲染标签索引的子集,以便为特定部分提供范围内的标签索引:

plugins:
  - tags:
      tags_extra_files:
        compatibility.md:
          - compat # (1)!
        web.md:
          - html
          - js
          - css
  1. 每个页面可以被分配一个[tag 标识符]列表,这些标识符必须在mkdocs.ymlextra.tags部分中定义:
extra:
  tags:
    Compatibility: compat
    HTML5: html
    JavaScript: js
    CSS: css

在这个例子中,所有带有Compatibility标签的页面将被包含在compatibility.md的额外标签索引中,所有定义了至少一个HTML5JavaScriptCSS标签的页面将被包含在web.md的额外标签索引中。

请注意,每个标签额外文件下列出的值必须是字母数字的[tag 标识符],而不是标签本身。查看#3864 以获取更多信息。

tags_slugify

默认:headerid.slugify – 此选项指定用于从标签生成 URL 兼容的 slugs 的函数。[Python Markdown 扩展]包含了几个对非 ASCII 语言有好的 Unicode-aware slug 函数:

Unicode

plugins:
  - tags:
      tags_slugify: !!python/object/apply:pymdownx.slugs.slugify
        kwds:
          case: lower

Unicode,区分大小写

plugins:
  - tags:
      tags_slugify: !!python/object/apply:pymdownx.slugs.slugify

tags_slugify_separator

默认:- – 此选项指定 slug 函数使用的分隔符。默认情况下,使用连字符,但它可以被改变为任何字符串:

plugins:
  - tags:
      tags_slugify_separator: "-"

tags_compare

默认:None – 此选项指定在比较标签值进行排序时使用哪个函数。如果你希望不考虑大小写地比较标签,使用:

plugins:
  - tags:
      tags_compare: !!python/name:material.plugins.tags.casefold

你也可以定义你自己的比较函数,它必须返回一个用于排序的标签值(作为字符串),并相应地引用它。

tags_compare_reverse

默认:false – 此选项指定标签是否按逆序排序。主要是为了完整性提供的。要改变方向,使用:

plugins:
  - tags:
      tags_compare_reverse: true

tags_allowed

默认:none – 此选项允许作者明确定义哪些标签被允许在页面上使用。如果省略了这个设置,内置的标签插件将不会检查标签名称。使用这个选项来定义一个标签列表,以便捕获拼写错误:

plugins:
  - tags:
      tags_allowed:
        - HTML5
        - JavaScript
        - CSS

标签图标和标识符

实验性的

每个标签都可以与一个图标关联,该图标将在标签内部渲染。在为标签分配图标之前,将每个标签与一个唯一的标识符关联,通过将以下内容添加到mkdocs.yml

extra:
  tags:
    <tag>: <identifier> # (1)!
  1. 标识符只能包括字母数字字符,以及破折号和下划线。例如,如果你有一个标签Compatibility,你可以将compat设置为标识符:
extra:
  tags:
    Compatibility: compat

标识符可以在标签之间重用。没有明确关联的标签将使用默认的标签图标,即

接下来,每个标识符都可以与一个图标关联,甚至是自定义图标,通过将以下行添加到mkdocs.ymltheme.icon配置设置下:

标签图标

theme:
icon:
    tag:
    <identifier>: <icon> # (1)!
  1. 输入一些关键词,使用我们的图标搜索找到完美的图标,并点击短代码将其复制到你的剪贴板:
<div class="mdx-iconsearch" data-mdx-component="iconsearch">
  <input
    class="md-input md-input--stretch mdx-iconsearch__input"
    placeholder="Search icon"
    data-mdx-component="iconsearch-query"
    value="tag"
  />
  <div
    class="mdx-iconsearch-result"
    data-mdx-component="iconsearch-result"
    data-mdx-mode="file"
  >
    <div class="mdx-iconsearch-result__meta"></div>
    <ol class="mdx-iconsearch-result__list"></ol>
  </div>
</div>

标签默认图标

theme:
icon:
    tag:
    default: <icon>
展开查看示例
theme:
icon:
    tag:
    html: fontawesome/brands/html5
    js: fontawesome/brands/js
    css: fontawesome/brands/css3
extra:
tags:
HTML5: html
JavaScript: js
CSS: css

使用

添加标签

内置的标签插件启用时,可以使用前言tags属性为文档添加标签。在 Markdown 文件的顶部添加以下行:

---
tags:
  - HTML5
  - JavaScript
  - CSS
---

...

页面现在将以这些标签作为主标题之上和搜索预览内的内容进行渲染,这现在允许通过标签找到页面

如何为整个文件夹设置标签?

借助[内置的 meta 插件],你可以确保为整个部分和所有嵌套页面设置标签,通过在相应的文件夹中创建一个.meta.yml文件,内容如下:

tags:
- HTML5
- JavaScript
- CSS

.meta.yml中设置的标签与为页面定义的标签进行合并和去重,这意味着你可以在.meta.yml中定义公共标签,然后为每个页面添加特定的标签。在.meta.yml中的标签被追加。

添加标签索引

内置的标签插件允许定义一个文件来渲染标签索引,这可以是nav部分的任何页面。要添加一个标签索引,创建一个页面,例如tags.md

# 标签

以下是一些相关标签的列表:

[TAGS]

[TAGS]标记指定了标签索引的位置,即在渲染页面时,它将被实际的标签索引替换。你可以在标记前后包含任意内容:

标签索引

在页面上隐藏标签

虽然标签是在主标题之上渲染的,但有时,可能希望为特定页面隐藏它们,这可以通过前言hide属性实现:

---
hide:
  - tags
---
# 文档标题