Konfigurationsdatei

Jede Option in blume.config.ts, von Website-Metadaten und Inhaltsquellen bis zu den Links, die zu den einzelnen Konfigurationsanleitungen der jeweiligen Funktionen führen.

Blume liest blume.config.ts aus dem Stammverzeichnis deines Projekts. Umschließe deine Konfiguration mit defineConfig, um Autovervollständigung und Typprüfung zu erhalten — jedes Feld ist optional und hat einen sinnvollen Standardwert.

import { defineConfig } from "blume";

export default defineConfig({
  title: "My Docs",
  description: "Documentation for my project.",
});

Ein vollständiges Beispiel

Ein umfassenderes Beispiel, das die gängigsten Optionen abdeckt (den Rest findest du in der Anleitung zur jeweiligen Funktion):

import sitemap from "@astrojs/sitemap";
import { defineConfig } from "blume";

export default defineConfig({
  // Site
  title: "My Docs",
  description: "Documentation for my project.",
  logo: "/logo.svg",

  // Astro integrations — installed and versioned by this site
  integrations: [sitemap()],

  // Content
  content: {
    root: "docs",
  },

  // Theme — see the Theming guide
  theme: {
    accent: "teal",
    radius: "md",
    mode: "system",
  },

  // Search — see the Search guide
  search: {
    provider: "orama",
  },

  // Markdown features
  markdown: {
    imageZoom: true,
    code: {
      icons: true, // language icon in the code-block header
      wrap: false, // wrap long lines instead of scrolling
    },
    codeBlocks: {
      theme: {
        light: "github-light", // bundled name or custom Shiki theme object
        dark: "github-dark",
      },
    },
  },

  // AI — see the AI guide
  ai: {
    llmsTxt: true,
    // MCP server (needs server output)
    mcp: {
      enabled: false,
      route: "/mcp",
    },
  },

  // SEO — OG images, feeds, sitemap, structured data; see the SEO guide
  seo: {
    og: { enabled: true },
    rss: { enabled: true, types: ["blog", "changelog"] },
    sitemap: true,
    robots: true,
    structuredData: true,
  },

  // Deployment — see the Deployment guide
  deployment: {
    output: "static",
    site: "https://docs.example.com",
  },
});

Website

Logo

Verweise mit logo auf eine SVG-Datei, und Blume bindet sie inline ein, sodass ein Logo mit currentColor automatisch dem hellen und dunklen Theme folgt:

logo: "/logo.svg",

Die SVG-Datei kann im Stammverzeichnis deines Projekts oder in public/ liegen. Die Marke besteht aus einer Bildmarke (image) plus einer Wortmarke (text); in der Objektform kannst du beide unabhängig voneinander festlegen:

logo: {
  image: "/logo.svg", // string, or { light, dark, alt } for themed raster art
  text: "Acme",       // wordmark beside the mark
  href: "/",          // overrides the brand link (defaults to "/")
},

image nimmt denselben Wert wie die Kurzform entgegen — einen einzelnen Pfad oder { light, dark, alt } für getrennte helle/dunkle Grafiken (Rasterbilder müssen in public/ liegen).

text steuert die Wortmarke unabhängig von der Bildmarke:

• Lässt du text weg, verwendet die Marke den title deiner Website (Standardverhalten).
• Setze text: "", um nur die Bildmarke anzuzeigen — praktisch, wenn das Logobild die Wortmarke bereits enthält.
• Setze text ohne image für ein reines Text-Logo.

Favicon

Es gibt keine Favicon-Option — Blume erkennt es automatisch anhand des Dateinamens, so wie Next.js es tut. Lege eine icon- oder favicon-Datei (.svg, .png oder .ico) in das Stammverzeichnis deines Projekts oder in das Verzeichnis public/, und sie wird zum Symbol im Browser-Tab:

my-docs/
├─ blume.config.ts
├─ icon.png          ← picked up automatically
└─ docs/

Sind mehrere vorhanden, gewinnt SVG vor PNG vor ICO, und eine Datei in public/ wird gegenüber einer im Stammverzeichnis bevorzugt. Findet Blume kein Icon, greift es auf die eigene Bildmarke zurück.

Apple-Touch-Icon

Das Symbol, das iOS verwendet, wenn jemand deine Website zum Home-Bildschirm hinzufügt, wird auf dieselbe Weise erkannt. Lege eine apple-icon-Datei (.png, .jpg oder .jpeg) — oder eine apple-touch-icon.png, den Namen, den die meisten Favicon-Generatoren ausgeben — in das Stammverzeichnis deines Projekts oder in das Verzeichnis public/, und Blume richtet <link rel="apple-touch-icon"> für dich ein. Es gibt keinen Standardwert; wird keine Datei gefunden, wird kein Tag ausgegeben.

my-docs/
├─ blume.config.ts
├─ apple-icon.png     ← picked up automatically
└─ docs/

Lege die Datei in public/ statt in das Stammverzeichnis des Projekts: iOS ignoriert die Inline-Daten-URI, die Blume für ein Icon im Stammverzeichnis verwendet, sodass nur eine Datei in public/ (ausgeliefert unter /apple-icon.png) zuverlässig auf den Home-Bildschirm gelangt.

Banner

Zeige eine websiteweite Ankündigungsleiste über dem Header an. Übergib eine Zeichenkette oder ein Objekt mit einem Link und einer Schließen-Schaltfläche:

banner: "Docs are in beta — expect changes.",

banner: {
  content: "Blume v1 is here!",
  link: { text: "Read more", href: "/blog/v1" },
  dismissible: true,
  id: "v1",
},

Ist dismissible aktiviert, zeigt die Leiste eine Schließen-Schaltfläche und bleibt für diese Besucherin bzw. diesen Besucher danach ausgeblendet. Der Schlüssel für das Ausblenden basiert standardmäßig auf dem Inhaltstext, sodass eine Bearbeitung der Nachricht das Banner zurückbringt; setze eine feste id, damit es über Bearbeitungen hinweg ausgeblendet bleibt.

Inhalte

Wo deine Inhalte liegen und wie Blume sie findet. Unter Seiten erfährst du, wie aus Dateien Routen werden.

content: {
  root: "docs",
}

Statische Assets liegen in public/ — eine Datei unter public/logo.png wird unter /logo.png ausgeliefert, sodass eine Referenz wie ![](/images/create.png) auf public/images/create.png verweist. Bilder, die über einen relativen Pfad referenziert werden (![](./diagram.png)), liegen stattdessen neben deinen Inhalten und werden beim Build optimiert.

Bilder

Lokale Bilder, die über einen relativen Pfad referenziert werden, werden beim Build automatisch optimiert — komprimiert, in WebP konvertiert und mit intrinsischen width/height-Attributen versehen, damit das Layout beim Laden nicht springt. Es gibt nichts zu konfigurieren; Hinweise zum Verfassen findest du unter Links und Bilder.

Externe Bilder werden standardmäßig unverändert ausgeliefert. Damit Blume sie ebenfalls beim Build herunterlädt und optimiert, autorisiere ihre Hosts:

image: {
  domains: ["cdn.example.com"],
  remotePatterns: [{ protocol: "https", hostname: "**.example.com" }],
}

Frontmatter

Das Frontmatter einer Seite wird streng validiert — ein unbekannter Schlüssel lässt den Build fehlschlagen, sodass Tippfehler früh auffallen. Um projektspezifische Metadaten zu hinterlegen (eine verantwortliche Person, ein Prüfdatum), deklariere die zusätzlichen Schlüssel unter frontmatter.extend, jeweils zugeordnet zu einem von dir bereitgestellten Schema:

import { defineConfig } from "blume";
import { z } from "zod";

export default defineConfig({
  frontmatter: {
    extend: {
      owner: z.string(),
      reviewedAt: z.coerce.date().optional(),
    },
  },
});

Jede Standard-Schema-Bibliothek funktioniert — Zod (in der Version, die dein Projekt installiert), Valibot, ArkType. Schlüssel außerhalb der Erweiterung bleiben streng validiert, das Erkennen von Tippfehlern ändert sich also nicht. Zur Validierungssemantik siehe Benutzerdefinierte Schlüssel.

Schlüssel unter extend gelten websiteweit. Um Schlüssel nur auf Seiten eines Inhaltstyps vorzuschreiben — der status eines RFCs, der service eines Runbooks — deklariere sie stattdessen pro Typ unter content.types:

import { defineConfig } from "blume";
import { z } from "zod";

export default defineConfig({
  content: {
    types: {
      rfc: {
        facets: ["domain", "status"],
        frontmatter: {
          domain: z.string(),
          status: z.enum(["draft", "review", "enforced"]),
        },
      },
    },
  },
});

Ein Schlüssel kann websiteweit oder pro Typ deklariert werden, nicht beides. Wie die Zuordnung aufgelöst wird, erfährst du unter Schlüssel pro Typ.

facets benennt die benutzerdefinierten Schlüssel, deren Werte zu filterbaren Metadaten werden: Sie werden mit den Suchdokumenten mitgeführt (blume-search.json und der MCP-Index), und die MCP-Tools akzeptieren eine filters-Eingabe, die gegen sie abgeglichen wird, sodass ein Agent zum Beispiel nur enforced-RFCs in der Domäne architecture abrufen kann. Jedes Facet muss ein deklarierter benutzerdefinierter Schlüssel sein — pro Typ oder websiteweit — und nur Zeichenketten-Werte (oder in Zeichenketten umgewandelte Zahlen/Booleans) werden facettiert.

GitHub

Verweise Blume mit github auf dein Repository. Das versorgt den Repository-Link im Header sowie die Seitenaktionen Edit on GitHub und Give feedback:

github: {
  owner: "acme",
  repo: "docs",
}

Zuletzt geändert

Zeige am Ende jeder Seite eine Zeile „Zuletzt aktualisiert am …“ an. Standardmäßig deaktiviert; setze lastModified auf true, um das Datum jeder Seite aus ihrer Git-Historie abzuleiten:

lastModified: true,

Die Git-Quelle liest den jüngsten Commit, der die jeweilige Datei berührt hat, funktioniert also in jedem Git-Repository — auch in Monorepos — und benötigt die Historie des Repositorys zur Build-Zeit (vermeide einen flachen Checkout mit --depth 1 in der CI). Das seiteneigene lastModified-Frontmatter gewinnt immer, was praktisch ist, um ein Datum festzuschreiben oder für Dateien, die noch nicht committet sind:

---
title: My page
lastModified: 2026-06-20
---

Ist die Funktion aktiviert, wird das Datum außerdem als schema.org-dateModified in den strukturierten Daten der Seite ausgegeben.

Datumsformat

Sowohl der Stempel „Zuletzt aktualisiert“ als auch die Zeitleiste des Changelogs rendern ihre Daten über dasselbe dateFormat, damit sie sich gleich lesen. Daten werden immer in der Sprache der Website gerendert; dateFormat steuert die Form. Standardmäßig wird die lange Form verwendet (21. Juli 2026, 2026年7月21日):

dateFormat: { dateStyle: "long" },

dateFormat wird direkt an die Optionen von Intl.DateTimeFormat durchgereicht. Verwende eine dateStyle-Voreinstellung für eine bestimmte Länge:

dateFormat: { dateStyle: "medium" },

Oder die einzelnen Komponentenfelder für einen numerischen Hausstil wie 2026/07/21:

dateFormat: { year: "numeric", month: "2-digit", day: "2-digit" },

SEO

Open-Graph-Bilder, RSS-Feeds und strukturierte JSON-LD-Daten, gruppiert unter seo. Metadaten, Frontmatter-Überschreibungen und die vollständige Referenz findest du in der SEO-Anleitung.

seo: {
  og: { enabled: true },
  rss: { enabled: true, types: ["blog", "changelog"] },
  sitemap: true,
  robots: true,
  structuredData: true,
}

Diese Funktionen entfalten ihre volle Wirkung mit einer absoluten deployment.site für vollständige URLs.

Inhaltsverzeichnis

Die Gliederung „Auf dieser Seite“ ist standardmäßig aktiviert und listet H2–H3-Überschriften auf. Schalte sie mit toc ab oder ändere den Überschriftenbereich:

export default defineConfig({
  toc: false, // hide it everywhere
});

Oder schränke stattdessen den Überschriftenbereich ein:

export default defineConfig({
  toc: { minHeadingLevel: 2, maxHeadingLevel: 4 },
});

Funktionsoptionen

Zu jeder dieser Optionen gibt es eine eigene Anleitung. Das Konfigurationsfeld ist der Einstiegspunkt:

Rangfolge

Einstellungen werden von der niedrigsten zur höchsten Priorität aufgelöst, sodass du nur überschreibst, was du brauchst: