Sections

As seções são grupos reutilizáveis de blocos de Portable Text. Os editores podem inseri-las em qualquer campo de Portable Text e, depois, alterar os blocos inseridos sem modificar a seção de origem.

Use seções para pontos de partida repetíveis, como uma chamada para ação, a biografia de um autor ou um aviso padrão. Use uma área de widgets quando um valor gerenciado de forma centralizada precisar ser atualizado em todos os lugares onde aparece.

Criar uma seção

Crie e gerencie as seções em Sections na administração do EmDash.

Os slugs das seções contêm letras minúsculas, números e hifens. O slug identifica a seção nos templates e na API; ele não é a URL de uma página pública.

Inserir uma seção no conteúdo

O editor copia o Portable Text da seção para a entrada. Edições posteriores na seção da biblioteca não alteram as cópias que já foram inseridas.

Fornecer seções em um arquivo seed

Um tema ou starter pode fornecer seções em seu arquivo seed. Atribua um _key estável a cada bloco e span de Portable Text, como nos demais conteúdos seed.

O arquivo seed a seguir adiciona uma seção de newsletter:

{
  "version": "1",
  "sections": [
    {
      "slug": "newsletter-signup",
      "title": "Newsletter signup",
      "description": "A short newsletter call to action",
      "keywords": ["newsletter", "subscribe", "email"],
      "source": "theme",
      "content": [
        {
          "_type": "block",
          "_key": "newsletter-heading",
          "style": "h3",
          "children": [
            {
              "_type": "span",
              "_key": "newsletter-heading-text",
              "text": "Receive new articles by email"
            }
          ]
        },
        {
          "_type": "block",
          "_key": "newsletter-body",
          "style": "normal",
          "children": [
            {
              "_type": "span",
              "_key": "newsletter-body-text",
              "text": "Subscribe for occasional updates."
            }
          ]
        }
      ]
    }
  ]
}

Execute emdash seed --validate antes de aplicar um arquivo seed escrito à mão. Consulte Arquivos seed para ver as opções de aplicação e de tratamento de conflitos.

As seções fornecidas por um tema usam a origem theme. As seções criadas na administração usam user, e os blocos reutilizáveis do WordPress importados pelo EmDash usam import. Consulte Importação de Conteúdo para ver o fluxo de importação.

Renderizar uma seção em um template

A maioria dos sites renderiza o conteúdo de uma seção como parte da entrada para a qual ele foi copiado. Para renderizar diretamente o valor atual da biblioteca, busque a seção pelo slug e passe o conteúdo dela para PortableText.

O componente a seguir renderiza uma seção de newsletter consultada de forma centralizada:

---
import { getSection } from "emdash";
import { PortableText } from "emdash/ui";

const section = await getSection("newsletter-signup");
---

{section && (
  <aside aria-label={section.title}>
    <PortableText value={section.content} />
  </aside>
)}

Esse caminho de renderização direta lê o valor da biblioteca a cada renderização, portanto uma edição posterior na seção afeta todos os lugares que usam este componente.

A referência da API de runtime documenta as consultas de seções e a paginação. Para alterações programáticas, autentique-se com um token Bearer e adicione X-EmDash-Request: 1 a toda requisição que altera o estado. Consulte os endpoints de seções para ver os corpos das requisições e as respostas.