菜鸟教程

主题

VitePress 使用 createContentLoader 创建文章列表与分页 ​

在 VitePress 中，我们可以使用内置的 createContentLoader API 来加载 Markdown 文件的内容（如博客文章），并结合 Vue 的逻辑实现文章列表与分页功能。本文将介绍一个完整的示例。

1. 基础概念 ​

createContentLoader 是 VitePress 提供的一个函数，用于在构建阶段读取指定目录下的 Markdown 文件，并生成 JSON 数据，供前端页面组件使用。

常见用途：

  • 生成文章列表
  • 提取 frontmatter 信息（如标题、日期、标签）
  • 配合分页、分类、标签等功能使用

2. 创建文章数据加载器 ​

在 .vitepress 目录下新建 posts.data.js 文件：

js
// .vitepress/posts.data.js
import { createContentLoader } from 'vitepress'

export default createContentLoader('posts/*.md', {
  excerpt: true,  // 提取摘要
  transform(raw) {
    return raw.map((item) => ({
      title: item.frontmatter.title,
      date: item.frontmatter.date,
      description: item.frontmatter.description,
      url: item.url,
      excerpt: item.excerpt
    }))
  }
})

说明：

  • posts/*.md → 读取 posts 文件夹下所有 Markdown 文件
  • excerpt: true → 自动提取摘要
  • transform → 转换数据结构，方便前端使用

3. 创建文章列表页面 ​

在项目根目录下新建 posts.md 文件：

md
---
title: 所有文章
---

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

// 每页条数
const pageSize = 5
const currentPage = ref(1)

// 分页数据
const pagedPosts = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return posts.slice(start, start + pageSize)
})

// 总页数
const totalPages = computed(() => Math.ceil(posts.length / pageSize))

// 切换页面
function goToPage(page) {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}
</script>

文章列表 ​

html
<ul>
  <li v-for="post in pagedPosts" :key="post.url">
    <a :href="post.url">{{ post.title }}</a>
    <small>({{ post.date }})</small>
    <p>{{ post.description || post.excerpt }}</p>
  </li>
</ul>

<div class="pagination">
  <button :disabled="currentPage === 1" @click="goToPage(currentPage - 1)">上一页</button>
  <span>{{ currentPage }} / {{ totalPages }}</span>
  <button :disabled="currentPage === totalPages" @click="goToPage(currentPage + 1)">下一页</button>
</div>

4. 文章示例 ​

在 posts/ 文件夹下新建 Markdown 文件，例如：

md
---
title: 第一篇文章
date: 2025-09-01
description: 这是第一篇文章的简介。
---

这里是正文内容。
md
---
title: 第二篇文章
date: 2025-09-10
description: 这是第二篇文章的简介。
---

这里是正文内容。

5. 效果展示 ​

运行 VitePress 后，访问 /posts 页面，可以看到：

  • 自动生成的文章列表
  • 每页展示 5 篇文章
  • 分页按钮可以切换页码

6. 扩展思路 ​

  • 分类/标签：在 frontmatter 中增加 tags 字段，在 transform 时提取并建立索引。
  • 排序：在 transform 中根据日期排序。
  • 搜索：结合 fuse.js 等库实现全文搜索。

📌 总结 ​

使用 createContentLoader 可以轻松读取 Markdown 文章数据，结合 Vue 的响应式能力，可以快速实现文章列表、分页、分类、搜索等功能，非常适合在 VitePress 中搭建个人博客或文档站点。

最后更新: