Astro x Storyblok：内容加载器

我们很高兴地宣布，Storyblok 成为 Astro 内容层 API 的首批合作伙伴之一，这是我们将远程和 CMS 数据引入内容集合的新方法。Storyblok 是无头 CMS 领域的先驱，具有内置的可视化编辑器。它能让开发团队在采用新兴前端技术的同时，与营销人员实现无缝协作。

借助内容层，您现在可以将来自 Storyblok 等 CMS 的内容与本地 Git 支持的 Markdown 和 MDX 结合使用。通过 Storyblok 加载器，您可以在开发环境中同步远程数据，并在数据更改时获得自动刷新。

使用 Storyblok 加载器

要使用新的加载器（alpha 版本），首先安装 @storyblok/astro 包

npm install @storyblok/astro@alpha

然后在你的 src/content/config.ts 配置文件中导入并使用该加载器

import { storyblokLoader } from "@storyblok/astro";
import { defineCollection } from "astro:content";

const storyblokCollection = defineCollection({
  loader: storyblokLoader({
    accessToken: import.meta.env.STORYBLOK_TOKEN,
    version: "published",
  }),
})

export const collections = {
  storyblok: storyblokCollection,
}

就是这样，从此您可以像查询和使用本地集合一样查询和使用集合。Storyblok 附带一个 StoryblokComponent，可以为您渲染区块。以下是一个在扩展路由中使用它的示例。

---
import { getCollection } from "astro:content";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
import BaseLayout from "~/layouts/BaseLayout.astro";
import { type ISbStoryData } from "@storyblok/astro";

export async function getStaticPaths() {
  const stories = await getCollection("storyblok");

  return stories.map(({ data }: { data: ISbStoryData }) => {
    return {
      params: { slug: data.full_slug },
      props: { story: data },
    };
  });
}

interface Props {
  story: ISbStoryData;
}

const { story } = Astro.props;
---

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

请参阅 Astro 关于内容集合的文档以了解更多信息。另外，请查阅昨日关于内容层 API 的深入探讨，了解加载器的工作原理以及如何构建您自己的加载器，以及仍处于 alpha 阶段的 Storyblok 加载器 GitHub 仓库，以报告问题和贡献代码。