CMS との接続

全体のワークフロー

VitePress を CMS と接続する際は、主に動的ルーティングを中心に考えることになります。先にその仕組みを理解しておいてください。

CMS ごとに動作が異なるため、ここでは各自の環境に合わせて調整できる汎用的なワークフローのみを示します。

CMS が認証を必要とする場合は、API トークンを格納するための .env を作成し、次のように読み込みます。
js
```
// posts/[id].paths.js
import { loadEnv } from 'vitepress'

const env = loadEnv('', process.cwd())
```

CMS から必要なデータを取得し、適切なパスデータの形式に整形します。

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
      }
    })
  }
}

ページ内でコンテンツをレンダリングします。

# {{ $params.title }}

- {{ $params.date }} に {{ $params.author }} が作成

<!-- @content -->

連携ガイドの募集

特定の CMS と VitePress の連携ガイドを書かれた方は、下部の「Edit this page」リンクからぜひ投稿してください！

CMS との接続 ​

全体のワークフロー ​

連携ガイドの募集 ​

CMS との接続

全体のワークフロー

連携ガイドの募集