Анонс @storyblok/astro

Мы очень рады объявить о выпуске @storyblok/astro! Теперь использовать Storyblok в вашем проекте Astro стало намного проще и быстрее, чем раньше. Благодаря мощному Astro Integration API и нашему новому модулю, вы сможете начать работу в считанные минуты.

Давайте узнаем, как это работает!

Торопитесь? Перейдите к демонстрации в реальном времени!

Использование

Прежде всего, установите @storyblok/astro:

npm install @storyblok/astro
# yarn add @storyblok/astro

Добавьте следующий код в ваш astro.config.mjs и замените accessToken на API-токен предварительного просмотра вашего пространства Storyblok.

import { defineConfig } from "astro/config";
import storyblok from "@storyblok/astro";

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: "<your-access-token>",
      components: {
        page: "storyblok/Page",
        feature: "storyblok/Feature",
        grid: "storyblok/Grid",
        teaser: "storyblok/Teaser",
      }
    }),
  ],
});

Как вы видите, все компоненты, которые вы определили в Storyblok, должны быть глобально зарегистрированы через объект components. В дальнейшем они будут загружаться автоматически при использовании StoryblokComponent, как показано ниже.

Запрос к API Storyblok

Теперь на любой из ваших страниц Astro вы можете использовать функцию useStoryblokApi для получения данных из Storyblok. В этом примере мы получаем главную историю:

---
import { useStoryblokApi } from "@storyblok/astro";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";

const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get("cdn/stories/home", {
  version: "draft",
});

const story = data.story;
---

<StoryblokComponent blok="{story.content}" />

Создание компонентов Astro

Для каждого компонента Astro, который должен быть связан с его эквивалентом в вашем пространстве Storyblok, вы можете использовать функцию storyblokEditable() на его корневом элементе, передавая свойство blok, которое они получают, и разрешая связь с мостом Storyblok. Кроме того, вы можете использовать StoryblokComponent для динамической загрузки любого из компонентов, которые вы зарегистрировали глобально.

---
import { storyblokEditable } from "@storyblok/astro";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";

const { blok } = Astro.props
---

<main {...storyblokEditable(blok)}>
  {blok.body?.map(blok => {return <StoryblokComponent blok="{blok}" />})}
</main>

…Но как насчет частичной гидратации?

Мы позаботились об этом! Возможность принести свой любимый фреймворк и воспользоваться преимуществами частичной гидратации — это огромное преимущество использования Astro.

Если вы хотите использовать частичную гидратацию с любым из фреймворков, поддерживаемых Astro, выполните следующие шаги:

1. Установите официальную интеграцию Astro для нужного вам фреймворка.

2. Создайте компонент Astro, который будет служить оберткой и использовать наиболее подходящую клиентскую директиву.

3. Создайте настоящий компонент на Vue, Svelte, React или любом другом поддерживаемом фреймворке.

Для получения рабочих примеров вы можете изучить Live Demo на Stackblitz.

Включение моста Storyblok

Мост Storyblok Bridge автоматически активируется по умолчанию. Если вы хотите отключить его или включить условно (например, в зависимости от окружения), вы можете установить параметр bridge на false в astro.config.mjs.

Поскольку Astro не является реактивным JavaScript-фреймворком и отображает все как HTML, мост Storyblok Bridge не обеспечивает редактирование в реальном времени, как вы можете знать это из других фреймворков. Однако он автоматически обновляет сайт всякий раз, когда вы сохраняете или публикуете историю.

Вот и все! Теперь ваш проект Astro полностью интегрирован с CMS Storyblok.

Загляните на @storyblok/astro для получения более подробной документации.

Следующие шаги

Вам уже не терпится попробовать? Мы будем рады увидеть ваши проекты, созданные с помощью Storyblok и Astro!

Мы планируем выпустить полный учебник Storyblok Astro Ultimate Tutorial, в котором вы узнаете, как создать многофункциональный многоязычный веб-сайт.

Хотите внести свой вклад в развитие @storyblok/astro? Не стесняйтесь создать проблему или PR в официальном репозитории GitHub.