Layouts de Página

Permita que editores escolham um layout por página (por exemplo, Padrão, Largura Total, Página de Destino) de um menu suspenso no editor, usando um campo select mapeado para componentes de layout na sua rota de página.

Como funciona

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

Isso usa o campo select do EmDash e o modelo de componentes do Astro.

Adicionar o campo

Na interface de administração, adicione um campo select à sua coleção de páginas com o slug template e suas opções de layout (por exemplo, “Default”, “Full Width”). Ou inclua-o nos seus dados de seed:

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

Criar componentes de layout

Cada layout envolve o conteúdo no seu layout base com estilos diferentes:

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

Conectar a rota

Na sua rota de página, importe cada layout e mapeie o valor do modelo:

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

A rota permanece pequena. Cada componente de layout possui sua própria marcação e estilo. Adicionar um layout é: criar um componente, adicionar a opção ao campo select, adicionar uma linha ao mapa.

Adicionar mais layouts

Opções comuns de layout:

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

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