Los ajustes del sitio guardan valores que se aplican a todo el sitio. Las plantillas pueden usarlos para la identidad del sitio, la paginación, el manejo de fechas, los perfiles sociales y los metadatos de búsqueda.
Configurar ajustes
Abre Settings en el administrador de EmDash y elige la página de los valores que necesitas:
- General contiene el título del sitio, el eslogan, el logo, el favicon, la URL pública, las publicaciones por página, el formato de fecha y la zona horaria.
- Social contiene identificadores de perfil de los servicios sociales admitidos.
- SEO contiene el separador del título, la imagen social predeterminada, los valores de verificación y el contenido de
robots.txt.
-
Abre la página de ajustes correspondiente.
-
Introduce los valores que usan las plantillas y los metadatos del sitio.
-
Guarda la página y recarga una página pública que renderice esos ajustes.
Los ajustes son opcionales hasta que se configuran. Una plantilla debe proporcionar un respaldo adecuado para cualquier valor que necesite.
Leer ajustes en un diseño
Usa getSiteSettings() cuando un diseño necesite varios valores. Devuelve las claves configuradas como un objeto parcial y resuelve las referencias de medios antes de devolverlas.
El siguiente diseño base usa los ajustes de identidad del sitio y deja que EmDashHead aplique el favicon configurado, la imagen social predeterminada y los metadatos de verificación de todo el sitio:
---
import { getSiteSettings } from "emdash";
import { createPublicPageContext } from "emdash/page";
import { EmDashHead } from "emdash/ui";
interface Props {
title?: string;
description?: string;
}
const { title, description } = Astro.props;
const settings = await getSiteSettings();
const siteTitle = settings.title ?? "My site";
const fullTitle = title ? `${title} — ${siteTitle}` : siteTitle;
const pageDescription = description ?? settings.tagline;
const page = createPublicPageContext({
Astro,
kind: "custom",
pageType: "website",
title: fullTitle,
pageTitle: title ?? siteTitle,
description: pageDescription,
siteName: siteTitle,
});
---
<!doctype html>
<html lang={Astro.currentLocale ?? "en"}>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>{fullTitle}</title>
<EmDashHead page={page} />
</head>
<body>
<header>
<a href="/" aria-label={siteTitle}>
{settings.logo?.url ? (
<img
src={settings.logo.url}
alt={settings.logo.alt ?? siteTitle}
width={settings.logo.width}
height={settings.logo.height}
/>
) : (
siteTitle
)}
</a>
{settings.tagline && <p>{settings.tagline}</p>}
</header>
<main>
<slot />
</main>
</body>
</html>EmDashHead también llama a getSiteSettings(). El almacenamiento en caché de la solicitud hace que esa llamada reutilice el resultado del diseño en lugar de ejecutar otra consulta de ajustes.
En una página de contenido renderizada en el servidor, pasa la referencia de contenido a createPublicPageContext() y obtén la entrada con getEmDashEntry(). EmDashHead aplica entonces los valores del panel SEO de la entrada sobre los valores predeterminados del sitio. Consulta Renderizar datos del panel SEO para el patrón completo de página de contenido.
Leer un ajuste
Usa getSiteSetting() cuando un componente necesite un valor y su padre aún no haya obtenido el objeto de ajustes.
El siguiente componente formatea una marca de tiempo en la zona horaria configurada:
---
import { getSiteSetting } from "emdash";
interface Props {
date: Date;
}
const { date } = Astro.props;
const timezone = await getSiteSetting("timezone") ?? "UTC";
const formatted = new Intl.DateTimeFormat(Astro.currentLocale, {
dateStyle: "long",
timeZone: timezone,
}).format(date);
---
<time datetime={date.toISOString()}>{formatted}</time>El ajuste dateFormat es una cadena de patrón como MMMM d, yyyy. Intl.DateTimeFormat no consume esa sintaxis; usa una biblioteca de formato que admita cadenas de patrón cuando la plantilla deba aplicarla exactamente.
Renderizar perfiles sociales
Los ajustes sociales almacenan identificadores o nombres de usuario en lugar de enlaces completos. La plantilla decide qué perfiles mostrar y convierte cada valor configurado en la URL del servicio.
El siguiente componente renderiza los perfiles de X y GitHub configurados:
---
import { getSiteSetting } from "emdash";
const social = await getSiteSetting("social");
const xHandle = social?.twitter?.replace(/^@/, "");
---
{(xHandle || social?.github) && (
<nav aria-label="Social profiles">
<ul>
{xHandle && (
<li>
<a href={`https://x.com/${xHandle}`} rel="me noopener" target="_blank">
X
</a>
</li>
)}
{social?.github && (
<li>
<a
href={`https://github.com/${social.github}`}
rel="me noopener"
target="_blank"
>
GitHub
</a>
</li>
)}
</ul>
</nav>
)}Aplica el mismo patrón a los valores configurados de Facebook, Instagram, LinkedIn y YouTube. Esos campos almacenan el valor de página, perfil, canal o identificador introducido en el administrador; el tema sigue siendo responsable del formato de la URL pública.
Usar ajustes de medios
El logo, el favicon y la imagen social predeterminada se almacenan como referencias de medios. Al leerlos, EmDash añade la URL actual y cualquier tipo de contenido, ancho y alto conocidos. Si el elemento de medios referenciado se ha eliminado, esos valores resueltos pueden estar ausentes, así que comprueba url antes de renderizar una imagen.
Quita una de estas imágenes en el administrador con su botón Remove. Los clientes de API y MCP pueden quitar logo, favicon o seo.defaultOgImage estableciendo ese campo en null; omitir un campo deja su valor actual sin cambios.
Los ajustes del sitio guardan un logo y un favicon. Una variante de imagen oscura pertenece a un campo de imagen de EmDash, donde el editor puede elegir la contraparte y el componente Image puede alternar entre ellas. Consulta Modo oscuro para ese patrón.
La referencia de la API de runtime documenta las claves de ajuste y los tipos de retorno de las consultas. Para cambios programáticos, autentícate con un token Bearer y añade X-EmDash-Request: 1 a cada solicitud que cambie el estado. Consulta los endpoints de settings para los cuerpos de solicitud y las respuestas.