Ajustes del sitio

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 tratamiento 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 con los valores que necesitas:

• General contiene el título del sitio, el eslogan, el logotipo, el favicon, la URL pública, las entradas por página, el formato de fecha y la zona horaria. Cambia la URL pública con Change domain; consulta Cambiar a un nuevo dominio.
• Social contiene los identificadores de perfil de los servicios sociales compatibles.
• SEO contiene el separador de título, la imagen social predeterminada, los valores de verificación y el contenido de robots.txt. Consulta Funciones SEO integradas para saber qué hace cada uno.

Los ajustes son opcionales hasta que se configuran. Una plantilla debe ofrecer un valor de reserva adecuado para cualquier valor que necesite.

Leer ajustes en un diseño

Usa getSiteSettings() cuando un layout necesite varios valores. Devuelve las claves configuradas como un objeto parcial y resuelve las referencias de medios antes de devolverlas.

El siguiente layout 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(). La caché de solicitudes hace que esa llamada reutilice el resultado del layout en lugar de ejecutar otra consulta de ajustes.

En una página de contenido renderizada en el servidor, pasa la referencia del 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 los metadatos SEO en una página de contenido para ver el patrón completo de una página de contenido.

Leer un ajuste

Usa getSiteSetting() cuando un componente necesite un solo valor y su padre aún no haya obtenido el objeto de ajustes.

El siguiente componente da formato a 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 interpreta esa sintaxis; usa una biblioteca de formato que admita cadenas de patrón cuando la plantilla necesite aplicarla exactamente.

Renderizar perfiles sociales

Los ajustes sociales guardan 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 guardan 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 logotipo, el favicon y la imagen social predeterminada se guardan como referencias de medios. Al leerlos, EmDash añade la URL actual y, si se conocen, el tipo de contenido, el ancho y el alto. Si el elemento de medios referenciado se ha eliminado, esos valores resueltos pueden faltar, así que comprueba url antes de renderizar una imagen.

Elimina una de estas imágenes en el administrador con su botón Remove. Los clientes de API y MCP pueden eliminar logo, favicon o seo.defaultOgImage estableciendo ese campo en null; si se omite un campo, su valor actual no cambia. Lo mismo se aplica a los campos dentro de seo y social: envía solo los campos que quieras cambiar y envía una cadena vacía para borrar un campo de texto.

Los ajustes del sitio contienen un logotipo y un favicon. Una variante oscura de la imagen pertenece a un campo de imagen de EmDash, donde el editor puede elegir la contraparte y el componente Image puede alternar entre ambas. Consulta Modo Oscuro para ver ese patrón.

La referencia de la API de tiempo de ejecución documenta las claves de los ajustes y los tipos de retorno de las consultas. Para hacer cambios mediante programación, autentícate con un token Bearer y añade X-EmDash-Request: 1 a cada solicitud que cambie el estado. Consulta los endpoints de ajustes para ver los cuerpos de las solicitudes y las respuestas.