Mises en page

Laissez les éditeurs choisir un modèle de page, par exemple Default, Full Width ou Landing Page. Un champ select enregistre le choix, et la route de la page associe cette valeur à un composant de mise en page Astro. Utilisez un champ blocks lorsque les éditeurs doivent composer et réorganiser plusieurs sections au sein d’une même page.

Fonctionnement

1. Ajoutez un champ de sélection template à votre collection de pages
2. Créez des composants de mise en page pour chaque option
3. Associez la valeur du champ à une mise en page dans la route de votre page

Cela s’appuie sur le champ de sélection d’EmDash et sur le modèle de composants d’Astro.

Ajouter le champ

Dans l’interface d’administration, ajoutez à votre collection de pages un champ de sélection avec le slug template et vos options de mise en page (par exemple « Default » et « Full Width »). Pour définir le même champ dans les données seed, ajoutez l’objet suivant au tableau fields de la collection :

{
  "slug": "template",
  "label": "Template",
  "type": "select",
  "validation": {
    "options": ["Default", "Full Width"]
  },
  "defaultValue": "Default"
}

Créer les composants de mise en page

Chaque mise en page enveloppe le contenu dans votre mise en page de base avec un style différent :

---
import type { ContentEntry, InferCollectionData } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<InferCollectionData<"pages">>;
}

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

<Base title={page.data.title}>
  <article class="page-default">
    <h1>{page.data.title}</h1>
    <PortableText value={page.data.content} />
  </article>
</Base>

<style>
  .page-default {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 2rem 1rem;
  }
</style>

---
import type { ContentEntry, InferCollectionData } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<InferCollectionData<"pages">>;
}

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

<Base title={page.data.title}>
  <article class="page-wide">
    <h1>{page.data.title}</h1>
    <PortableText value={page.data.content} />
  </article>
</Base>

<style>
  .page-wide {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: 2rem 1rem;
  }
</style>

Relier la route

Dans la route de votre page, importez chaque mise en page et associez la valeur du modèle :

---
import { decodeSlug, getEmDashEntry } from "emdash";
import PageDefault from "../../layouts/PageDefault.astro";
import PageFullWidth from "../../layouts/PageFullWidth.astro";

const slug = decodeSlug(Astro.params.slug);

if (!slug) {
  return Astro.rewrite("/404");
}

const { entry: page } = await getEmDashEntry("pages", slug);

if (!page) {
  return Astro.rewrite("/404");
}

const layouts = new Map([
  ["Default", PageDefault],
  ["Full Width", PageFullWidth],
]);

const Layout = layouts.get(page.data.template ?? "") ?? PageDefault;
---

<Layout page={page} />

La route reste petite. Chaque composant de mise en page gère son propre balisage et son propre style. Ajouter une mise en page revient à créer un composant, ajouter l’option au champ de sélection et ajouter une ligne à la table d’association.

Ajouter d’autres mises en page

Choix de mises en page courants :

• Default — colonne de contenu étroite, idéale pour la lecture
• Full Width — zone de contenu plus large, sans barre latérale
• Landing Page — sans en-tête ni pied de page, avec des sections hero
• Sidebar — contenu accompagné d’une zone de widgets à côté

Chacune n’est qu’un composant Astro de plus dans votre répertoire src/layouts/ et une entrée de plus dans la table des mises en page de la route.