VitePress 链接 CMS

VitePress 是一个静态站点生成器，但它完全可以与无头（Headless）CMS 集成，从而实现非技术人员也能轻松管理网站内容。通过将 VitePress 与 CMS 连接，你可以将内容管理与站点展示分离开来。

基本思路

集成的核心思路是：在构建时（build time），从 CMS 的 API 获取内容，然后使用这些数据生成静态的 Markdown 文件或直接在 Vue 组件中渲染内容。

我们将使用数据加载（*.data.js）功能来实现这一点，这是 VitePress 提供的用于在构建时获取外部数据的理想方式。

示例：集成 Strapi

假设我们正在使用 Strapi 作为我们的 Headless CMS，并且我们有一个名为 articles 的集合类型。

1. 创建数据加载文件

在你的项目中创建一个数据加载文件，例如 docs/articles.data.js。这个脚本将在构建时运行，从 Strapi API 获取文章列表。

// docs/articles.data.js
import fetch from 'node-fetch' // Node.js 环境需要引入 fetch

export default {
  async load() {
    try {
      const res = await fetch('https://your-strapi-instance.com/api/articles')
      if (!res.ok) {
        throw new Error(`HTTP error! status: ${res.status}`)
      }
      const data = await res.json()
      // Strapi 的数据通常在 `data` 属性下
      return data.data 
    } catch (error) {
      console.error('Failed to fetch articles:', error)
      return [] // 出错时返回空数组
    }
  }
}

注意: 你可能需要处理认证，例如在请求头中添加 API Token。

2. 创建页面来展示内容

现在，创建一个 Markdown 文件 docs/articles.md 来展示我们从 CMS 获取的文章列表。

<!-- docs/articles.md -->
<script setup>
import { useData } from 'vitepress'

// `data` 变量的值就是从 articles.data.js 返回的结果
const { data: articles } = useData()
</script>

# 最新文章

<div class="article-list">
  <div v-for="article in articles" :key="article.id" class="article-item">
    <h2>{{ article.attributes.title }}</h2>
    <p>{{ article.attributes.summary }}</p>
    <!-- 你可以创建一个动态路由页面来展示文章详情 -->
    <a :href="`/articles/${article.attributes.slug}`">阅读更多</a>
  </div>
</div>

<style scoped>
.article-list .article-item {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--vp-c-divider);
  padding-bottom: 1rem;
}
</style>

3. 生成动态路由页面（可选）

对于文章详情页，你可以使用 VitePress 的动态路由功能。你需要修改配置文件，告诉 VitePress 根据从 CMS 获取的数据来生成对应的页面。

// .vitepress/config.js
import fetch from 'node-fetch'

export default {
  // ...
  async buildEnd(siteConfig) {
    // 在这里可以生成动态页面，但这通常需要更复杂的设置
    // 一个更常见的方法是使用 MPA 模式或自定义构建脚本
  }
}

一个更简单的方法是，在构建之前运行一个单独的 Node.js 脚本：

1. 从 CMS 获取所有文章。
2. 为每篇文章动态地创建一个 Markdown 文件（例如 docs/articles/my-first-article.md），文件的内容可以是一个简单的模板，引用一个 Vue 组件来展示文章详情。
3. 运行 vitepress build。

优点

• 内容解耦：内容管理者可以在友好的 CMS 界面中工作，而开发者可以专注于代码。
• 卓越性能：最终网站仍然是完全静态的，加载速度快，SEO 友好。
• 安全性：由于没有直接连接到数据库，减少了攻击面。

通过这种方式，你可以结合 VitePress 的开发体验和性能优势，以及 Headless CMS 的内容管理灵活性。