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.
vitepress/docs/en/guide/cms.md

1.4 KiB

outline
deep

Connecting to a CMS

General Workflow

Connecting VitePress to a CMS will largely revolve around Dynamic Routes. Make sure to understand how it works before proceeding.

Since each CMS will work differently, here we can only provide a generic workflow that you will need to adapt to your specific scenario.

  1. If your CMS requires authentication, create an .env file to store your API tokens and load it so:

    // posts/[id].paths.js
    import { loadEnv } from 'vitepress'
    
    const env = loadEnv('', process.cwd())
    
  2. Fetch the necessary data from the CMS and format it into proper paths data:

    export default {
      async paths() {
        // use respective CMS client library if needed
        const data = await (await fetch('https://my-cms-api', {
          headers: {
            // token if necessary
          }
        })).json()
    
        return data.map(entry => {
          return {
            params: { id: entry.id, /* title, authors, date etc. */ },
            content: entry.content
          }
        })
      }
    }
    
  3. Render the content in the page:

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

Integration Guides

If you have written a guide on integrating VitePress with a specific CMS, please use the "Edit this page" link below to submit it here!