VitePress 极简主题：分类 / 标签 / 归档

页面

分类

分类通过动态路由来实现分类与标签的切换，URL 看起来像动态博客一样

• /category/文章
• /category/子文章

在根目录创建 category 目录，在文件夹内创建 [category].md 与 [category].paths.ts

[category].md

---
title: 分类
layout: page
---

<Category />

[category].paths.ts

import { getCategoryPaths } from '../src/utils/taxonomyPaths.ts';

export default {
  paths: getCategoryPaths
};

标签

和分类一样，在根目录创建 tags 目录，在文件夹内创建 [tag].md 与 [tag].paths.ts

[tag].md

---
title: 标签
layout: page
---

<Category type="tag" />

[tag].paths.ts

import { getTagPaths } from '../src/utils/taxonomyPaths.ts';

export default {
  paths: getTagPaths
};

归档

归档页面比较简单，直接在根目录创建 archives.md 即可

archives.md

---
title: 归档
layout: page
---

<Archives />

Frontmatter

要给文章添加分类或标签，只需要在 Frontmatter 中设置 category 或 tags，其中分类只能有一个，标签可以有多个。

category: 分类 A
tags: 
  - 标签 A
  - 标签 B

导航栏

添加分类页 / 标签页 / 归档页后，建议同时将其添加导航栏中

.vitepress/config.ts

export default defineConfigWithTheme<ThemeConfig>({
  themeConfig: {
    nav: [
      { text: '分类', link: '/category/' },
      { text: '标签', link: '/tags/' },
      { text: '归档', link: '/archives' }
    ]
  }
}

插槽

组件提供了 doc-after 和 doc-before 插槽，可以在页面顶部和底部插入自定义组件

---
title: 归档
layout: page
---

<Category>
  <template #doc-after>
    <MyComponents />
  </template>
</Category>


<script lang="ts" setup>
import MyComponents from '.vitepress/theme/components/MyComponents.vue';
</script>