Skip to content

连接到 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())
  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
          }
        })
      }
    }
  3. 在页面中渲染内容:

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

整合指南

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

Released under the MIT License.