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

URL: https://caijiao.org/posts/5
Source: docs/posts/5.md
Description: 学习如何在 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: 所有文章
---


```

### 文章列表

```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 中搭建个人博客或文档站点。