Aither (Deutsch)

Erste Schritte mit Astro-Theme-Aither

Sat, 14 Mar 2026 08:00:00 GMT

Diese Anleitung bringt Sie von null bis zu einem bereitgestellten, mehrsprachigen Blog. Lesen Sie alles der Reihe nach oder springen Sie direkt zum Abschnitt, den Sie gerade brauchen. ## Voraussetzungen - [Node.js](https://nodejs.org/) 22 LTS oder neuer - [pnpm](https://pnpm.io/) 10 oder neuer - Ein GitHub-Konto - Ein [Cloudflare](https://cloudflare.com/) Konto (für die Bereitstellung) ## Installation ```bash git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git cd YOUR_REPO corepack enable pnpm install pnpm validate pnpm dev ``` Öffnen Sie anschließend `http://localhost:4321` im Browser. ## Projektstruktur ```text src/ ├── components/ # Astro- und React-Komponenten ├── config/site.ts # Name, Navigation, Footer, Social Links ├── content/posts/ # Beiträge nach Locale ├── i18n/ # UI-Übersetzungen ├── layouts/ # Layout-Komponenten ├── lib/ # Hilfsfunktionen ├── pages/ # Seiten und Routen └── styles/global.css # Tailwind-v4-Token ``` ## Konfiguration ### Site Config `src/config/site.ts` ist die zentrale Konfigurationsdatei für den gesamten Blog: ```typescript export const siteConfig = { name: 'Ihr Blogname', title: 'Ihr Untertitel', description: 'Ihre SEO-Beschreibung', author: { name: 'Ihr Name', avatar: '', }, }; ``` Wichtige Bereiche: | Bereich | Funktion | |--------|----------| | `name` | Seitentitel in Navigation und Footer | | `social` | Footer-Links wie GitHub, X, Discord, E-Mail und RSS | | `nav` | Einträge der Hauptnavigation | | `footer.sections` | Linkspalten im Footer | | `ui.defaultMode` | Standardmodus: `light`, `dark` oder `system` | | `ui.defaultStyle` | Standardstil wie `default` oder `evolution` | | `ui.showMoreThemesMenu` | Zeigt oder versteckt den More-Themes-Menüpunkt | | `blog.paginationSize` | Beiträge pro Seite | | `sections` | Eigene Inhaltssammlungen | ### Umgebungsvariablen ```bash cp .env.example .env ``` Leere Variablen deaktivieren die jeweilige Integration automatisch. | Variable | Dienst | Erforderlich | |---------|--------|--------------| | `PUBLIC_GA_ID` | Google Analytics | Nein | | `PUBLIC_CRISP_WEBSITE_ID` | Crisp Chat | Nein | | `PUBLIC_GISCUS_REPO` | Giscus | Nein | | `PUBLIC_GISCUS_REPO_ID` | Giscus | Nein | | `PUBLIC_GISCUS_CATEGORY` | Giscus | Nein | | `PUBLIC_GISCUS_CATEGORY_ID` | Giscus | Nein | ### Site URL Die Produktions-URL wird in `astro.config.mjs` gesetzt: ```javascript import { defineConfig } from 'astro/config'; import aither from '@aither/astro'; export default defineConfig({ site: 'https://your-domain.pages.dev', integrations: [aither()], }); ``` ## Beiträge schreiben Erstellen Sie eine neue `.mdx`-Datei in `src/content/posts/en/`: ```markdown --- title: Mein erster Beitrag date: "2026-03-14T16:00:00+08:00" category: General description: Kurze Zusammenfassung für SEO und Social Previews. tags: [Topic, Another] pinned: false --- Ihr Inhalt beginnt hier. ``` ### Frontmatter-Referenz | Feld | Typ | Pflicht | Beschreibung | |-----|-----|---------|--------------| | `title` | string | Ja | Beitragstitel | | `date` | date | Ja | Veröffentlichungszeitpunkt (z. B. `2026-03-14T16:00:00+08:00`) | | `category` | string | Nein | Einzelne Kategorie | | `description` | string | Nein | SEO-Beschreibung | | `tags` | string[] | Nein | Schlagwörter | | `pinned` | boolean | Nein | Beitrag oben anheften | | `image` | string | Nein | Titelbild | ### MDX-Komponenten MDX erlaubt das Einbinden interaktiver Komponenten direkt im Inhalt: ```mdx import MyChart from '@/components/MyChart' ``` ## Internationalisierung Das Theme unterstützt standardmäßig 11 Sprachen, darunter Englisch, vereinfachtes Chinesisch, traditionelles Chinesisch, Deutsch, Französisch, Italienisch, Spanisch, Russisch, Koreanisch, Indonesisch und brasilianisches Portugiesisch. Für eine übersetzte Version legen Sie dieselbe Datei im Zielordner an: ```text src/content/posts/en/my-post.mdx src/content/posts/de/my-post.mdx src/content/posts/zh-hans/my-post.mdx ``` UI-Texte liegen in `src/i18n/messages/`. ## Eigene Inhaltsbereiche Zusätzliche Sammlungen wie Übersetzungen, Notizen oder Tutorials lassen sich über `src/content.config.ts` und `src/config/site.ts` registrieren. Danach werden Listen-, Detailseiten und Navigationseinträge automatisch erzeugt. ## Theming Es gibt zwei Ebenen: - Farbmodus: `light`, `dark`, `system` - Stilmodus: `default` oder ein eingebauter Stil wie `evolution` In `src/config/site.ts`: ```typescript ui: { defaultMode: 'system', defaultStyle: 'default', showMoreThemesMenu: true, }, ``` Farben kommen aus CSS-Variablen in `src/styles/global.css`. Standardmäßig nutzt das Theme einen System-Sans-Stack; Code und Protokollflächen verwenden eine Monospace-Schrift. ## SEO und AI Jede Seite liefert bereits die wichtigsten Maschinen- und SEO-Schnittstellen: - `/sitemap-index.xml` - `/rss.xml` - `/robots.txt` - `/llms.txt` - `/llms-full.txt` - `/posts/slug.md` - JSON-LD und Open-Graph-Metadaten ## Bereitstellung ### Cloudflare Pages Empfehlung: Legen Sie das Pages-Projekt zuerst an. Der Ablauf verwendet standardmäßig den Repository-Namen oder `CLOUDFLARE_PAGES_PROJECT_NAME`, wenn Sie ihn überschreiben möchten. Richten Sie diese GitHub-Secrets ein: - `CLOUDFLARE_API_TOKEN` - `CLOUDFLARE_ACCOUNT_ID` Führen Sie danach `pnpm validate` aus und pushen Sie nach `main`. ## Nützliche Befehle | Befehl | Beschreibung | |-------|--------------| | `pnpm dev` | Lokalen Entwicklungsserver starten | | `pnpm validate` | Vollständige Validierung vor dem Push ausführen | | `pnpm build` | Produktions-Build erstellen | | `pnpm preview` | Produktions-Build lokal testen | ## Versionsschema Öffentliche Release-Tags folgen CalVer-Namen wie `v2026.04.08`.

Bewährte Praktiken für KI-Agenten in echten Projekten (Beispiel)

Sat, 10 Jan 2026 08:00:00 GMT

KI-Agenten sind dann am nützlichsten, wenn sie nicht mehr magisch wirken, sondern wie ein belastbares Werkzeug im Alltag. Teams mit den besten Ergebnissen bitten einen Agenten nicht darum, "alles zu übernehmen". Sie definieren die Aufgabe, liefern den richtigen Kontext und sorgen dafür, dass das Ergebnis leicht überprüfbar ist. Das klingt simpel, verändert aber alles. Ein gut vorbereiteter Agent kann schnell arbeiten und überraschend solide Ergebnisse liefern. Ein schlecht abgegrenzter Agent verschwendet dagegen Kontext, macht unnötige Umwege und liefert etwas zurück, das selbstsicher klingt, aber das eigentliche Problem verfehlt. ## Beginnen Sie mit einer klar begrenzten Aufgabe Die besten Agentenaufgaben sind konkret und abgegrenzt. Sagen Sie nicht einfach "verbessere diese App", sondern zum Beispiel "behebe die Überlappung der mobilen Navigation auf der Blog-Seite" oder "füge einen Kurztest für den RSS-Feed hinzu". Eine enge Aufgabenstellung gibt dem Agenten ein stabiles Ziel und reduziert das Risiko, dass er nebenbei andere Teile des Systems verändert. Das erleichtert auch das Review. Wenn die Aufgabe klein ist, sieht man schnell, was sich geändert hat, was getestet werden sollte und ob das Ergebnis wirklich korrekt ist. ## Machen Sie den Kontext explizit Agenten arbeiten besser, wenn wichtiger Kontext aufgeschrieben ist und nicht nur implizit mitschwingt. Ein guter Arbeitsauftrag enthält in der Regel: - das genaue Ziel - die relevanten Dateien oder Verzeichnisse - Einschränkungen und Dinge, die sich nicht ändern dürfen - das erwartete Ergebnis oder die Abschlusskriterien - den Validierungsbefehl, der am Ende ausgeführt werden soll Menschen können aus halbfertigen Anweisungen viel ableiten. Agenten sind wörtlicher. Wenn ein Detail wichtig ist, schreiben Sie es auf. ## Werkzeuge sind besser als Raten Ein Agent sollte das aktuelle System prüfen, bevor er Änderungen vorschlägt. Das bedeutet, relevante Dateien zu lesen, die Build-Konfiguration zu prüfen und bestehende Konventionen zu verstehen, statt sich auf allgemeines Vorwissen zu verlassen. Dasselbe gilt für externe Systeme. Wenn eine Antwort von aktueller Dokumentation, Bereitstellungseinstellungen oder realem Laufzeitverhalten abhängt, sollte der Agent Werkzeuge nutzen und den tatsächlichen Zustand prüfen, statt aus dem Gedächtnis zu raten. Darum sind maschinenlesbare Schnittstellen so wichtig. Klare Dateistrukturen, Validierungsskripte, typsichere Schemas und explizite Konfigurationen machen Agenten zuverlässiger, weil sich die Umgebung selbst erklärt. ## Halten Sie das Ergebnis überprüfbar Ein guter Agenten-Workflow endet nicht mit "hier ist die Antwort", sondern mit Belegen. Bitten Sie den Agenten zu dokumentieren, was geändert wurde, was getestet wurde und was er nicht verifizieren konnte. Bevorzugen Sie Ergebnisse, die sich schnell prüfen lassen: - ein kleiner, klarer Diff - ein erfolgreich durchlaufener Validierungsbefehl - ein reproduzierbarer Screenshot oder eine Vorschau - ein kurzer Hinweis auf Risiken oder Annahmen Verifikation macht aus plausibler Arbeit verlässliche Arbeit. ## Planen Sie für Fehler und Korrekturen Auch gute Agenten biegen manchmal falsch ab. Die richtige Antwort darauf ist nicht, Agenten zu vermeiden, sondern Korrekturen billig zu machen. Nutzen Sie kleine Aufgaben, stabile Skripte und klare Zwischenstände. Halten Sie Abläufe möglichst idempotent. Vermeiden Sie Workflows, bei denen ein einzelner Fehler ein großes Durcheinander verursacht. Wenn sich eine Aufgabe in Lesen, Planen, Umsetzen und Verifizieren aufteilen lässt, tun Sie genau das. Agenten funktionieren am besten in Systemen, die leicht zu verstehen, leicht zu testen und leicht weiterzuentwickeln sind. ## Menschliches Review bleibt wichtig Agenten sind hervorragend bei Geschwindigkeit, Abdeckung und Wiederholung. Menschen bleiben für Urteilsvermögen verantwortlich. Produktentscheidungen, Sicherheitsgrenzen, Tonalität, Marke und langfristige Wartbarkeit sollten weiterhin von einer Person geprüft werden, die den größeren Kontext versteht. Das Ziel ist nicht, Menschen aus dem Prozess zu entfernen. Das Ziel ist, sie von mechanischer Arbeit zu entlasten, damit mehr Zeit für echte Entscheidungen bleibt. ## Ein praktisches Denkmodell Behandeln Sie einen KI-Agenten wie einen fähigen Operator, der schnell, ausdauernd und wörtlich ist. Geben Sie ihm einen klaren Auftrag. Geben Sie ihm die richtigen Werkzeuge. Lassen Sie ihn seine Arbeit offenlegen. Und prüfen Sie das Ergebnis mit derselben Sorgfalt wie jede andere wichtige Änderung. Dort entsteht der eigentliche Hebel.

KI-Agenten und Tool-Nutzung (Beispiel)

Fri, 09 Jan 2026 08:00:00 GMT

Ein KI-Agent ist ein Sprachmodell, das handeln kann — nicht nur Text generieren. Es kann das Web durchsuchen, Code ausführen, APIs aufrufen, Dateien lesen und entscheiden, was als Nächstes zu tun ist. Dieser Wandel von passiver Textgenerierung zu aktivem Problemlösen ist eine der bedeutendsten Entwicklungen in der angewandten KI. ## Vom Chat zur Aktion Ein Chatbot beantwortet Fragen. Ein Agent löst Probleme. Der Unterschied ist Autonomie: Agenten entscheiden, welche Tools sie verwenden, in welcher Reihenfolge und wie sie mit Fehlern umgehen. Betrachten Sie den praktischen Unterschied. Sie fragen einen Chatbot: „Wie ist das Wetter in Tokyo?" Er antwortet möglicherweise basierend auf seinen Trainingsdaten — die Monate oder Jahre alt und fast sicher falsch sind. Sie fragen einen Agenten dieselbe Frage, und er ruft eine Wetter-API auf, holt die aktuellen Daten und liefert eine genaue, aktuelle Antwort. Der Chatbot generiert plausiblen Text. Der Agent interagiert mit der Welt. ### Das Spektrum der Autonomie Nicht alle Agenten sind gleich autonom. Es gibt ein Spektrum: 1. **Tool-unterstützter Chat** — das Modell kann Tools aufrufen, aber nur als direkte Antwort auf Benutzeranfragen. Ein Tool-Aufruf pro Runde. 2. **Mehrstufige Agenten** — das Modell kann mehrere Tool-Aufrufe verketten, um eine Aufgabe zu erledigen, und entscheidet die Reihenfolge selbst. 3. **Vollautonome Agenten** — das Modell arbeitet über längere Zeiträume selbstständig, trifft Entscheidungen, behandelt Fehler und verfolgt Ziele mit minimaler menschlicher Aufsicht. Die meisten Produktionssysteme befinden sich heute auf Stufe 1-2. Vollautonome Agenten sind ein aktives Forschungsgebiet mit noch zu lösenden Sicherheitsherausforderungen. ## Tool-Nutzung Tool-Nutzung ermöglicht einem KI-Modell, externe Funktionen aufzurufen. Das Modell entscheidet, wann ein Tool benötigt wird, generiert die richtigen Parameter und integriert das Ergebnis in seine Antwort. Dies verwandelt einen Textgenerator in einen leistungsfähigen Assistenten. ### Wie Tool-Nutzung funktioniert Die Mechanik ist geradlinig: 1. **Tool-Definition** — Sie beschreiben dem Modell die verfügbaren Tools, einschließlich ihrer Namen, Parameter und Funktionen. Dies wird typischerweise als strukturiertes JSON im System-Prompt oder über ein dediziertes API-Feld bereitgestellt. 2. **Entscheidung** — bei der Verarbeitung einer Benutzeranfrage entscheidet das Modell, ob ein Tool hilfreich wäre. Falls ja, generiert es einen Tool-Aufruf mit den entsprechenden Parametern. 3. **Ausführung** — Ihre Anwendung führt den Tool-Aufruf aus (das Modell führt ihn nicht direkt aus) und gibt das Ergebnis zurück. 4. **Integration** — das Modell integriert das Tool-Ergebnis in seine Antwort an den Benutzer. ### Beispiel einer Tool-Definition ```json { "name": "search_documentation", "description": "Search the product documentation for relevant articles", "parameters": { "type": "object", "properties": { "query": { "type": "string", "description": "The search query" }, "max_results": { "type": "integer", "description": "Maximum number of results to return", "default": 5 } }, "required": ["query"] } } ``` Das Modell sieht diese Definition und weiß, dass es Dokumentation durchsuchen kann. Wenn ein Benutzer eine Produktfrage stellt, generiert das Modell einen Aufruf wie `search_documentation(query="how to reset password")`, Ihr System führt die Suche aus, und das Modell verwendet die Ergebnisse, um eine genaue Antwort zu formulieren. ### Häufige Tool-Kategorien Produktive Agentensysteme bieten typischerweise Tools in mehreren Kategorien: - **Informationsabruf** — Websuche, Datenbankabfragen, Dateilesen, API-Aufrufe - **Code-Ausführung** — Ausführen von Python, JavaScript oder Shell-Befehlen in einer Sandbox-Umgebung - **Kommunikation** — E-Mails senden, Nachrichten posten, Tickets erstellen - **Dateimanipulation** — Dateien erstellen, bearbeiten und organisieren - **Systemoperationen** — Code deployen, Infrastruktur verwalten, CI-Pipelines ausführen Die bereitgestellten Tools definieren die Grenzen dessen, was der Agent tun kann. Ein gut gestaltetes Tool-Set gibt dem Agenten genug Fähigkeiten, um nützlich zu sein, ohne genug Macht, um gefährlich zu sein. ## Agentische Schleifen Das mächtigste Pattern ist die agentische Schleife: Das Modell plant einen Schritt, führt ihn aus, beobachtet das Ergebnis und entscheidet den nächsten Schritt. Diese Schleife setzt sich fort, bis die Aufgabe abgeschlossen ist oder das Modell feststellt, dass es nicht weitermachen kann. ### Die Schleife in der Praxis Betrachten Sie einen Agenten, der einen fehlschlagenden Test debuggen soll: 1. **Planen** — „Ich sollte zuerst die Testdatei lesen, um zu verstehen, was sie testet" 2. **Ausführen** — ruft `read_file("tests/auth.test.ts")` auf 3. **Beobachten** — sieht, dass der Test einen 200-Status erwartet, aber 401 bekommt 4. **Planen** — „Ich sollte die Auth-Middleware prüfen, um zu sehen, was 401 zurückgibt" 5. **Ausführen** — ruft `read_file("src/middleware/auth.ts")` auf 6. **Beobachten** — findet einen Bug in der Token-Ablaufprüfung 7. **Planen** — „Ich sollte den Ablaufvergleich korrigieren" 8. **Ausführen** — ruft `edit_file(...)` mit der Korrektur auf 9. **Beobachten** — bestätigt, dass die Änderung vorgenommen wurde 10. **Planen** — „Ich sollte den Test ausführen, um die Korrektur zu verifizieren" 11. **Ausführen** — ruft `run_command("pnpm test tests/auth.test.ts")` auf 12. **Beobachten** — Test besteht 13. **Abgeschlossen** — meldet die Korrektur an den Benutzer Jeder Schritt beinhaltet, dass das Modell über den aktuellen Zustand nachdenkt, entscheidet, was als Nächstes zu tun ist, und sich basierend auf seinen Entdeckungen anpasst. Dies unterscheidet sich grundlegend von einem linearen Skript — der Agent behandelt unerwartete Erkenntnisse und ändert den Kurs bei Bedarf. ### Fehlerbehandlung in der Schleife Robuste Agenten müssen Fehler elegant behandeln. Ein Tool könnte einen Fehler zurückgeben, eine Datei existiert möglicherweise nicht, oder eine API könnte ratenlimitiert sein. Gutes Agentendesign umfasst: - **Wiederholungslogik** — transiente Fehler mit Backoff wiederholen - **Alternative Strategien** — wenn ein Ansatz fehlschlägt, einen anderen versuchen - **Graceful Degradation** — wenn die Aufgabe nicht vollständig erledigt werden kann, so viel wie möglich abschließen und erklären, was übrig bleibt - **Schleifenlimits** — eine maximale Anzahl von Iterationen festlegen, um Endlosschleifen zu verhindern ## Effektive Tools entwerfen Die Qualität eines Agentensystems hängt stark von der Qualität seiner Tools ab. Schlecht gestaltete Tools führen zu verwirrten Agenten und falschen Ergebnissen. ### Prinzipien für Tool-Design - **Klare Namen** — `search_users` ist besser als `query_db_1`. Das Modell verwendet den Namen, um zu entscheiden, wann es das Tool aufruft. - **Beschreibende Parameter** — fügen Sie Beschreibungen für jeden Parameter hinzu. Das Modell liest diese Beschreibungen, um zu bestimmen, welche Werte es übergeben soll. - **Fokussierter Umfang** — jedes Tool sollte eine Sache gut machen. Ein `read_file`-Tool und ein `write_file`-Tool sind besser als ein `file_operations`-Tool mit einem Mode-Parameter. - **Nützliche Fehler** — geben Sie klare Fehlermeldungen zurück, die dem Modell helfen zu verstehen, was schiefgegangen ist und was es stattdessen versuchen sollte. - **Idempotent wenn möglich** — Tools, die sicher wiederholt werden können, vereinfachen die Fehlerbehandlung. ## Risiken Agenten, die handeln können, können falsch handeln. Sandboxing, Bestätigungsschritte und menschliche Überprüfung sind essentielle Sicherheitsmaßnahmen für jedes produktive Agentensystem. ### Risikokategorien - **Destruktive Aktionen** — ein Agent mit Dateisystemzugriff könnte wichtige Dateien löschen. Ein Agent mit Datenbankzugriff könnte Tabellen löschen. Sandbox-Umgebungen und Berechtigungsgrenzen sind essentiell. - **Datenexfiltration** — ein Agent, der sowohl sensible Daten lesen als auch Netzwerkanfragen stellen kann, könnte versehentlich (oder durch Prompt-Injection) Informationen leaken. - **Unkontrollierte Kosten** — ein Agent in einer Schleife, der teure APIs aufruft, kann schnell erhebliche Kosten verursachen. Budgetlimits und Rate-Limiting sind praktische Notwendigkeiten. - **Falsche Aktionen mit Überzeugung ausgeführt** — der Agent könnte eine Anfrage missverstehen und eine irreversible Aktion ausführen. Bei Hochrisiko-Operationen immer menschliche Bestätigung einfordern. ### Sicherheitsmuster Produktive Agentensysteme sollten mehrere Sicherheitsmuster implementieren: 1. **Minimale Rechte** — geben Sie dem Agenten nur die Tools, die er für seine spezifische Aufgabe benötigt, nicht mehr 2. **Sandboxing** — führen Sie Code und Dateioperationen in isolierten Umgebungen aus 3. **Bestätigungsgates** — fordern Sie menschliche Genehmigung für destruktive oder irreversible Aktionen 4. **Audit-Logging** — protokollieren Sie jeden Tool-Aufruf und sein Ergebnis zur Überprüfung 5. **Kill-Switches** — stellen Sie Mechanismen bereit, um einen laufenden Agenten sofort zu stoppen 6. **Budgetlimits** — setzen Sie harte Obergrenzen für API-Aufrufe, Token-Nutzung und Rechenzeit Das Ziel ist nicht, Agenten daran zu hindern, nützlich zu sein — es ist sicherzustellen, dass sie innerhalb wohldefinierter Grenzen nützlich sind.

✨ Warum Astro-Theme-Aither

Sat, 03 Jan 2026 08:00:00 GMT

Ein AI-natives Astro-Theme, das daran glaubt, dass Text an sich schön ist. Astro-Theme-Aither ist für Leser gebaut, die wegen der Worte kommen, nicht wegen der Dekoration. ## Design-Philosophie Die meisten Blog-Themes konkurrieren um Aufmerksamkeit mit Hero-Bildern, Animationen und Popups. Nichts davon hilft beim Lesen. Astro-Theme-Aither verfolgt den gegenteiligen Ansatz: minimales Design, nicht minimale Technik. Minimales Design erfordert höhere, nicht niedrigere Ingenieurqualität. ## Typografie - **Schriftgröße** — 17px Basis - **Zeilenhöhe** — 1.47 - **Buchstabenabstand** — -0.022em - **Überschriftenskala** — 31px → 22px → 19px → 17px - **Lesebreite** — 65-75 Zeichen pro Zeile ## Auf Astro gebaut Astro ist das beste Framework für inhaltsorientierte Websites. Es gibt standardmäßig statisches HTML aus. ## Features - **Tailwind CSS v4** — `@theme` Design Tokens - **Apple HIG Typografie** — 17px / 1.47 / -0.022em - **View Transitions API** — kreisförmige Enthüllungsanimation - **i18n** — Mehrsprachigkeit mit automatischer Browserspracherkennung - **Beiträge pinnen** — wichtige Beiträge oben anzeigen - **Content Collections** — typsicheres Markdown - **Dark Mode** — Hell / Dunkel / System - **SEO** — Open Graph, kanonische URLs - **RSS + Sitemap** — auto-generiert - **Google Analytics** — optional, in Partytown Web Worker - **Tests** — Vitest + Playwright - **Cloudflare Pages** — Bereitstellungsablauf ## Für wen? - **Persönliche Blogger** — deren Texte im Mittelpunkt stehen sollen - **Technische Autoren** — die exzellentes Code-Block-Rendering brauchen - **Mehrsprachige Autoren** — die integriertes i18n benötigen - **Entwickler** — die gut entwickelten Code schätzen Schreiben Sie über alles — die Typografie macht es schön.

📝 Markdown Stilrichtlinie

Fri, 02 Jan 2026 08:00:00 GMT

Dieser Beitrag zeigt alle Markdown-Features, die Astro-Theme-Aither unterstützt. Nutzen Sie ihn als Referenz beim Schreiben Ihrer eigenen Beiträge. Setzen Sie ein Lesezeichen — er deckt die gesamte Bandbreite der verfügbaren Formatierungsoptionen ab. ## Überschriften Verwenden Sie `##` für Abschnittsüberschriften, `###` für Unterabschnitte und `####` für Unter-Unterabschnitte. Vermeiden Sie `#` im Beitragsinhalt — der Beitragstitel wird bereits als Top-Level-Überschrift gerendert. ### Überschrift dritter Ebene Überschriften dritter Ebene eignen sich ideal, um einen Abschnitt in verschiedene Themen zu unterteilen. Sie schaffen visuelle Hierarchie, ohne zu dominant zu wirken. #### Überschrift vierter Ebene Überschriften vierter Ebene eignen sich für feingliedrige Unterabschnitte. Setzen Sie sie sparsam ein — wenn Ihre Gliederung tiefer als vier Ebenen geht, sollten Sie Ihren Inhalt umstrukturieren. ### Bewährte Praktiken für Überschriften Einige Richtlinien für effektive Überschriftennutzung: - **Keine Ebenen überspringen** — gehen Sie von `##` zu `###`, nie direkt von `##` zu `####`. Das Überspringen von Ebenen bricht die Dokumentstruktur und kann Screenreader verwirren. - **Überschriften beschreibend halten** — „Konfiguration" ist besser als „Setup-Kram". Leser scannen Überschriften, bevor sie entscheiden, ob sie einen Abschnitt lesen. - **Sentence Case verwenden** — nur das erste Wort und Eigennamen großschreiben. ## Absätze und Zeilenumbrüche Normaler Absatztext fließt natürlich. Lassen Sie eine Leerzeile zwischen Absätzen, um sie zu trennen. Dies ist ein zweiter Absatz. Halten Sie Absätze auf eine Idee fokussiert für das beste Leseerlebnis. Beim Schreiben für das Web funktionieren kürzere Absätze tendenziell besser als lange Textblöcke. Ein Absatz mit drei bis fünf Sätzen ist eine komfortable Leseeinheit auf Bildschirmen. Wenn ein Absatz über sechs oder sieben Sätze hinausgeht, erwägen Sie, ihn aufzuteilen. Einzelne Zeilenumbrüche innerhalb eines Absatzes (ohne Leerzeile) werden als Leerzeichen behandelt, nicht als neue Zeile. Wenn Sie einen harten Zeilenumbruch ohne neuen Absatz benötigen, beenden Sie die Zeile mit zwei Leerzeichen oder verwenden Sie ein `
`-Tag — obwohl das in der Praxis selten nötig ist. ## Hervorhebungen - **Fetter Text** mit `**doppelten Sternchen**` - *Kursiver Text* mit `*einfachen Sternchen*` - ***Fett und kursiv*** mit `***dreifachen Sternchen***` - ~~Durchgestrichen~~ mit `~~doppelten Tilden~~` ### Wann welchen Stil verwenden **Fett** eignet sich am besten für Schlüsselbegriffe, wichtige Warnungen oder Definitionen — alles, was der Leser auch beim Überfliegen nicht verpassen sollte. Verwenden Sie es für die wichtigste Phrase in einem Absatz, nicht für ganze Sätze. *Kursiv* eignet sich für Betonungen innerhalb eines Satzes, Buch- und Publikationstitel, Fachbegriffe bei der ersten Verwendung und fremdsprachige Ausdrücke. Es bietet eine leichtere Betonung als Fett. ~~Durchgestrichen~~ ist nützlich, um Korrekturen, veraltete Informationen oder abgeschlossene Punkte in einem Changelog anzuzeigen. Es hat ein engeres Einsatzgebiet, ist aber wertvoll, wenn man es braucht. ## Links [Inline-Link](https://astro.build) mit `[Text](URL)` Syntax. Links können auch auf andere Beiträge auf Ihrer Website mit relativen Pfaden verweisen. Verwenden Sie beschreibenden Linktext — „lesen Sie die Markdown-Anleitung" ist besser als „hier klicken". Guter Linktext hilft sowohl Lesern als auch Suchmaschinen zu verstehen, wohin der Link führt. Sie können auch Links erstellen, die sich im Kontext einfügen, indem Sie beschreibenden Ankertext schreiben, der sich natürlich in den Satz einfügt. Zum Beispiel: die [Astro-Dokumentation](https://docs.astro.build) behandelt jedes Feature im Detail. ## Listen Ungeordnete Liste: - Erster Punkt - Zweiter Punkt - Verschachtelter Punkt - Weiterer verschachtelter Punkt - Dritter Punkt Geordnete Liste: 1. Erster Schritt 2. Zweiter Schritt 1. Unter-Schritt eins 2. Unter-Schritt zwei 3. Dritter Schritt Aufgabenliste: - [x] Projekt einrichten - [x] Ersten Beitrag schreiben - [ ] In Produktion deployen ### Tipps zur Listenformatierung Listen sind eines der effektivsten Werkzeuge beim Schreiben für das Web. Sie lockern dichten Text auf, machen Informationen scanbar und kommunizieren klar Abfolgen oder Sammlungen von Elementen. **Verwenden Sie ungeordnete Listen**, wenn die Elemente keine inhärente Reihenfolge haben — Features, Anforderungen, Optionen oder Beispiele. **Verwenden Sie geordnete Listen**, wenn die Reihenfolge wichtig ist — Schritte in einem Prozess, rangierte Elemente oder Anweisungen, die in einer bestimmten Reihenfolge befolgt werden müssen. **Verwenden Sie Aufgabenlisten** zum Nachverfolgen von Fortschritten, Projekt-Checklisten oder To-do-Elemente. Halten Sie Listenelemente in ihrer Struktur parallel. Wenn das erste Element mit einem Verb beginnt, sollten alle Elemente mit einem Verb beginnen. ## Zitate > Der Zweck der Abstraktion ist nicht, vage zu sein, sondern eine neue semantische Ebene zu schaffen, in der man absolut präzise sein kann. > > — Edsger W. Dijkstra Verschachtelte Zitate: > Erste Ebene > > > Zweite Ebene > > > > > Dritte Ebene ### Verwendung von Zitaten Zitate dienen mehreren Zwecken über das Zitieren berühmter Personen hinaus: - **Quellen zitieren** — beim Verweisen auf einen anderen Artikel, ein Buch oder ein Dokument - **Hinweise** — Hervorheben wichtiger Informationen oder Warnungen - **E-Mail-Stil-Zitate** — zeigen, was jemand in einer Konversation gesagt hat, auf die Sie antworten - **Pull-Zitate** — Aufmerksamkeit auf eine Schlüsselstelle aus Ihrem eigenen Artikel lenken Platzieren Sie bei Zitaten mit Zuschreibung den Autorennamen in einer separaten Zeile mit einem Gedankenstrich davor, wie im Dijkstra-Beispiel oben gezeigt. ## Code Inline-`Code` mit Backticks. Verwenden Sie Inline-Code für Funktionsnamen wie `getPublishedPosts()`, Dateipfade wie `src/content/posts/`, Kommandozeilenanweisungen wie `pnpm dev` und alle literalen Werte, die im Fließtext erscheinen. Code-Block mit Syntax-Highlighting: ```typescript interface Post { title: string; date: Date; description?: string; tags?: string[]; draft?: boolean; } function getPublishedPosts(posts: Post[]): Post[] { return posts .filter((post) => !post.draft) .sort((a, b) => b.date.getTime() - a.date.getTime()); } ``` ```css @theme { --font-sans: 'system-ui', sans-serif; --font-serif: 'ui-serif', 'Georgia', serif; } ``` ### Tipps für Code-Blöcke Geben Sie immer den Sprach-Identifier nach den öffnenden dreifachen Backticks an. Dies aktiviert Syntax-Highlighting, was die Lesbarkeit dramatisch verbessert. Gängige Identifier sind `typescript`, `javascript`, `css`, `html`, `bash`, `json`, `python` und `markdown`. Für Shell-Befehle verwenden Sie `bash` oder `sh`: ```bash # Abhängigkeiten installieren pnpm install # Entwicklungsserver starten pnpm dev # Für Produktion bauen pnpm build ``` Für JSON-Konfigurationsdateien: ```json { "name": "my-blog", "version": "1.0.0", "scripts": { "dev": "astro dev", "build": "astro build" } } ``` Halten Sie Code-Blöcke fokussiert. Zeigen Sie nur die relevanten Zeilen, anstatt eine ganze Datei einzufügen. Wenn Kontext benötigt wird, fügen Sie einen Kommentar hinzu, der angibt, wo der Code liegt. ## Tabellen | Feature | Status | Hinweise | |---|---|---| | Dark Mode | Unterstützt | Hell / Dunkel / System | | RSS-Feed | Integriert | `/rss.xml` | | Sitemap | Auto-generiert | Via `@astrojs/sitemap` | | SEO | Integriert | Open Graph + Canonical | Rechts- und zentriert ausgerichtete Spalten: | Links | Zentriert | Rechts | |:---|:---:|---:| | Text | Text | Text | | Längerer Text | Längerer Text | Längerer Text | ### Richtlinien für Tabellen Tabellen funktionieren am besten für strukturierte Daten mit klaren Spalten und Zeilen. Sie eignen sich ideal für Feature-Vergleiche, Konfigurationsoptionen, API-Parameter und Referenzdaten. Halten Sie Tabellen einfach. Wenn eine Tabelle mehr als fünf oder sechs Spalten hat, wird sie auf Mobilgeräten schwer lesbar. Erwägen Sie, komplexe Tabellen in mehrere kleinere aufzuteilen, oder verwenden Sie stattdessen ein Listenformat. Spaltenausrichtung wird mit Doppelpunkten in der Trennzeile gesteuert: - `:---` für Linksausrichtung (Standard) - `:---:` für Zentrierung - `---:` für Rechtsausrichtung Verwenden Sie Rechtsausrichtung für numerische Daten, damit Dezimalpunkte optisch ausgerichtet sind. ## Horizontale Linie Verwenden Sie `---` um eine horizontale Linie zu erstellen: --- Inhalt nach der Linie. Horizontale Linien sind nützlich, um große Abschnitte eines Beitrags zu trennen, einen Themenwechsel anzuzeigen oder sehr lange Artikel visuell aufzulockern. Setzen Sie sie bedacht ein — wenn Sie häufig Trennlinien benötigen, sind Überschriften möglicherweise die bessere strukturelle Wahl. ## Bilder Bilder werden mit Standard-Markdown-Syntax unterstützt: ```markdown ![Alt-Text](./image.jpg) ``` Dieses Theme ist typografiezentriert, aber Bilder funktionieren, wenn Sie sie brauchen. ### Bewährte Praktiken für Bilder - **Immer Alt-Text einfügen** — er ist essentiell für Barrierefreiheit und erscheint auch, wenn Bilder nicht geladen werden können - **Beschreibende Dateinamen verwenden** — `dashboard-error-state.png` ist besser als `screenshot-2.png` - **Dateigrößen optimieren** — komprimieren Sie Bilder, bevor Sie sie zu Ihrem Repository hinzufügen; große Bilder verlangsamen den Seitenaufbau - **Lesefluss beachten** — platzieren Sie Bilder in der Nähe des Textes, der sie referenziert, nicht Absätze entfernt ## Zusammenfassung Die in diesem Leitfaden beschriebenen Markdown-Features decken die überwiegende Mehrheit dessen ab, was Sie zum Blogschreiben benötigen. Der Schlüssel zu gutem Markdown liegt darin, das richtige Element für den richtigen Zweck zu verwenden: Überschriften für Struktur, Hervorhebungen für Wichtigkeit, Listen für Sammlungen, Code-Blöcke für technische Inhalte und Absätze für alles andere. Schreiben Sie klar, formatieren Sie konsistent und lassen Sie die Typografie ihre Arbeit tun.

👋 Hallo Welt

Thu, 01 Jan 2026 08:00:00 GMT

Willkommen bei Astro-Theme-Aither. Dieses Blog-Theme basiert auf einer Überzeugung: Gutes Schreiben verdient gute Typografie. Serifenschriften für Überschriften, ein sauberer Lesefluss und ein Layout, das sich zurückhält. Alles hier dient einem einzigen Ziel — Ihre Worte schön aussehen und sich gut anfühlen zu lassen. ## Warum noch ein Blog-Theme Das Web ist voller Blog-Themes, also ist die Frage berechtigt: Warum noch eines? Die Antwort liegt in den Prioritäten. Die meisten Themes optimieren für visuellen Impact. Astro-Theme-Aither startet von einer anderen Prämisse. Der Inhalt ist das Produkt. Diese Philosophie erstreckt sich auf die technischen Entscheidungen. Das Theme liefert etwa 0,5 KB clientseitiges JavaScript — gerade genug für den Theme-Umschalter. Alles andere ist statisches HTML und CSS. ## Erste Schritte 1. **Repository klonen** — GitHub-Template-Button oder `git clone` 2. **Abhängigkeiten installieren** — `pnpm install` 3. **Site konfigurieren** — `src/config/site.ts` bearbeiten 4. **Beispielinhalt ersetzen** — eigene Markdown-Dateien in `src/content/posts/` 5. **Entwickeln** — `pnpm dev` 6. **Bereitstellen** — Push zu GitHub, der CI-Ablauf übernimmt die Veröffentlichung auf Cloudflare Pages ### Projektstruktur ``` src/ ├── components/ # Wiederverwendbare Astro-Komponenten ├── config/ # Site-Konfiguration ├── content/ # Markdown-Posts und Inhalte ├── layouts/ # Seitenlayouts (Layout.astro) ├── pages/ # Routenseiten └── styles/ # Globales CSS mit Tailwind v4 Tokens ``` ## Was Sie bekommen ### Content-Features - **RSS-Feed** — automatisch generiert unter `/rss.xml` - **Sitemap** — auto-generiert via `@astrojs/sitemap` - **SEO-Meta-Tags** — Open Graph, Twitter Cards, kanonische URLs - **Dark Mode** — Drei-Wege-Umschalter (Hell / Dunkel / System) ### Entwickler-Features - **TypeScript throughout** — strikter Modus, vollständig typisierte Komponenten - **Content Collections** — typsicheres Markdown mit Frontmatter-Validierung - **Tailwind CSS v4** — `@theme` Design Tokens - **Vitest + Playwright** — Unit- und E2E-Tests im CI integriert - **Cloudflare Pages** — automatische PR-Vorschau-URLs ## Design-Philosophie Die visuelle Einfachheit dieses Themes ist beabsichtigt, unterscheidet sich aber von technischer Einfachheit. Unter der Haube behandelt das Theme überraschend viele Aspekte: responsive Typografie, barrierefreie Farbkontraste, korrekte semantische HTML-Struktur. Gutes Design ist unsichtbar. Wenn Sie einen Artikel lesen und das Theme gar nicht bemerken — dann funktioniert das Design genau wie beabsichtigt. Viel Freude beim Schreiben.