Skip to content

Latest commit

 

History

History
134 lines (101 loc) · 5.18 KB

buttercms.mdx

File metadata and controls

134 lines (101 loc) · 5.18 KB
title description type service stub i18nReady
ButterCMS и Astro
Добавьте контент в проект Astro с помощью ButterCMS
cms
ButterCMS
false
true

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

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

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

:::note Для примера полного сайта блога см. Стартовый проект Astro + ButterCMS. :::

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

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

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

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

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

Настройка

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

    BUTTER_TOKEN=ВАШ_API_TOKEN_ЗДЕСЬ

    :::tip Подробнее об использовании переменных окружения и файлах .env в Astro. :::

  2. Установите SDK ButterCMS в качестве зависимости: 

    npm install buttercms
    ```shell pnpm add buttercms ``` ```shell yarn add buttercms ```

  3. Создайте файл buttercms.js в новой директории src/lib/ в вашем проекте:

    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>

Официальные ресурсы

Ресурсы сообщества

  • Добавьте свои!