Mises en page

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

Fonctionnement

1. Ajoutez un champ select 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 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 » 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>

Brancher la route

Dans votre route de 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.redirect("/404");
}

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

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

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

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

<Layout page={page} />

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

Ajouter d’autres mises en page

Choix de mise en page courants :

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

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