--- title: Benutzerdefinierte Seiten description: >- Binde vollständig benutzerdefinierte .astro-Routen neben deiner Dokumentation ein und lies Konfiguration, Navigation und Inhalte deiner Website aus dem Modul blume:data. --- Der Großteil einer Blume-Website besteht aus Markdown, aber manchmal benötigst du eine Route, die _kein_ Dokument ist — eine Landingpage, eine Preisseite, einen handgebauten Blog- oder Changelog-Index oder ein interaktives Dashboard. Lege eine `.astro`-Datei in deinem **pages**-Ordner ab, und Blume bindet sie als echte Route ein, direkt neben deinen Inhalten. ## Eine Seite hinzufügen [#add-a-page] Erstelle im Stammverzeichnis deines Projekts einen `pages/`-Ordner und füge eine `.astro`-Datei hinzu: ```astro pages/pricing.astro lineNumbers --- import data from "blume:data"; ---

Pricing for {data.config.title}

``` `blume dev` erkennt sie sofort, und `blume build` rendert sie vorab zu statischem HTML. Der Ordnername ist über [`content.pages`](/docs/configuration#content) konfigurierbar (Standard `"pages"`). Benutzerdefinierte Seiten behalten ihren ursprünglichen Speicherort auf der Festplatte, sodass relative Importe, Komponentenimporte und [`getStaticPaths`](https://docs.astro.build/en/reference/routing-reference/#getstaticpaths) genau so funktionieren wie in einem einfachen Astro-Projekt — Blume bindet jede Datei dort ein, wo sie liegt, statt sie zu kopieren. ## Dateien und Routen [#files-and-routes] Der Pfad jeder Datei innerhalb des pages-Ordners wird zu ihrer Route. `index` verweist auf den übergeordneten Ordner, und dynamische `[param]`-Segmente bleiben erhalten: | Datei | Route | | ------------------------- | ------------- | | `pages/pricing.astro` | `/pricing` | | `pages/blog/index.astro` | `/blog` | | `pages/blog/[slug].astro` | `/blog/:slug` | | `pages/changelog.astro` | `/changelog` | Eine benutzerdefinierte Seite **gewinnt** gegenüber einer generierten Route mit demselben Pfad. Fügt man beispielsweise `pages/changelog.astro` hinzu, ersetzt das Blumes [generierte Changelog-Zeitleiste](/docs/advanced/changelog) durch deine eigene. ## Website-Daten lesen [#reading-site-data] Importiere `blume:data`, um dieselbe aufgelöste Konfiguration, Navigation, Routen und Feeds zu lesen, die auch der Rest der Website verwendet: ```astro pages/all-pages.astro lineNumbers --- import data from "blume:data"; ---

All pages

``` Innerhalb eines Blume-Projekts ist das Modul automatisch typisiert. Du kannst die Struktur mit `import type { BlumeData } from "blume"` auch explizit einbinden — für typisierte Hilfsfunktionen, Props oder deine eigene tsconfig: ```ts import type { BlumeData, BlumeRoute } from "blume"; const indexable = (data: BlumeData): BlumeRoute[] => data.routes.filter((route) => route.indexable); ``` Das Modul stellt Folgendes bereit: | Prop | Type | Default | Description | | - | - | - | - | | `config` | `BlumeDataConfig` | - | Aufgelöste Website-Einstellungen: title, description, logo, favicon, appleIcon, banner, theme, site, repoUrl, github (owner, repo, host und die REST-API-Basis — null, wenn nicht gesetzt), search, i18n, mcp, ask, og, analytics, feedback, structuredData, toc, codeThemes, codeWrap und imageZoom. | | `navigation` | `Navigation` | - | Die aus deinen Inhalten abgeleitete Seitenleiste, Tabs und Auswahlelemente (Standard-Locale). | | `navigationByLocale` | `Record` | - | Navigationsbäume pro Locale, indiziert nach Locale-Code. Leer, sofern i18n nicht konfiguriert ist. | | `routes` | `BlumeRoute[]` | - | Jede Inhaltsseite: { id, path, title, locale, indexable, hidden, draft, fallback, editUrl, lastModified, alternates, collection, entryId }. | | `feeds` | `BlumeFeed[]` | - | Generierte RSS-Feeds: { href, title }. | | `fontCssVars` | `string[]` | - | CSS-Variablennamen für die konfigurierten Schriftarten (Astro--Integration). | | `ui` | `UIStrings` | - | Aufgelöste UI-Chrome-Zeichenketten für die Standard-Locale (Beschriftungen für Suche, Seitenleiste und Fußzeile). | | `uiByLocale` | `Record` | - | UI-Zeichenketten pro Locale, indiziert nach Locale-Code. Leer, sofern i18n nicht konfiguriert ist. | `routes` enthält Seiten-Metadaten, aber kein Frontmatter wie `type` oder `date`. Um eine nach Inhaltstyp gefilterte Liste zu erstellen — einen Blog- oder Changelog-Index — kombiniere es mit Astros `docs`-Inhaltssammlung, die das Frontmatter enthält: ```astro pages/blog/index.astro lineNumbers --- import { getCollection } from "astro:content"; import data from "blume:data"; // Each route's id matches its collection entry id. const routeById = new Map(data.routes.map((route) => [route.id, route.path])); const posts = (await getCollection("docs")) .filter((entry) => entry.data.type === "blog" && !entry.data.draft) .map((entry) => ({ description: entry.data.description, href: routeById.get(entry.id), title: entry.data.title, })); ---
    { posts.map((post) => (
  • {post.title}

    {post.description}

    • )) }
``` ## Laufzeit-Hilfsfunktionen [#runtime-helpers] `blume/runtime` bündelt die gängigen Datenmuster, sodass du nicht auf die Interna von `blume:data` zugreifen musst. **`getBlumeCollection(data, query?)`** wählt Inhaltsrouten aus — gefiltert nach Sammlung, Locale oder Pfadpräfix, wobei Entwürfe und ausgeblendete Seiten ausgeschlossen und die Ergebnisse nach Pfad sortiert werden — genau das, was ein benutzerdefinierter Index braucht: ```astro pages/blog/index.astro lineNumbers --- import data from "blume:data"; import { getBlumeCollection } from "blume/runtime"; const posts = getBlumeCollection(data, { prefix: "/blog" }); --- ``` **``** rendert den Textkörper eines Inhaltseintrags innerhalb einer benutzerdefinierten Seite, wobei Blumes integrierte MDX-Komponenten (Hinweisboxen, Karten, Schritte …) bereits eingebunden sind — um ein Dokument auf einer Landingpage hervorzuheben oder einen maßgeschneiderten Index zu bauen, der echte Inhalte zeigt: ```astro pages/index.astro lineNumbers --- import BlumePage from "blume/components/BlumePage.astro"; import data from "blume:data"; import { getBlumeCollection } from "blume/runtime"; const [intro] = getBlumeCollection(data, { prefix: "/docs" }); --- {intro && } ``` Übergib `components`, um eigene Überschreibungen oder Islands hinzuzufügen (die in der generierten Laufzeitumgebung liegen und standardmäßig nicht importiert werden), und `collection`, um aus einer anderen Sammlung als `"docs"` zu lesen. ## Das Website-Layout verwenden [#using-the-site-layout] `RootLayout` verleiht einer benutzerdefinierten Seite das komplette Dokumentations-Chrome — Kopfzeile, Seitenleiste, Suche, Inhaltsverzeichnis und Theme —, indem es sie in dasselbe dreispaltige Raster einbettet, das auch die generierten Seiten verwenden. Für eine Landing- oder Marketingseite steht dieses Raster im Weg, greif deshalb stattdessen zu **`PageLayout`**: Es liefert die Dokumenthülle, die Kopfzeile, das Theme und die Schriftarten und dann einen einzelnen `` über die volle Breite (keine Seitenleiste, kein Fließtext, kein Inhaltsverzeichnis). Ein optionaler `footer`-Slot wird nach `
` gerendert: ```astro pages/index.astro lineNumbers --- import PageLayout from "blume/components/layout/PageLayout.astro"; import data from "blume:data"; import Footer from "./_home/Footer.astro"; const { config } = data; ---

Build docs that fly