上一页 / 下一页

主题提供了两种方式开启上一页与下一页，两者的样式与实现原理完全不同，各有优缺点，可以自行选择其中一种方式开启。

• 组件版：本主题自定义的组件，通过 #doc-after 插槽插入页面底部。
  • 优点：开启方便，单次设置即可，无需改动 Markdown 文件
  • 缺点：仅对博客文章生效，文档页则会使用默认主题的上一页与下一页，风格割裂
• 默认版：VitePress 默认主题自带的主题，自动向 Frontmatter 中添加 prev 与 next 实现。
  • 优点：风格统一
  • 缺点：每次编辑时间、标题以及永久链接时，会同步更新前后文章的 Frontmatter，造成文章编辑时间以及 Commit 记录混乱。

组件版

组件版需要在 ThemeLayout.vue 中导入并添加到 #doc-after 插槽中，PrevNext 组件接收三个 props

• prevText：上一页文本描述（默认为 “上一篇”）
• nextText：下一页文本描述（默认为 “下一篇”）
• showPinned：是否包含置顶文章（默认包含）

.vitepress/theme/Layout.vue

<template>
  <Layout>
    <template #doc-after>
      <PrevNext />
    </template>
  </Layout>
</template>

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

const { Layout } = DefaultTheme;
</script>

默认版

默认版的上一页 / 下一页功能沿用了 VitePress 默认主题的上下页链接功能，你可以在每一篇文章的 Frontmatter 中直接配置。

---
prev:
  text: 上一篇文章标题
  link: /posts/prev
next:
  text: 下一篇文章标题
  link: /posts/next
---

如果你希望为所有的文章开启上一页 / 下一页功能，可以在 usePosts 生成文章列表时，传入 nav 参数，主题会自动为你的所有文章添加 Frontmatter

.vitepress/config.ts

const { posts, hiddenPosts, excludePosts, rewrites } = await usePosts({ nav: true });