You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
---
outline: deep
---
# CMS との接続 {#connecting-to-a-cms}
## 全体のワークフロー {#general-workflow}
VitePress を CMS と接続する際は、主に [動的ルーティング ](./routing#dynamic-routes ) を中心に考えることになります。先にその仕組みを理解しておいてください。
CMS ごとに動作が異なるため、ここでは各自の環境に合わせて調整できる汎用的なワークフローのみを示します。
1. CMS が認証を必要とする場合は、API トークンを格納するための `.env` を作成し、次のように読み込みます。
```js
// posts/[id].paths.js
import { loadEnv } from 'vitepress'
const env = loadEnv('', process.cwd())
```
2. CMS から必要なデータを取得し、適切なパスデータの形式に整形します。
```js
export default {
async paths() {
// 必要に応じて各 CMS のクライアントライブラリを使用
const data = await (await fetch('https://my-cms-api', {
headers: {
// 必要ならトークン
}
})).json()
return data.map(entry => {
return {
params: { id: entry.id, /* title, authors, date など */ },
content: entry.content
}
})
}
}
```
3. ページ内でコンテンツをレンダリングします。
```md
# {{ $params.title }}
- {{ $params.date }} に {{ $params.author }} が作成
<!-- @content -->
```
## 連携ガイドの募集 {#integration-guides}
特定の CMS と VitePress の連携ガイドを書かれた方は、下部の「Edit this page」リンクからぜひ投稿してください！
