如何启用主题的分页，显示分页数据
使用
- 一个最简单的博客文章数据统计
-> index.md (or xxx.md)
---
layout: page
---带有 layout: page 将会被注入博客文章分页数据。如果仅这样使用将不会触发分页功能，所以的文章都会显示在一个页面中
- 一个标准的分页
[page] 可以换成其它值
---
layout: page
---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.md 和 page-[n].md 生成分页，如果你需要修改请参考下面的formatPage配置
- 配置多个分页
主题支持配置多个分页，在需要分页数据的地方按照上面方式配置。然后在配置中增加 pagination 属性
例如：目前有两个目录 posts lib 需要分页，同时还想在首页显示筛选出来的文章
首先需要在按照 1 的方式配置 index.md 用来显示首页筛选出来的文章
然后在 posts 和 lib 目录下按照 2 的方式配置 [page].md 和 [page].paths.ts。注意需要将 readdirSync('docs/posts') 修改为当前目录
最后在配置中增加
-> .vitepress/config.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 参数名，那么你需要增加该函数用于格式化分页链接
类型声明
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
}