跳转到内容

无头模式的 Statamic 与 Astro

Statamic 是一个现代的、文档扁平的 CMS。它允许开发人员轻松创建动态网站和应用程序,同时提供直观和用户友好的界面供内容编辑者管理内容。

Statamic 提供了内置的 REST APIGraphQL API,用于将你的数据与 Astro 进行连接。

首先,你需要具备以下条件:

  1. REST API 和 GraphQL API 仅在 Statamic 的专业版中可用。你可以在 本地机器 上免费试用专业版。
  2. Astro 项目 - 如果你还需要一个 Astro 项目,我们的 安装指南 将帮助你快速启动。
  3. Statamic 站点 - 如果你需要一个 Statamic 网站,这个指南 将帮助你入门。记得在 .env 文件中添加 STATAMIC_API_ENABLED=trueSTATAMIC_GRAPHQL_ENABLED=true 来启用 REST API 或 GraphQL API,并在 API 配置文件中启用所需资源。

从你站点的 REST API URL 获取 Statamic 数据。默认情况下,它是 https://[你的站点]/api/。然后,你可以使用 Astro 的 set:html={} 指令来渲染你的数据属性。

例如,要显示所选 集合 中的标题和内容列表:

"src/pages/index.astro
---
const res = await fetch("https://[YOUR-SITE]/api/collections/posts/entries?sort=-date")
const posts = await res.json()
---
<h1>Astro + Statamic 🚀</h1>
{
posts.map((post) => (
<h2 set:html={post.title} />
<p set:html={post.content} />
))
}

通过站点的 GraphQL API URL 获取你的 Statamic 数据。同样地,默认情况下它是 https://[你的网站]/graphql/。然后,你可以使用 Astro 的 set:html={} 指令来渲染你的数据属性。

例如,要显示所选 集合 中的标题和内容列表:

"src/pages/index.astro
---
const graphqlQuery = {
query: `
query Entries($page: Int, $locale: String) {
entries(
collection: "posts"
sort: "date asc"
limit: 20
page: $page
filter: { locale: $locale }
) {
current_page
has_more_pages
data {
title
... on Entry_Posts_Post {
content
}
}
}
}
`,
variables: {
page: page,
locale: locale,
},
};
const res = await fetch("https://[YOUR-SITE]/graphql", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(graphqlQuery),
})
const { data } = await res.json();
const entries = data?.entries;
---
<h1>Astro + Statamic 🚀</h1>
{
entries.data.map((post) => (
<h2 set:html={post.title} />
<p set:html={post.content} />
))
}

要部署你的 Astro 网站,请访问我们的部署指南,并按照你所选择的托管提供商的说明进行操作。

更多 CMS 指南

贡献

你有什么想法?

社区
京ICP备15031610号-99