Astro 与 Storyblok 集成教程

Astro 与 Storyblok 集成教程

storyblok-astro Astro SDK for Storyblok CMS 项目地址: https://gitcode.com/gh_mirrors/st/storyblok-astro

1. 项目介绍

Astro 是一个现代的、快速的静态站点生成器，而 Storyblok 是一个强大的头less CMS。本教程旨在介绍如何将 Astro 与 Storyblok 集成，以便能够利用 Storyblok 的内容管理功能来构建 Astro 网站。

2. 项目快速启动

首先，确保你已经安装了 Node.js。接下来，按照以下步骤进行操作：

# 克隆项目
git clone https://github.com/storyblok/storyblok-astro.git
cd storyblok-astro

# 安装依赖
npm install

# 添加 Storyblok Astro 集成
npm install @storyblok/astro

# 替换配置文件中的 access token
# 打开 astro.config.mjs 文件，并将 <your-access-token> 替换为你的 Storyblok 预览 API 令牌

启动开发服务器：

npm run dev

现在，你的 Astro 项目应该已经与 Storyblok 集成了，并且可以通过本地服务器访问。

3. 应用案例和最佳实践

创建和链接组件

在 Astro 项目中，你需要将你的组件与 Storyblok 的可视化编辑器链接起来。首先，在 astro.config.mjs 文件中指定你的组件：

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: "<your-access-token>",
      componentsDir: "src/components",
    }),
  ],
});

接着，为你的 Astro 组件使用 storyblokEditable 函数：

---
import { storyblokEditable } from '@storyblok/astro';

const { blok } = Astro.props;
---
<div {storyblokEditable(blok)}>
  <h1>{blok.headline}</h1>
</div>

使用 Storyblok Bridge

为了获取 Storyblok 中的故事，你可以使用 useStoryblokApi 函数：

import { useStoryblokApi } from '@storyblok/astro';

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

然后在组件中使用这个故事数据：

---
const story = Astro.props;
---
<StoryblokComponent blok={story.content} />

动态路由

要基于 Storyblok 空间中的故事动态生成 Astro 页面，你可以使用 getStaticPaths 函数：

export async function getStaticPaths() {
  const storyblokApi = useStoryblokApi();
  const { data } = await storyblokApi.get('cdn/links', { version: 'draft' });

  const paths = data.links.map((link) => ({
    params: { slug: link.slug },
  }));

  return { paths, fallback: 'blocking' };
}

4. 典型生态项目

在 Astro 和 Storyblok 的生态系统中，你可以找到许多插件和项目，例如：

• @storyblok/astro: Astro 的官方 Storyblok 集成。
• storyblok-js-client: Storyblok 的 JavaScript 客户端。
• 各种 Astro 框架集成，如 Vue、Svelte 和 React。

使用这些工具和集成，你可以构建出功能丰富且易于管理的静态网站。

storyblok-astro Astro SDK for Storyblok CMS 项目地址: https://gitcode.com/gh_mirrors/st/storyblok-astro