Question

Caisy 是一个无头（headless） CMS ，它公开了 GraphQL API 来存取内容。

将 Caisy CMS 与 Astro 结合使用

使用 graphql-request 和 Caisy 的 Astro 富文本渲染器来获取你的 CMS 数据，并在 Astro 页面上显示你的内容：

src/pages/blog/[...slug].astro

---
import RichTextRenderer from '@caisy/rich-text-astro-renderer';
import { gql, GraphQLClient } from 'graphql-request';


const params = Astro.params;


const client = new GraphQLClient(
  `https://cloud.caisy.io/api/v3/e/${import.meta.env.CAISY_PROJECT_ID}/graphql`,
  {
    headers: {
      'x-caisy-apikey': import.meta.env.CAISY_API_KEY
    }
  }
);
const gqlResponse = await client.request(
  gql`
    query allBlogArticle($slug: String) {
      allBlogArticle(where: { slug: { eq: $slug } }) {
        edges {
          node {
            text {
              json
            }
            title
            slug
            id
          }
        }
      }
    }
  `,
  { slug: params.slug }
);


const post = gqlResponse?.allBlogArticle?.edges?.[0]?.node;
---
<h1>{post.title}</h1>
<RichTextRenderer node={post.text.json} />

官方资源

• 查看 GitHub 或 StackBlitz 上的 Caissy + Astro 示例。
• 在草稿模式和多个区域设置中查询文档。
• 使用分页可以查询大量文档。
• 在查询中使用筛选并对结果进行排序。

更多 CMS 指南

• 

  Storyblok

• 

  Contentful

• 

  ButterCMS

• 

  Builder.io

• 

  Cosmic

• 

  DatoCMS

• 

  Front Matter CMS

• 

  Ghost

• 

  Hashnode

• 

  Hygraph

• 

  Keystatic

• 

  Kontent.ai

• 

  Statamic

• 

  Strapi

• 

  Tina CMS

• 

  Umbraco

• 

  WordPress

• 

  Apostrophe

• 

  Caisy

• 

  CloudCannon

• 

  Crystallize

• 

  Decap CMS

• 

  Directus

• 

  KeystoneJS

• 

  microCMS

• 

  Payload CMS

• 

  Prepr CMS

• 

  Prismic

• 

  Sanity

• 

  Sitecore XM

• 

  Spinal

Recipes