Mises en page

WordPress propose des « Page Templates » — une liste déroulante dans l’éditeur pour choisir une mise en page par page (par ex. Default, Full Width, Landing Page). EmDash suit le même schéma avec un champ select.

Fonctionnement

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

Aucun système particulier n’est nécessaire — cela s’appuie sur le champ select existant d’EmDash et sur le modèle de composants d’Astro.

Ajouter le champ

Dans l’interface d’administration, ajoutez un champ select à la collection pages avec le slug template et vos options de mise en page (par ex. « Default », « Full Width »). Ou incluez-le dans vos données de seed :

{
  "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 } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<any>;
}

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 } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<any>;
}

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>

Brancher la route

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

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

const { slug } = Astro.params;

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

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

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

const layouts = {
  "Default": PageDefault,
  "Full Width": PageFullWidth,
};

const Layout = layouts[page.data.template as keyof typeof layouts] ?? PageDefault;
---

<Layout page={page} />

La route reste concise. Chaque composant de mise en page possède son propre balisage et ses styles. Ajouter une mise en page revient à : créer un composant, ajouter l’option au champ select, ajouter une ligne au map.

Ajouter d’autres mises en page

Choix courants dans les thèmes WordPress :

• Default — colonne de contenu étroite, confortable à lire
• Full Width — zone de contenu plus large, sans barre latérale
• Landing Page — sans en-tête/pied de page, sections hero
• Sidebar — contenu avec zone de widgets en barre latérale

Chacun n’est qu’un autre composant Astro dans src/layouts/ et une autre entrée dans le map des mises en page de la route.