Skip to content

分页

如何启用主题的分页,显示分页数据

使用

  1. 一个最简单的博客文章数据统计

-> index.md (or xxx.md)

md
---
layout: page
---

带有 layout: page 将会被注入博客文章分页数据。如果仅这样使用将不会触发分页功能,所以的文章都会显示在一个页面中

  1. 一个标准的分页

[page] 可以换成其它值

md
---
layout: page
---
ts
import fs from 'fs'

export default {
  paths() {
    const limit = 12 // Item count of each page
    const files = fs
      .readdirSync('docs/posts')
      .filter((file) => !/^\[[^]*]\]\./.test(file))
    const total = Math.ceil(files.length / limit)

    return Array.from({ length: total }).map((_, index) => {
      const current = index + 1
      const page = current === 1 ? 'index' : `page-${current}`

      return { params: { page, current, limit } }
    })
  },
}

基于 vitepess 的 dynamic-routes 功能,可以动态生成分页界面。默认将占用 index.mdpage-[n].md 生成分页,如果你需要修改请参考下面的formatPage配置

  1. 配置多个分页

主题支持配置多个分页,在需要分页数据的地方按照上面方式配置。然后在配置中增加 pagination 属性

例如:目前有两个目录 posts lib 需要分页,同时还想在首页显示筛选出来的文章

首先需要在按照 1 的方式配置 index.md 用来显示首页筛选出来的文章

然后在 postslib 目录下按照 2 的方式配置 [page].md[page].paths.ts。注意需要将 readdirSync('docs/posts') 修改为当前目录

最后在配置中增加

-> .vitepress/config.ts

ts
pagination: [
  {
    match: (path) => /^\/($|index|page-)/.test(path),
    filter: (page) => page.display === 'home', // 将匹配 frontmatter 中包含 `display: home` 的页面
  },
  {
    dir: 'posts',
    prev: '上一页',
    next: '下一页',
  },
  {
    dir: 'lib',
    prev: '上一页',
    next: '下一页',
  },
],

pagination 配置

对于仅有一处分页的情况,pagination 支持传入一个对象;对于多处分页的情况,pagination 支持传入一个数组

group

  • Type: number
  • Default: 5

分页组件中显示的分页按钮数量

prev

  • Type: string
  • Default: Prev

分页组件中上一页按钮的文本

next

  • Type: string
  • Default: Next

分页组件中下一页按钮的文本

dir

  • Type: string | array
  • Default: srcDir

需要统计分页数据的目录。当你有多个目录需要分页时,最好将该值设置为目录名,否则你需要配置 match

match

  • Type: function

当你需要对多个目录进行分页时,可以通过该函数来匹配需要分页的目录。该函数接收一个参数 path,表示当前页面的路径。如果返回 true 则表示当前分页路径配置当前配置

filter

  • Type: function

当前分页的过滤函数

sort

  • Type: function

当前分页的排序函数,默认将通过 frontmatter 中的 date 字段进行排序

formatPage

  • Type: function

格式化分页按钮链接的函数。如果你更改了 [page].paths.ts 中的 page 参数名,那么你需要增加该函数用于格式化分页链接

类型声明
ts
export interface PaginationItem {
  /**
   * Pagination collapses when the total page count exceeds this value
   *
   * @default 5
   */
  group?: number
  /**
   * The prev button text
   *
   * @default 'Prev'
   */
  prev?: string
  /**
   * The next button text
   *
   * @default 'Next'
   */
  next?: string
  /**
   * Directory that requires statistical pagination data. **It is best to have a unique value throughout the pagination config**
   *
   * default value: [srcDir](https://vitepress.dev/reference/site-config#srcdir)
   *
   * When your blog requires multiple pagination, you need to set dir to the current directory name
   */
  dir?: MaybeArray<string>
  /**
   * Customize how to match the path of route and current config
   *
   * If your pagination data is incorrect, you should increase it
   */
  match?: (path: string) => boolean
  /**
   * Customize how to filter the posts data
   */
  filter?: (item: PostsItem) => boolean
  /**
   * Customize how to sort the posts data
   */
  sort?: (a: PostsItem, b: PostsItem) => number
  /**
   * Custom pagination jump link data
   */
  formatPage?: (page: number) => DefaultTheme.NavItemWithLink
}

export interface PaginationParams {
  /**
   * File name for generating [dynamic-routes](https://vitepress.dev/guide/routing#dynamic-routes)
   *
   * @example n === 1 ? 'index' : `page-${n}`
   *
   * If you are not using the recommended format, you need to custom `pagination -> formatPage` match
   */
  page: string
  /**
   * Current pagination, starting from 1
   *
   * @requires
   */
  current: number
  /**
   * Item count of each page
   *
   * @requires
   */
  limit: number
}

创建时间:

最后更新: