无头模式的 Statamic 与 Astro

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

与 Astro 的集成

标题部分 与 Astro 的集成

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

前期准备

标题部分 前期准备

首先，你需要具备以下条件：

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

获取数据

标题部分 获取数据

REST API

标题部分 REST API

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

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

---
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

标题部分 GraphQL

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

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

---
const res = await fetch("https://[YOUR-SITE]/graphql/",
  {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      query: `
        posts: entries(collection: "posts", sort: "date desc") {
          data {
            title
            ... on Entry_Posts_Post {
              content
            }
          }
        }
      `
    }),
  });
const entries = await res.json()
---
<h1>Astro + Statamic 🚀</h1>
{
  entries.data.posts.data.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}

发布你的网站

标题部分 发布你的网站

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

社区资源

标题部分 社区资源

更多 CMS 指南