VS Code 标签体系

预计阅读时长 : 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] 标签即可。

# Tags

[TAGS]

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

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

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