ButterCMS и Astro

ButterCMS — это безголовая CMS и движок для блогов, который позволяет публиковать структурированный контент для использования в вашем проекте.

Интеграция с Astro

В этом разделе мы будем использовать SDK ButterCMS, чтобы внедрить ваши данные в проект Astro. Чтобы начать, вам потребуется следующее:

Необходимые условия

Проект Astro — Если у вас еще нет проекта Astro, наше Руководство по установке поможет вам быстро начать работу.
Аккаунт ButterCMS. Если у вас нет учетной записи, вы можете зарегистрироваться для бесплатного пробного периода.
Ваш API-токен ButterCMS - Вы можете найти свой API-токен на странице Настройки.

Настройка

Создайте файл .env в корне вашего проекта и добавьте ваш API-токен в качестве переменной окружения:
.env
```
BUTTER_TOKEN=ВАШ_API_TOKEN_ЗДЕСЬ
```
Подробнее об использовании переменных окружения и файлах .env в Astro.
Установите SDK ButterCMS в качестве зависимости:
- npm
- pnpm
- Yarn
Terminal window
npm install buttercms
Terminal window
pnpm add buttercms
Terminal window
yarn add buttercms
Создайте файл buttercms.js в новой директории src/lib/ в вашем проекте:
src/lib/buttercms.js
```
import Butter from "buttercms";

export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);
```

Это аутентифицирует SDK с помощью вашего API-токена и экспортирует его для использования в вашем проекте.

Получение данных

Для получения контента импортируйте этот клиент и используйте одну из его функций retrieve.

В этом примере мы получаем коллекцию, которая содержит три поля: короткий текст name, число price и WYSIWYG description.

---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.content.retrieve(["shopitem"]);

interface ShopItem {
  name: string,
  price: number,
  description: string,
}

const items = response.data.data.shopitem as ShopItem[];
---
<body>
  {items.map(item => <div>
    <h2>{item.name} - ${item.price}</h2>
    <p set:html={item.description}></p>
  </div>)}
</body>

Интерфейс отражает типы полей. Поле WYSIWYG description загружается как строка HTML, и set:html позволяет вам отобразить его.

Аналогично, вы можете получить страницу и отобразить ее поля:

---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.page.retrieve("*", "simple-page");
const pageData = response.data.data;

interface Fields {
  seo_title: string,
  headline: string,
  hero_image: string,
}

const fields = pageData.fields as Fields;
---
<html>
  <title>{fields.seo_title}</title>
  <body>
    <h1>{fields.headline}</h1>
    <img src={fields.hero_image} />
  </body>
</html>