Rendu du contenu

Le système de rendu StudioCMS est dynamique en fonction du type de page actuel.

Exemple d’une route fourre-tout (« catch-all » en anglais) où la page actuelle est récupérée à partir du SDK et les données de la page sont transmises au moteur de rendu. Dans ce cas, nous utilisons le type de page par défaut studiocms/markdown configuré dans les paramètres de la page et l’enveloppons dans une mise en page comme nous le faisons avec le plugin @studiocms/blog. Un plugin de création de pages, par exemple, peut être fourni sans mise en page standard, parce qu’il vise plutôt à ce que vous conceviez le tout dans le générateur, comme vous le feriez dans d’autres systèmes CMS.

Note

Veuillez noter que l’utilisation de notre système de rendu nécessite que vous disposiez d’un module d’extension pour StudioCMS fournissant un moteur de rendu, tel que @studiocms/md, @studiocms/html ou un module d’extension personnalisé qui fournit un moteur de rendu pour votre type de contenu. Le moteur de rendu gérera le rendu du contenu en fonction du type de page défini dans votre configuration de StudioCMS.

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

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

let { slug } = Astro.params;

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

const { data: page } = await runSDK(SDKCoreJs.GET.page.bySlug(slug))

if (!page) {
  return new Response(null, { status: 404 });
}

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

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

Lectures complémentaires

Vous souhaitez créer un module d’extension de rendu personnalisé pour StudioCMS ? Consultez notre guide sur la création de modules d’extension de rendu personnalisés pour apprendre à étendre StudioCMS avec votre propre logique de rendu.