E EmDash CMS Everything Guides, use cases, plugins, templates
Deutsch

Website-Einstellungen

Auf dieser Seite

Website-Einstellungen sind globale Konfigurationswerte für Ihre Website: Titel, Slogan, Logo, Social-Media-Links und Anzeigeeinstellungen. Administratoren verwalten diese über die Admin-Oberfläche, und Sie greifen in Ihren Templates darauf zu.

Einstellungen abfragen

Verwenden Sie getSiteSettings(), um alle Website-Einstellungen abzurufen:

---
import { getSiteSettings } from "emdash";

const settings = await getSiteSettings();
---

<html lang="en">
  <head>
    <title>{settings.title}</title>
    {settings.favicon && (
      <link rel="icon" href={settings.favicon.url} />
    )}
  </head>
  <body>
    <header>
      {settings.logo ? (
        <img src={settings.logo.url} alt={settings.logo.alt || settings.title} />
      ) : (
        <span class="site-title">{settings.title}</span>
      )}
      {settings.tagline && <p class="tagline">{settings.tagline}</p>}
    </header>
    <slot />
  </body>
</html>

Verfügbare Einstellungen

EmDash bietet diese Kern-Einstellungen:

interface SiteSettings {
	// Identität
	title: string;
	tagline?: string;
	logo?: MediaReference;
	favicon?: MediaReference;

	// URLs
	url?: string;

	// Anzeige
	postsPerPage: number;
	dateFormat: string;
	timezone: string;

	// Social Media
	social?: {
		twitter?: string;
		github?: string;
		facebook?: string;
		instagram?: string;
		linkedin?: string;
		youtube?: string;
	};
}

interface MediaReference {
	mediaId: string;
	alt?: string;
	url?: string; // Aufgelöste URL (nur lesbar)
}

Einzelne Einstellungen abrufen

Verwenden Sie getSiteSetting(), um eine einzelne Einstellung nach Schlüssel abzurufen:

import { getSiteSetting } from "emdash";

const title = await getSiteSetting("title");
// Gibt zurück: "Meine Website" oder undefined

const logo = await getSiteSetting("logo");
// Gibt zurück: { mediaId: "...", url: "/_emdash/api/media/file/..." }

Dies ist nützlich, wenn Sie nur einen oder zwei Werte benötigen und das Abrufen aller Werte vermeiden möchten.

Einstellungen in Komponenten verwenden

Website-Header

Die folgende Komponente rendert einen Header mit dem Website-Logo und dem Hauptmenü:

---
import { getSiteSettings, getMenu } from "emdash";

const settings = await getSiteSettings();
const menu = await getMenu("primary");
---

<header class="header">
  <a href="/" class="logo">
    {settings.logo ? (
      <img
        src={settings.logo.url}
        alt={settings.logo.alt || settings.title}
        width="150"
        height="50"
      />
    ) : (
      <span class="site-name">{settings.title}</span>
    )}
  </a>

  {menu && (
    <nav>
      {menu.items.map(item => (
        <a href={item.url}>{item.label}</a>
      ))}
    </nav>
  )}
</header>

Die folgende Komponente rendert Links für jede konfigurierte Social-Media-Plattform:

---
import { getSiteSetting } from "emdash";

const social = await getSiteSetting("social");

const platforms = [
  { key: "twitter", label: "Twitter", baseUrl: "https://twitter.com/" },
  { key: "github", label: "GitHub", baseUrl: "https://github.com/" },
  { key: "facebook", label: "Facebook", baseUrl: "https://facebook.com/" },
  { key: "instagram", label: "Instagram", baseUrl: "https://instagram.com/" },
  { key: "linkedin", label: "LinkedIn", baseUrl: "https://linkedin.com/in/" },
  { key: "youtube", label: "YouTube", baseUrl: "https://youtube.com/@" },
] as const;
---

{social && (
  <div class="social-links">
    {platforms.map(({ key, label, baseUrl }) => (
      social[key] && (
        <a
          href={baseUrl + social[key]}
          rel="noopener noreferrer"
          target="_blank"
          aria-label={label}
        >
          {label}
        </a>
      )
    ))}
  </div>
)}

SEO-Meta-Tags

Die folgende Komponente erstellt Dokument- und Open-Graph-Meta-Tags aus den Website-Einstellungen:

---
import { getSiteSettings } from "emdash";

interface Props {
  title?: string;
  description?: string;
  image?: string;
}

const settings = await getSiteSettings();
const {
  title,
  description = settings.tagline,
  image,
} = Astro.props;

const documentTitle = title
  ? `${title} | ${settings.title}`
  : settings.title;
const ogTitle = title ?? settings.title;
---

<title>{documentTitle}</title>
{description && <meta name="description" content={description} />}

<!-- Open Graph -->
<meta property="og:title" content={ogTitle} />
{description && <meta property="og:description" content={description} />}
{image && <meta property="og:image" content={image} />}
{settings.url && <meta property="og:url" content={settings.url + Astro.url.pathname} />}

<!-- Twitter -->
{settings.social?.twitter && (
  <meta name="twitter:site" content={settings.social.twitter} />
)}
<meta name="twitter:card" content={image ? "summary_large_image" : "summary"} />

Datumsformatierung

Verwenden Sie die Einstellungen dateFormat und timezone für eine konsistente Datumsanzeige:

---
import { getSiteSetting } from "emdash";

interface Props {
  date: string;
}

const { date } = Astro.props;
const dateFormat = await getSiteSetting("dateFormat") || "MMMM d, yyyy";
const timezone = await getSiteSetting("timezone") || "UTC";

// Formatierung mit Intl.DateTimeFormat oder einer Bibliothek wie date-fns
const formatted = new Intl.DateTimeFormat("en-US", {
  timeZone: timezone,
  dateStyle: "long",
}).format(new Date(date));
---

<time datetime={date}>{formatted}</time>

Admin-API

Einstellungen programmatisch mit einer GET-Anfrage abrufen:

GET /_emdash/api/settings

Die Antwort ist ein JSON-Objekt mit den Einstellungen:

{
	"title": "Meine EmDash-Website",
	"tagline": "Ein modernes CMS",
	"logo": {
		"mediaId": "med_123",
		"url": "/_emdash/api/media/file/abc123"
	},
	"postsPerPage": 10,
	"dateFormat": "MMMM d, yyyy",
	"timezone": "America/New_York",
	"social": {
		"twitter": "@handle",
		"github": "username"
	}
}

Einstellungen aktualisieren (partielle Updates werden unterstützt):

POST /_emdash/api/settings
Content-Type: application/json

{
  "title": "Neuer Website-Titel",
  "tagline": "Aktualisierter Slogan"
}

Nur die angegebenen Felder werden geändert. Ausgelassene Felder behalten ihre aktuellen Werte.

Medien-Referenzen

Die Einstellungen logo und favicon speichern Medien-Referenzen. Wenn Sie sie lesen, löst EmDash die url-Eigenschaft automatisch auf:

const logo = await getSiteSetting("logo");
// {
//   mediaId: "med_123",
//   alt: "Website-Logo",
//   url: "/_emdash/api/media/file/abc123"
// }

Beim Aktualisieren über die API geben Sie nur die mediaId an:

{
	"logo": {
		"mediaId": "med_456",
		"alt": "Neues Logo"
	}
}

API-Referenz

getSiteSettings()

Ruft alle Website-Einstellungen mit aufgelösten Medien-URLs ab.

Rückgabe: Promise<Partial<SiteSettings>>

Gibt ein partielles Objekt zurück. Nicht gesetzte Werte sind undefined.

getSiteSetting(key)

Ruft eine einzelne Einstellung nach Schlüssel ab.

Parameter:

  • key — Der Einstellungsschlüssel (z.B. "title", "logo", "social")

Rückgabe: Promise<SiteSettings[K] | undefined>

Typsicher: Der Rückgabetyp entspricht dem angeforderten Schlüssel.