vitepress/docs/ja/guide/cms.md

outline
deep

CMS との接続

全体のワークフロー

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

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

1. CMS が認証を必要とする場合は、API トークンを格納するための .env を作成し、次のように読み込みます。

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

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

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

   # {{ $params.title }}
   
   - {{ $params.date }} に {{ $params.author }} が作成
   
   <!-- @content -->
   

連携ガイドの募集

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