Mises en Page

Permettez aux éditeurs de choisir une mise en page par page (par exemple, Par Défaut, Pleine Largeur, Page d’Atterrissage) depuis un menu déroulant dans l’éditeur, en utilisant un champ select mappé aux composants de mise en page dans votre route de page.

Comment ça fonctionne

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

Cela utilise le champ select d’EmDash et le modèle de composants d’Astro.

Ajouter le champ

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

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

Créer des 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>

Connecter 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 petite. Chaque composant de mise en page possède son propre balisage et son propre style. Ajouter une mise en page consiste à : créer un composant, ajouter l’option au champ select, ajouter une ligne à la carte.

Ajouter plus de mises en page

Options de mise en page courantes :

• 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/pied de page, sections hero
• Sidebar — contenu avec une zone de widgets de barre latérale

Chacune est simplement un autre composant Astro dans votre répertoire src/layouts/ et une autre entrée dans la carte de mise en page de la route.