When generating a static site: I hope to support real-time editing while passing the current page data through Astro.props

[JakiChen]

Description

---
import BaseLayout from 'layouts/BaseLayout.astro';
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
import { getStories } from 'utils/storyblok';
import { toMeta } from 'utils/meta';

export async function getStaticPaths() {
    const { data } = await getStories({
        language: 'en',
        content_type: 'Page',
        resolve_relations: 'ProgressCarousel.slide',
    });

    return data.stories.map((story) => {
        return {
            params: { page: story.slug === 'home' ? undefined : story.slug },
            props: { data: story },
        };
    });
}

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

<BaseLayout {...toMeta(data)} {...data.content}>
    <StoryblokComponent blok={data.content} />
</BaseLayout>

为了进一步简化代码，让其看起来更酷炫一些，希望能通过 Astro.props 传递当前页面数据时，也能实现可视化编辑与实时预览。

In order to further simplify the code and make it look cooler, we hope to be able to achieve visual editing and real-time preview when passing the current page data through Astro.props.

Suggested solution or improvement

刚接触代码、Astro，Storyblok 不久，之前发现上述代码是没有实时预览（以为还以为是 bug，现在实验性项目中回头过来想，应该是没有重新去抓取数据而引起的（只能通过当前 slug 去抓取当前页面数据），不知道这样理解是否正确）

I am new to code, Astro, and Storyblok. Not long ago, I found that the above code did not have real-time preview (I thought it was a bug. Now I look back at the experimental project and think that it should be caused by not re-grabbing the data (it can only be caused by the current slug). To grab the current page data), I don’t know if this understanding is correct)

Additional context

再次感谢 storyblok 技术团队的付出、sotryblok 的UI实在是是太迷人了，希望其越来越好。对于我这么一个没什么技术的小白来说已经很容易上手了～

Thanks again to the storyblok technical team for their efforts. The UI of sotryblok is really charming. I hope it will get better and better. It’s very easy for a novice like me to get started~

Validations

• Follow our Code of Conduct