内容渲染

StudioCMS 的渲染系统根据当前页面类型（pageType）动态确定。

以下示例展示了一个通配路由（Catch-all route），其中通过 SDK 获取当前页面数据并传递给渲染器。在此示例中，我们使用页面设置中默认配置的 studiocms/markdown 页面类型，并将其包裹在布局组件中（如 @studiocms/blog 插件的实现方式）。某些页面构建器插件可能不包含标准布局，而是允许您像其他 CMS 系统一样完全在构建器中设计页面。

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

---
import { StudioCMSRenderer } from 'studiocms:renderer';
import studioCMS_SDK from 'studiocms:sdk';
import Layout from '../layouts/Layout.astro';

let { slug } = Astro.params;

if (!slug) {
  slug = 'index';
}

const page = await studioCMS_SDK.GET.databaseEntry.pages.bySlug(slug);

if (!page) {
  return Astro.redirect('/404');
}

const { title, description, heroImage } = page;
---

<Layout title={title} description={description} heroImage={heroImage}>
  <main>
    <StudioCMSRenderer data={page} />
  </main>
</Layout>