Hi @queen ore. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#With Storyblok and Astro.build, how can I make the /home to to the / with dynamic routing?
hazy frigateBOT
In Astro with Storyblok, you can create dynamic routes using the [...slug].astro file. This file fetches and renders the page data from Storyblok that matches the dynamic slug parameter.
To make the /home route to be the actual homepage (/), you can modify the [...slug].astro file to check if the slug is home and then redirect to /.
Here's an example of how you can do this:
---
import { useStoryblokApi } from '@storyblok/astro'
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro'
const storyblokApi = useStoryblokApi()
const { slug } = Astro.params;
let content;
try {
const { data } = await storyblokApi.get(`cdn/stories/${slug}`, { version: import.meta.env.DEV ? "draft" : "published", });
content = data.story.content
} catch (error) {
return Astro.redirect('/404')
}
if (slug === 'home') {
return Astro.redirect('/');
}
---
<html lang="en">
<head>
<title>Storyblok & Astro</title>
</head>
<body>
<StoryblokComponent blok={content} />
</body>
</html>
In this code, we're checking if the slug is home and if it is, we're redirecting to /. This way, when you navigate to /home, you'll be redirected to /.
Please note that this is a simple example and you might need to adjust it based on your specific needs and setup.
Sources:
- Generating Pages with Storyblok and Astro (https://docs.astro.build/en/guides/cms/storyblok#generating-pages)
- Server-side Rendering with Storyblok and Astro (https://docs.astro.build/en/guides/cms/storyblok#server-side-rendering)