标签体系¶

预计阅读时长 : 4 分钟

通过标签体系，可以对文档进行清晰的分类，便于后续的查找和管理。在 MkDocs 中，可以通过配置文档的元数据来实现这个功能。

代码片段¶

通过配置代码片段，可以将常用的标签快速插入到 Markdown 文档的元数据中。同时，通过这种方式插入标签，可以保证所有的标签都是预先配置好的，不会出现随心所欲添加标签，导致最后标签失控无法管理的问题。

自定义代码片段
// META Snippets

"meta": {
    "prefix": "meta",
    "body": [
        "---",
        "title: ${1:title}",
        "subtitle: ",
        "description: ${2:description}",
        "icon: ",
        "status: ",
        "tags: ",
        "    tag${3}",
        "---",
        "",
        "# ${1}",
        ],
    "description": "添加文章元数据"
},

// Tag Snippets

"Tags": {
    "prefix": "tags",
    "body": [
        "- ${1|VSCode,Linux,PyCharm,Markdown,MkDocs,ChatGPT,Anki,Life,Social,Finance,Company,Hardware,Software,Unraid|}",
    ],
    "description": "添加标签"
},

图标配置¶

通过在 mkdocs.yml 中进行配置，可以为标签一对一添加对应的图标。先在 extra 中配置标签的名称和简称，然后在 theme 中配置图标的简称和对应的图标，最后的效果就如同上面的截图一样。

自定义图标配置
theme:
  icon:
    tag:
      VSCode: material/microsoft-visual-studio-code
      PyCharm: material/language-python
      Linux: fontawesome/brands/linux
      Markdown: material/language-markdown
      MkDocs: material/material-ui
      ChatGPT: material/brain
      Anki: material/star
      Finance: material/currency-usd
      Company: material/handshake
      Hardware: material/cellphone-link
      Software: material/microsoft-windows
      Social: material/account-multiple
      Life: material/heart
      Unraid: material/nas

extra:
  tags:
    VSCode: VSCode
    Linux: Linux
    PyCharm: PyCharm
    Markdown: Markdown
    MkDocs: MkDocs
    ChatGPT: ChatGPT
    Anki: Anki
    Finance: Finance
    Company: Company
    Hardware: Hardware
    Software: Software
    Social: Social
    Life: Life
    Unraid: Unraid

标签汇总¶

除了使用导航菜单作为文档分类方式之外，还可以通过单独的标签页面来展示对应的文档，更便于查找同一个主题下的内容。

要实现这个效果，只需要创建一个 tags.md 文件，并在文中嵌入 [TAGS] 标签即可。

标签页面
1 2 3	`# Tags [TAGS]`

由于之前通过全局 CSS 配置，在标题前自动生成了标号，导致这个页面正文中的标签名称也有标号。为了更加美观的效果，可以通过在文档中添加一段 CSS 代码来屏蔽这个效果。

隐藏分类标题前的标号
<!-- HTML: 隐藏分类标题前的标号 -->

<style>
  .md-typeset h2::before {
    content: none;
  }
</style>