Las secciones son grupos reutilizables de bloques de Portable Text. Los editores pueden insertarlas en cualquier campo de Portable Text y luego modificar los bloques insertados sin cambiar la sección de origen.
Usa las secciones para puntos de partida repetibles, como una llamada a la acción, la biografía de un autor o un aviso estándar. Usa un área de widgets cuando un valor gestionado de forma centralizada deba actualizarse en todos los lugares donde aparece.
Crear una sección
Crea y gestiona las secciones en Sections dentro de la administración de EmDash.
-
Haz clic en New section e introduce un título, un slug y, opcionalmente, una descripción.
-
Añade el contenido que los editores deben recibir cuando inserten la sección.
-
Añade palabras clave de búsqueda con los términos que los editores podrían usar al buscar la sección.
-
Guarda la sección.
Los slugs de las secciones contienen letras minúsculas, números y guiones. El slug identifica la sección en las plantillas y en la API; no es la URL de una página pública.
Insertar una sección en el contenido
-
Coloca el cursor en un campo de Portable Text y escribe
/section. -
Busca la sección por título, descripción o palabra clave.
-
Selecciona la sección para insertar sus bloques en la posición del cursor.
-
Edita el contenido insertado según sea necesario y luego guarda la entrada.
El editor copia el Portable Text de la sección en la entrada. Las ediciones posteriores de la sección de la biblioteca no modifican las copias que ya se han insertado.
Proporcionar secciones en un archivo seed
Un tema o una plantilla de inicio puede proporcionar secciones en su archivo seed. Asigna un _key estable a cada bloque y span de Portable Text, igual que en el resto del contenido seed.
El siguiente archivo seed añade una sección de boletín:
{
"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."
}
]
}
]
}
]
}Ejecuta emdash seed --validate antes de aplicar un archivo seed escrito a mano. Consulta Archivos seed para ver las opciones de aplicación y de gestión de conflictos.
Las secciones proporcionadas por un tema usan el origen theme. Las secciones creadas en la administración usan user, y los bloques reutilizables de WordPress que importa EmDash usan import. Consulta Importación de contenido para ver el flujo de importación.
Renderizar una sección en una plantilla
La mayoría de los sitios renderizan el contenido de una sección como parte de la entrada en la que se copió. Para renderizar directamente el valor actual de la biblioteca, obtén la sección por su slug y pasa su contenido a PortableText.
El siguiente componente renderiza una sección de boletín 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>
)}Esta vía de renderizado directo lee el valor de la biblioteca en cada renderizado, por lo que una edición posterior de la sección afecta a todos los lugares que usan este componente.
La referencia de la API de runtime documenta las consultas de secciones y la paginación. Para los cambios programáticos, autentícate con un token Bearer y añade X-EmDash-Request: 1 a cada solicitud que modifique el estado. Consulta los endpoints de secciones para ver los cuerpos de las solicitudes y las respuestas.