VitePress文章列表与分页实现方法

VitePress比较适合于产品级别的网站，如果对于博客这类网站的来说，内容不算多，但是需要做文章列表和分页。下面就一步一步的教大家实现VitePress文章列表与分页功能。

创建“归档”或“索引”

createContentLoader，当构建一个内容为主的站点时，我们经常需要创建一个“归档”或“索引”页面：一个我们可以列出内容中的所有可用条目的页面，例如博客文章或 API 页面。我们可以直接使用数据加载 API 实现这一点，但由于这会经常使用，VitePress 还提供了一个 createContentLoader 辅助函数来简化这个过程：

// .vitepress\theme\posts.data.ts
// https://vitepress.dev/guide/data-loading#createcontentloader
import { createContentLoader } from 'vitepress'

export default createContentLoader('posts/*.md', /* options */)

在主题目录创建上面文件，读取posts/*.md的文件。

分页组件

PostList.vue组件放在与posts.data.ts相同位置，每10条做分页，以id倒序排列。

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

// 当前页数
const currentPage = ref(1)
// 每页文章数
const postsPerPage = 10

// 排序文章，按照倒序排列
const sortedPosts = computed(() => {
  return [...posts].sort((a, b) => {
    const idA = parseInt(a.url.replace('.html', ''))
    const idB = parseInt(b.url.replace('.html', ''))
    return idB - idA // 按照 ID 倒序排列
  })
})

// 计算当前页的文章
const paginatedPosts = computed(() => {
  const start = (currentPage.value - 1) * postsPerPage
  const end = currentPage.value * postsPerPage
  return sortedPosts.value.slice(start, end)
})

// 总页数
const totalPages = computed(() => {
  return Math.ceil(sortedPosts.value.length / postsPerPage)
})

// 切换到下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

// 切换到上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}
</script>

<template>
  <ul>
    <li v-for="post in paginatedPosts" :key="post.url">
      <a :href="post.url">{{ post.frontmatter.title }}</a>
      <span>by {{ post.frontmatter.author }}</span>
    </li>
  </ul>

  <!-- 分页控制按钮 -->
  <div>
    <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
    <span>Page {{ currentPage }} of {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

注册组件：

// https://vitepress.dev/guide/custom-theme
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import './style.css'
import PostList from './PostList.vue'

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    })
  },
  enhanceApp({ app, router, siteData }) {
    // https://vitepress.dev/guide/extending-default-theme#enhanceapp
    app.component('PostList', PostList)
  }
} satisfies Theme

写文章

在文档目录创建posts/1.md,posts/2.md等以数字id开头的md文档。

创建文章列表：blogs.md：

# Blogs

<PostList />

这样访问blogs.html就可以查看到文章列表了。