连接到 CMS ​

一般的工作流 ​

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

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

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

   js

   // posts/[id].paths.js
   import { loadEnv } from 'vitepress'
   
   const env = loadEnv('', process.cwd())

   // posts/[id].paths.js
   import { loadEnv } from 'vitepress'
   
   const env = loadEnv('', process.cwd())

   1
   2
   3
   4
   

2. 从 CMS 获取必要的数据并将其格式调整为合适的路径数据：

   js

   export default {
   	async paths() {
   		// 使用相应的 CMS 客户端库 (如果需要的话)
   		const data = await (
   			await fetch('https://my-cms-api', {
   				headers: {
   					// 如果需要 token 的话请在这里填写
   				},
   			})
   		).json()
   
   		return data.map((entry) => {
   			return {
   				params: { id: entry.id /* title, authors, date etc. */ },
   				content: entry.content,
   			}
   		})
   	},
   }

   export default {
   	async paths() {
   		// 使用相应的 CMS 客户端库 (如果需要的话)
   		const data = await (
   			await fetch('https://my-cms-api', {
   				headers: {
   					// 如果需要 token 的话请在这里填写
   				},
   			})
   		).json()
   
   		return data.map((entry) => {
   			return {
   				params: { id: entry.id /* title, authors, date etc. */ },
   				content: entry.content,
   			}
   		})
   	},
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   

3. 在页面中渲染内容：

   md

   # {{ $params.title }}
   
   - by {{ $params.author }} on {{ $params.date }}
   
   <!-- @content -->

   # {{ $params.title }}
   
   - by {{ $params.author }} on {{ $params.date }}
   
   <!-- @content -->

   1
   2
   3
   4
   5
   

整合指南 ​

如果你已经写了一篇关于如何将 VitePress 与特定 CMS 集成的指南，请点击下面的 “在 GitHub 上编辑此页面” 链接将它提交到这里！