跳转到内容

Caisy 与 Astro

Caisy 是一个无头(headless) CMS ,它公开了 GraphQL API 来存取内容。

将 Caisy CMS 与 Astro 结合使用

段落标题 将 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} />

More CMS guides

Contribute

What’s on your mind?

Create GitHub Issue

Quickest way to alert our team of a problem.

Community