Website-Einstellungen

Die Site-Einstellungen enthalten Werte, die für die gesamte Site gelten. Vorlagen können sie für die Site-Identität, die Paginierung, die Datumsbehandlung, Social-Profile und Such-Metadaten verwenden.

Einstellungen konfigurieren

Öffnen Sie im EmDash-Admin Settings und wählen Sie dann die Seite mit den Werten, die Sie benötigen:

• General enthält den Site-Titel, den Untertitel, das Logo, das Favicon, die öffentliche URL, die Beiträge pro Seite, das Datumsformat und die Zeitzone. Ändern Sie die öffentliche URL mit Change domain; siehe Zu einer neuen Domain wechseln.
• Social enthält Profil-Handles für die unterstützten Social-Dienste.
• SEO enthält das Titeltrennzeichen, das Standard-Social-Bild, Verifizierungswerte und den Inhalt von robots.txt. Was die einzelnen Werte bewirken, steht unter Integrierte SEO-Funktionen.

Einstellungen sind optional, bis sie konfiguriert werden. Eine Vorlage sollte für jeden Wert, den sie benötigt, einen passenden Fallback bereitstellen.

Einstellungen in einem Layout lesen

Verwenden Sie getSiteSettings(), wenn ein Layout mehrere Werte benötigt. Die Funktion gibt die konfigurierten Schlüssel als partielles Objekt zurück und löst Medienverweise auf, bevor sie zurückgegeben werden.

Das folgende Basis-Layout verwendet Einstellungen zur Site-Identität und lässt EmDashHead das konfigurierte Favicon, das Standard-Social-Bild und die Site-weiten Verifizierungs-Metadaten anwenden:

---
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 ruft ebenfalls getSiteSettings() auf. Durch das Request-Caching verwendet dieser Aufruf das Ergebnis des Layouts wieder, anstatt eine weitere Einstellungsabfrage auszuführen.

Übergeben Sie auf einer serverseitig gerenderten Inhaltsseite die Inhaltsreferenz an createPublicPageContext() und rufen Sie den Eintrag mit getEmDashEntry() ab. EmDashHead wendet dann die Werte aus dem SEO-Bereich des Eintrags über die Site-Standardwerte an. Das vollständige Muster für Inhaltsseiten finden Sie unter SEO-Metadaten auf einer Inhaltsseite ausgeben.

Eine Einstellung lesen

Verwenden Sie getSiteSetting(), wenn eine Komponente nur einen Wert benötigt und ihre übergeordnete Komponente das Einstellungsobjekt noch nicht abgerufen hat.

Die folgende Komponente formatiert einen Zeitstempel in der konfigurierten Zeitzone:

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

Die Einstellung dateFormat ist ein Musterstring wie MMMM d, yyyy. Intl.DateTimeFormat verarbeitet diese Syntax nicht; verwenden Sie eine Formatierungsbibliothek, die Musterstrings unterstützt, wenn die Vorlage sie exakt anwenden soll.

Social-Profile rendern

Die Social-Einstellungen speichern Handles oder Benutzernamen statt vollständiger Links. Die Vorlage entscheidet, welche Profile angezeigt werden, und wandelt jeden konfigurierten Wert in die URL des jeweiligen Dienstes um.

Die folgende Komponente rendert die konfigurierten Profile für X und GitHub:

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

Wenden Sie dasselbe Muster auf die konfigurierten Werte für Facebook, Instagram, LinkedIn und YouTube an. Diese Felder speichern den im Admin eingegebenen Seiten-, Profil-, Kanal- oder Handle-Wert; für das öffentliche URL-Format bleibt das Theme zuständig.

Medieneinstellungen verwenden

Das Logo, das Favicon und das Standard-Social-Bild werden als Medienverweise gespeichert. Beim Lesen ergänzt EmDash die aktuelle URL sowie, soweit bekannt, den Inhaltstyp, die Breite und die Höhe. Wurde das referenzierte Medienelement gelöscht, können diese aufgelösten Werte fehlen. Prüfen Sie daher url, bevor Sie ein Bild rendern.

Entfernen Sie eines dieser Bilder im Admin mit der Schaltfläche Remove. API- und MCP-Clients können logo, favicon oder seo.defaultOgImage entfernen, indem sie das Feld auf null setzen; wird ein Feld weggelassen, bleibt sein aktueller Wert unverändert. Dasselbe gilt für die Felder innerhalb von seo und social: Senden Sie nur die Felder, die Sie ändern möchten, und senden Sie einen leeren String, um ein Textfeld zu leeren.

Die Site-Einstellungen enthalten ein Logo und ein Favicon. Eine dunkle Bildvariante gehört zu einem EmDash-Bildfeld, in dem die Redakteurin oder der Redakteur das Gegenstück auswählen kann und die Komponente Image zwischen beiden wechseln kann. Dieses Muster finden Sie unter Dunkelmodus.

Die Laufzeit-API-Referenz dokumentiert die Einstellungsschlüssel und die Rückgabetypen der Abfragen. Für programmatische Änderungen authentifizieren Sie sich mit einem Bearer-Token und fügen jeder zustandsändernden Anfrage X-EmDash-Request: 1 hinzu. Anfragekörper und Antworten finden Sie unter Einstellungs-Endpunkte.