统计tags - 404方案

方案：为文章添加frontmatter，用 createContentLoader 收集数据，首页自定义组件显示。

frontmatter示例：

  ---
  date: 2026-03-31
  tags:
    - Knowledge/Architecture
    - Resources/讲
  ---

创建 .vitepress/posts.data.ts：

import { createContentLoader } from 'vitepress'

export default createContentLoader('**/*.md', {
	transform(rawData) {
	  return rawData
		.filter(page => page.frontmatter.tags)
		.map(page => ({
		  url: page.url,
		  title: page.frontmatter.title,
		  date: page.frontmatter.date,
		  tags: page.frontmatter.tags as string[]
		}))
	}
})

在 index.md 中引入组件：

<script setup>
  import TagTree from
  './.vitepress/theme/components/TagTree.vue'
</script>

<TagTree />

创建组件在 .vitepress/theme/components/TagTree.vue：

<script setup>
  import { data as posts } from '../../posts.data'
  import { computed } from 'vue'

  const tagTree = computed(() => {
    const tree = {}
    posts.forEach(post => {
      post.tags?.forEach(tag => {
        const parts = tag.split('/')
        let node = tree
        parts.forEach(part => {
          if (!node[part]) node[part] = { _count: 0 }
          node[part]._count++
          node = node[part]
        })
      })
    })
    return tree
  })
</script>