无头静态和 Astro

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

¥Statamic is a modern, flat-file CMS. It allows developers to easily create dynamic websites and applications while offering content editors an intuitive and user-friendly interface for managing content.

与 Astro 集成

¥Integrating with Astro

Statamic 配有内置 REST API 和 GraphQL API，可将你的数据连接到 Astro。

¥Statamic comes with a built-in REST API and GraphQL API to connect your data to Astro.

先决条件

¥Prerequisites

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

¥To get started, you will need to have the following:

REST API 和 GraphQL API 仅在 Statamic 专业版中可用。你可以在本地机器上免费试用专业版。
Astro 项目 - 如果你仍然需要 Astro 项目，我们的安装指南将帮助你快速启动并运行。
静态网站 - 如果你需要 Statamic 网站，本指南将帮助你入门。请记住通过在 .env 文件中添加 STATAMIC_API_ENABLED=true 或 STATAMIC_GRAPHQL_ENABLED=true 来实现启用 REST API 或 GraphQL API，并在 API 配置文件中启用所需的资源。

获取数据

¥Fetching Data

REST API

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

¥Fetch your Statamic data from your site’s REST API URL. By default, it’s https://[YOUR-SITE]/api/. Then, you can render your data properties using Astro’s set:html={} directive.

例如，要显示所选 collection 中的标题及其内容列表：

¥For example, to display a list of titles and their content from a selected collection:

---
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 API URL 获取静态数据。默认情况下，它是 https://[YOUR-SITE]/graphql/。然后，你可以使用 Astro 的 set:html={} 指令渲染数据属性。

¥Fetch your Statamic data with your site’s GraphQL API URL. By default, it’s https://[YOUR-SITE]/graphql/. Then, you can render your data properties using Astro’s set:html={} directive.

例如，要显示所选 collection 中的标题及其内容列表：

¥For example, to display a list of titles and their content from a selected collection:

---
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} />
  ))
}

发布你的网站

¥Publishing your site

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

¥To deploy your Astro site visit our deployment guides and follow the instructions for your preferred hosting provider.

社区资源

¥Community Resources

主题

¥Themes

Creek