Layouts de página

Deixe os editores escolherem um template de página, por exemplo Default, Full Width ou Landing Page. Um campo select armazena a escolha, e a rota da página associa esse valor a um componente de layout do Astro. Use um campo blocks quando os editores precisarem compor e reordenar várias seções dentro de uma página.

Como funciona

1. Adicione um campo de seleção template à sua coleção de páginas
2. Crie componentes de layout para cada opção
3. Associe o valor do campo a um layout na rota da sua página

Isso aproveita o campo de seleção do EmDash e o modelo de componentes do Astro.

Adicionar o campo

Na interface do administrador, adicione à sua coleção de páginas um campo de seleção com o slug template e as suas opções de layout (por exemplo, “Default” e “Full Width”). Para definir o mesmo campo nos dados seed, adicione o objeto a seguir ao array fields da coleção:

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

Criar os componentes de layout

Cada layout envolve o conteúdo no seu layout base com um estilo diferente:

---
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>

Conectar a rota

Na rota da sua página, importe cada layout e associe o valor do template:

---
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} />

A rota continua pequena. Cada componente de layout cuida da própria marcação e do próprio estilo. Adicionar um layout significa criar um componente, adicionar a opção ao campo de seleção e adicionar uma linha ao mapa.

Adicionar mais layouts

Opções de layout comuns:

• Default — coluna de conteúdo estreita, boa para leitura
• Full Width — área de conteúdo mais larga, sem barra lateral
• Landing Page — sem cabeçalho/rodapé, com seções hero
• Sidebar — conteúdo com uma área de widgets ao lado

Cada um é apenas mais um componente Astro no seu diretório src/layouts/ e mais uma entrada no mapa de layouts da rota.