Website-Einstellungen

Website-Einstellungen halten Werte, die für die gesamte Website gelten. Vorlagen können sie für Site-Identität, Paginierung, Datumsbehandlung, Social-Profile und Suchmetadaten verwenden.

Einstellungen konfigurieren

Öffnen Sie Settings im EmDash-Admin und wählen Sie dann die Seite für die benötigten Werte:

General enthält Site-Titel, Tagline, Logo, Favicon, öffentliche URL, Beiträge pro Seite, Datumsformat und Zeitzone.
Social enthält Profil-Handles für die unterstützten Social-Dienste.
SEO enthält den Titeltrenner, das Standard-Social-Bild, Verifizierungswerte und den Inhalt von robots.txt.

Öffnen Sie die relevante Einstellungsseite.
Geben Sie die Werte ein, die von den Vorlagen und Metadaten der Website verwendet werden.
Speichern Sie die Seite und laden Sie dann eine öffentliche Seite neu, die diese Einstellungen rendert.

Einstellungen sind optional, bis sie konfiguriert sind. Eine Vorlage sollte für jeden benötigten Wert einen geeigneten Fallback bereitstellen.

Einstellungen in einem Layout lesen

Verwenden Sie getSiteSettings(), wenn ein Layout mehrere Werte braucht. Es gibt die konfigurierten Schlüssel als partielles Objekt zurück und löst Medienreferenzen vor der Rückgabe auf.

Das folgende Basis-Layout verwendet Site-Identitätseinstellungen und lässt EmDashHead das konfigurierte Favicon, das Standard-Social-Bild und die siteweiten Verifizierungsmetadaten 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. Request-Caching lässt diesen Aufruf das Ergebnis des Layouts wiederverwenden, statt eine weitere Einstellungsabfrage auszuführen.

Auf einer serverseitig gerenderten Inhaltsseite übergeben Sie die Inhaltsreferenz an createPublicPageContext() und laden Sie den Eintrag mit getEmDashEntry(). EmDashHead wendet dann die SEO-Panel-Werte des Eintrags über die Site-Standardwerte an. Siehe SEO-Panel-Daten rendern für das vollständige Inhaltsseiten-Muster.

Eine Einstellung lesen

Verwenden Sie getSiteSetting(), wenn eine Komponente einen Wert braucht und ihr Parent das Einstellungsobjekt noch nicht geladen 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 eine Musterzeichenkette wie MMMM d, yyyy. Intl.DateTimeFormat verarbeitet diese Syntax nicht; verwenden Sie eine Formatierungsbibliothek, die Musterzeichenketten unterstützt, wenn die Vorlage sie exakt anwenden muss.

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 Dienstes um.

Die folgende Komponente rendert die konfigurierten X- und GitHub-Profile:

---
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 Facebook-, Instagram-, LinkedIn- und YouTube-Werte an. Diese Felder speichern den im Admin eingegebenen Seiten-, Profil-, Kanal- oder Handle-Wert; das Theme bleibt für das öffentliche URL-Format verantwortlich.

Medieneinstellungen verwenden

Logo, Favicon und Standard-Social-Bild werden als Medienreferenzen gespeichert. Beim Lesen fügt EmDash die aktuelle URL sowie bekannten Inhaltstyp, Breite und Höhe hinzu. Wenn das referenzierte Medienobjekt gelöscht wurde, 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 dieses Feld auf null setzen; das Weglassen eines Feldes lässt seinen aktuellen Wert unverändert.

Website-Einstellungen halten ein Logo und ein Favicon. Eine dunkle Bildvariante gehört zu einem EmDash-Bildfeld, in dem der Redakteur das Gegenstück wählen kann und die Image-Komponente zwischen ihnen wechseln kann. Siehe Dark Mode für dieses Muster.

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

Einstellungen konfigurieren

Einstellungen in einem Layout lesen

Eine Einstellung lesen

Social-Profile rendern

Medieneinstellungen verwenden