Перейти к содержимому

ButterCMS и Astro

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

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

  1. Проект Astro — Если у вас еще нет проекта Astro, наше Руководство по установке поможет вам быстро начать работу.

  2. Аккаунт ButterCMS. Если у вас нет учетной записи, вы можете зарегистрироваться для бесплатного пробного периода.

  3. Ваш API-токен ButterCMS - Вы можете найти свой API-токен на странице Настройки.

  1. Создайте файл .env в корне вашего проекта и добавьте ваш API-токен в качестве переменной окружения:

    .env
    BUTTER_TOKEN=ВАШ_API_TOKEN_ЗДЕСЬ
  2. Установите SDK ButterCMS в качестве зависимости:

    Окно терминала
    npm install buttercms
  3. Создайте файл 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.

src/pages/ShopItem.astro
---
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 позволяет вам отобразить его.

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

src/pages/ShopItem.astro
---
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>
  • Добавьте свои!

Дополнительные руководства по CMS