连接 CMS

一般工作流程

将 VitePress 连接到 CMS 将主要围绕动态路由。在继续之前，请确保你首先了解动态路由的工作原理。

由于每个 CMS 的工作方式不同，这里我们只能提供一个通用的工作流程，你需要根据你的 CMS 的具体情况进行调整。

1. 如果你的 CMS 需要身份验证，创建一个 .env 文件来存储 API 令牌：

   CMS_TOKEN=xxx

2. 创建一个数据加载器来从 CMS 获取内容并将其格式化为页面数据：

   // posts.data.js
   export default {
     async load() {
       // 从 CMS 获取数据
       const data = await (
         await fetch(`https://my-cms-api`, {
           headers: {
             // 如果需要，包括身份验证标头
             Authorization: `Bearer ${process.env.CMS_TOKEN}`
           }
         })
       ).json()
   
       return {
         // 页面数据
         posts: data.map((post) => ({
           params: { id: post.id },
           content: post.content
         }))
       }
     }
   }

3. 创建动态路由页面：

   ---
   title: {{ $params.title }}
   ---
   
   <!-- @content -->

与特定 CMS 集成

WordPress

相关工具：

• VitePress WordPress Starter

Strapi

相关工具：

• vitepress-strapi-blog-demo

Ghost

相关工具：

• vitepress-ghost-blog

Notion

相关工具：

• notion-vitepress

Nuxt Content

相关工具：

• @nuxt/content - Nuxt 的基于文件的 CMS

Contentful

相关工具：

• vitepress-contentful-starter

Sanity

相关工具：

• vitepress-sanity-template

Forestry

相关工具：

• vitepress-forestry-starter

Storyblok

相关工具：

• vitepress-storyblok

Builder.io

相关工具：

• vitepress-builder.io

TinaCMS

相关工具：

• vitepress-tina-starter

Directus

相关工具：

• vitepress-directus

Payload CMS

相关工具：

• vitepress-payload-cms

如果你知道其他与 VitePress 集成的工具或资源，请随时通过编辑此页面来分享它们！