Content Modeling in Astro

Learn how to handle different content type and nestable blocks, render rich text, and use story references to manage content globally.

Setup

Tip

Copy this reference space, providing the intended structure to follow this guide. Make sure to update the access token.

Alternatively, in the existing space, create a new content type block article and an “Articles” folder with content. The article content type block should have the following fields:

• title: Text
• content: Rich text

Note

Learn more about fields in the concept.

Create an article-overview story as a page type content.

Finally, create a featured-articles nestable block with the following field:

• articles: References

Add a new featured-articles block to the body field of the home story and select some articles to be featured.

Fetch and list all articles

Create a new src/storyblok/ArticleOverview.astro file to get all stories from this new content type.

src/storyblok/ArticleOverview.astro

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

const storyblokApi = useStoryblokApi();
const articles = await storyblokApi.getAll('cdn/stories', {
  version: 'draft',
  starts_with: 'articles',
  content_type: 'article',
});
---

<div>
  <h1>Articles overview</h1>
  <ul>
  {
    articles.map((article) => (
      <li>
        <a href={article.slug}>{article.content.title}</a>
      </li>
    ))
  }
  </ul>
</div>

Using the starts_with parameter, only stories from the “Articles” folder are fetched. Using the content_type parameter, the results are restricted to stories of the content type article.

Tip

Learn more about parameters and filter queries in the Content Delivery API documentation.

Register this block in the Astro configuration file.

astro.config.mjs

import { defineConfig } from 'astro/config';
import { storyblok } from '@storyblok/astro';
import { loadEnv } from 'vite';
const { STORYBLOK_DELIVERY_API_TOKEN } = loadEnv(import.meta.env.MODE, process.cwd(), "");
import mkcert from 'vite-plugin-mkcert';

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: STORYBLOK_DELIVERY_API_TOKEN,
      components: {
        page: 'storyblok/Page',
        grid: 'storyblok/Grid',
        feature: 'storyblok/Feature',
        teaser: 'storyblok/Teaser',
        ['article-overview']: 'storyblok/ArticleOverview',
      },
    }),
  ],
  output: 'server',
  vite: {
    plugins: [mkcert()],
  },
});

Now, the article overview page shows a list of links to all articles.

Create the articles block

Add a new Article.astro component to render the new article content type.

src/storyblok/Article.astro

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

const { blok } = Astro.props;
const renderedRichText = renderRichText(blok.content);
---

<article {...storyblokEditable(blok)}>
  <h2>{blok.title}</h2>
  <Fragment set:html={renderedRichText} />
</article>

To render rich text fields, the renderRichText function provided by the @storyblok/astro module is used.

Note

Learn more about handling rich text in Storyblok in the fields concept and the @storyblok/richtext reference.

Register this block in the Astro configuration file.

astro.config.mjs

import { defineConfig } from 'astro/config';
import { storyblok } from '@storyblok/astro';
import { loadEnv } from 'vite';
const { STORYBLOK_DELIVERY_API_TOKEN } = loadEnv(import.meta.env.MODE, process.cwd(), "");
import mkcert from 'vite-plugin-mkcert';

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: STORYBLOK_DELIVERY_API_TOKEN,
      components: {
        page: 'storyblok/Page',
        grid: 'storyblok/Grid',
        feature: 'storyblok/Feature',
        teaser: 'storyblok/Teaser',
        ['article-overview']: 'storyblok/ArticleOverview',
        article: 'storyblok/Article',
      },
    }),
  ],
  output: 'server',
  vite: {
    plugins: [mkcert()],
  },
});

When clicking on links present in the article overview page, an article page renders correctly.

Handle referenced stories

In the src/pages/[...slug].astro file, set the resolve_relations parameter to get the full object response of referenced stories.

src/pages/[...slug].astro

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

const { slug } = Astro.params;

const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get(`cdn/stories/${slug || "home"}`, {
  version: "draft",
  resolve_relations: 'featured-articles.articles',
});

const story = data.story;
---

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

Note

Learn more in the references concept documentation.

Next, create a new src/storyblok/FeaturedArticles.astro component.

src/storyblok/FeaturedArticles.astro

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

const { blok } = Astro.props;
const articles = blok.articles;
---

<section {...storyblokEditable(blok)}>
  <h2>Featured articles</h2>
  <ul>
  {
    articles.map((article) => (
      <li>
        <a href={article.full_slug}>{article.content.title}</a>
      </li>
    ))
  }
  </ul>
</section>

Register this block in the Astro configuration file.

astro.config.mjs

import { defineConfig } from 'astro/config';
import { storyblok } from '@storyblok/astro';
import { loadEnv } from 'vite';
const { STORYBLOK_DELIVERY_API_TOKEN } = loadEnv(import.meta.env.MODE, process.cwd(), "");
import mkcert from 'vite-plugin-mkcert';

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: STORYBLOK_DELIVERY_API_TOKEN,

      // Only required when using the live preview functionality:
      // livePreview: true,
      // bridge: {
          // resolveRelations: ['featured-articles.articles'],
        // },

      components: {
        page: 'storyblok/Page',
        grid: 'storyblok/Grid',
        feature: 'storyblok/Feature',
        teaser: 'storyblok/Teaser',
        ['article-overview']: 'storyblok/ArticleOverview',
        article: 'storyblok/Article',
        ['featured-articles']: 'storyblok/FeaturedArticles',
      },
    }),
  ],
  output: 'server',
  vite: {
    plugins: [mkcert()],
  },
});

Now, this component will render links to the featured articles in the home page of the project.

Related resources

Concept: Fields

Concept: References

@storyblok/richtext Package Reference