DatoCMS & Astro

DatoCMS 是一个基于网络的无头 CMS，用于管理你的网站和应用的数字内容。

与 Astro 集成

在本指南中，你将在你的 Astro 项目中从 DatoCMS 获取内容数据，然后在一个页面上显示它。

先决条件

要开始，你需要具备以下条件

一个 Astro 项目 - 如果你还没有 Astro 项目，可以按照我们的安装指南中的说明进行操作。
一个 DatoCMS 账户和项目 - 如果你还没有账户，可以注册一个免费账户。
你的 DatoCMS 项目的只读 API 密钥 - 你可以在项目的管理后台的“Settings” > “API Tokens”下找到它。

设置凭据

在你的 Astro 项目的根目录下创建一个名为 .env 的新文件（如果尚不存在）。使用你在 DatoCMS 管理后台中找到的 API 密钥，添加一个新的环境变量如下

DATOCMS_API_KEY=YOUR_API_KEY

为了支持 TypeScript，请在 src/ 文件夹下的 env.d.ts 文件中声明此环境变量的类型。如果该文件不存在，你可以创建它并添加以下内容

interface ImportMetaEnv {
  readonly DATOCMS_API_KEY: string;
}

你的根目录现在应包含这些文件

目录src/
- env.d.ts
.env
astro.config.mjs
package.json

在 DatoCMS 中创建模型

在你的项目的 DatoCMS 管理后台中，导航到“Settings” > “Models”，并创建一个名为“Home”的新模型，同时选中“Single Instance”开关。这将为你的项目创建一个主页。在此模型中，为页面标题添加一个新的文本字段。

导航到项目中的“Content”选项卡，然后点击你新创建的主页。现在你可以添加一个标题了。保存页面，然后继续。

获取数据

在你的 Astro 项目中，导航到将获取并显示你的 CMS 内容的页面。添加以下查询以使用 DatoCMS GraphQL API 获取 home 的内容。

此示例在 src/pages/index.astro 上显示来自 DatoCMS 的页面标题

---
const response = await fetch('https://graphql.datocms.com/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
    Authorization: `Bearer ${import.meta.env.DATOCMS_API_KEY}`,
  },
  body: JSON.stringify({
    query: `query Homepage {
          home {
            title
          }
        }
      `,
  }),
});

const json = await response.json();
const data = json.data.home;
---

<h1>{data.title}</h1>

这个 GraphQL 查询将从你的 DatoCMS 项目中获取 home 页面的 title 字段。当你刷新浏览器时，你应该能在页面上看到标题。

添加动态模块化内容块

如果你的 DatoCMS 项目包含模块化内容，那么你需要为项目中的模块化字段所允许的每个内容块（例如，文本部分、视频、引用块等）构建一个相应的 .astro 组件。

下面的示例是一个 <Text /> Astro 组件，用于显示来自 DatoCMS 的“多段落文本”块。

---
export interface TextProps {
  text: string
}

export interface Props {
  item: TextProps
}

const { item } = Astro.props;
---

<div set:html={item.text} />

要获取这些块，请编辑你的 GraphQL 查询，以包含你在 DatoCMS 中创建的模块化内容块。

在这个例子中，模块化内容块在 DatoCMS 中名为 content。该查询还包括每个项目的唯一 _modelApiKey，用于根据内容作者在 DatoCMS 编辑器中选择的块来检查应在模块化字段中显示哪个块。在 Astro 模板中使用 switch 语句，以允许根据从查询接收到的数据进行动态渲染。

以下示例代表一个 DatoCMS 模块化内容块，允许作者在文本字段 (<Text />) 和图像 (<Image />) 之间进行选择，并渲染在主页上

---
import Image from '../components/Image.astro';
import Text from '../components/Text.astro';

const response = await fetch('https://graphql.datocms.com/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
    Authorization: `Bearer ${import.meta.env.DATOCMS_API_KEY}`,
  },
  body: JSON.stringify({
    query: `query Homepage {
          home {
            title
            content {
              ... on ImageRecord {
                _modelApiKey
               image{
                url
               }
              }
              ... on TextRecord {
                _modelApiKey
                text(markdown: true)
              }
            }
          }
        }
      `,
  }),
});

const json = await response.json();
const data = json.data.home;
---

<h1>{data.title}</h1>
{
  data.content.map((item: any) => {
    switch (item._modelApiKey) {
      case 'image':
        return <Image item={item} />;
      case 'text':
        return <Text item={item} />;
      default:
        return null;
    }
  })
}

发布你的站点

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

在 DatoCMS 内容更改时发布

如果你的项目正在使用 Astro 的默认静态模式，当你的内容发生变化时，你需要设置一个 webhook 来触发新的构建。如果你使用 Netlify 或 Vercel 作为托管提供商，你可以使用它们的 webhook 功能，在 DatoCMS 中更改内容时触发新的构建。

Netlify

在 Netlify 中设置 webhook

转到你的站点仪表盘，然后点击 Build & deploy。
在 Continuous Deployment 选项卡下，找到 Build hooks 部分，然后点击 Add build hook。
为你的 webhook 提供一个名称，并选择你想要触发构建的分支。点击 Save 并复制生成的 URL。

Vercel

在 Vercel 中设置 webhook

转到你的项目仪表盘，然后点击 Settings。
在 Git 选项卡下，找到 Deploy Hooks 部分。
为你的 webhook 提供一个名称，并选择你想要触发构建的分支。点击 Add 并复制生成的 URL。

向 DatoCMS 添加 Webhook

在你的 DatoCMS 项目管理后台中，导航到 Settings 选项卡并点击 Webhooks。点击加号图标创建一个新的 webhook 并给它命名。在 URL 字段中，粘贴你偏好的托管服务生成的 URL。至于触发器，选择任何适合你需求的选项。（例如：每当有新记录发布时就进行构建。）