@storyblok/astro 발표

@storyblok/astro의 출시를 발표하게 되어 매우 기쁩니다! Astro 프로젝트에서 Storyblok을 사용하는 것이 이제 이전보다 훨씬 쉽고 빠릅니다. 강력한 Astro Integration API 및 새로운 모듈 덕분에 몇 분 만에 시작하고 실행할 수 있습니다.

어떻게 작동하는지 알아봅시다!

급히? live demo으로 이동하세요!

용법

먼저 @storyblok/astro를 설치합니다.

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

다음 코드를 astro.config.mjs에 추가하고 accessToken를 Storyblok 공간의 미리 보기 API 토큰으로 바꿉니다.

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를 사용할 때 자동으로 로드됩니다.

Storyblok API 쿼리

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 구성 요소 만들기

Storyblok 공간에서 해당 항목에 연결되어야 하는 각 Astro 구성 요소에 대해 해당 루트 요소에서 storyblokEditable() 함수를 사용하여 받은 blok 속성을 전달하고 Storyblok Bridge와의 통신을 활성화할 수 있습니다. 또한 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를 사용하는 큰 이점입니다.

frameworks supported by Astro 중 하나와 함께 부분 수화를 사용하려면 다음 단계를 따르십시오.

Install the official Astro integration for your desired framework

래퍼 역할을 하고 가장 적합한 구성 요소를 활용하는 Astro 구성 요소 생성client directive

Vue, Svelte, React 또는 기타 지원되는 프레임워크에서 실제 구성 요소를 생성합니다

.

작업 예제의 경우 Live Demo on Stackblitz 을 탐색할 수 있습니다.

Storyblok Bridge 활성화

Storyblok Bridge는 기본적으로 자동으로 활성화됩니다. 비활성화하거나 조건부로 활성화하려면(예: 환경에 따라) bridge 매개변수를 false에서 astro.config.mjs로 설정할 수 있습니다.

Astro는 반응형 JavaScript 프레임워크가 아니며 모든 것을 HTML로 렌더링하기 때문에 Storyblok Bridge는 다른 프레임워크에서 알 수 있는 실시간 편집 기능을 제공하지 않습니다. 그러나 스토리를 저장하거나 게시할 때마다 자동으로 사이트를 새로 고칩니다.

그리고 그게 다야! 이제 Astro 프로젝트가 Storyblok CMS와 완전히 통합되었습니다.

자세한 문서는 @storyblok/astro을 참조하십시오.

다음 단계

당신은 그것을 밖으로 시도 흥분? Storyblok과 Astro로 구축된 프로젝트를 보고 싶습니다!

기능이 풍부한 다국어 웹 사이트를 구축하는 방법을 배울 수 있는 완전한 Storyblok Astro Ultimate Tutorial을 출시할 계획입니다.

@storyblok/astro의 개발에 기여하시겠습니까? 공식 GitHub 리포지토리에서 문제 또는 PR을 자유롭게 생성하세요.