AI Magic 3DDocsSchnellstart
Erste Schritte mit Fumadocs
Ineinführung
Fumadocs (Foo-ma docs) ist ein Dokumentationsframework basierend auf Next.js, das schnell und flexibel ist. und fügt sich nahtlos in den Next.js App Router ein.
Fumadocs besteht aus verschiedenen Teilen:
Fumadocs Core
Verarbeitet den Großteil der Logik, einschließlich Dokumentsuche, Inhaltsquellenadapter und Markdown-Erweiterungen.
Fumadocs UI
Das Standardthema von Fumadocs bietet ein schönes Aussehen für Dokumentationsseiten und interaktive Komponenten.
Content Source
Die Quelle Ihrer Inhalte kann ein CMS oder lokale Datenebenen wie Content Collections und Fumadocs MDX, die offizielle Inhaltsquelle, sein.
Fumadocs CLI
Ein Befehlszeilentool zum Installieren von UI-Komponenten und zum Automatisieren von Vorgängen, nützlich zum Anpassen von Layouts.
Want to learn more?
Read our in-depth What is Fumadocs introduction.
Terminologie
Markdown/MDX: Markdown ist eine Auszeichnungssprache zum Erstellen formatierter Texte. Fumadocs unterstützt Markdown und MDX (Obermenge von Markdown) sofort einsatzbereit.
Obwohl nicht erforderlich, wären einige Grundkenntnisse des Next.js App Routers für weitere Anpassungen hilfreich.
Automatische Installation
Eine Mindestversion von Node.js 18 ist erforderlich. Beachten Sie, dass Node.js 23.1 möglicherweise Probleme mit dem Produktions-Build von Next.js haben könnte.
npm create fumadocs-apppnpm create fumadocs-appyarn create fumadocs-appbun create fumadocs-appSie werden nach dem zu verwendenden Framework und der Inhaltsquelle gefragt. Eine neue fumadocs-App sollte initialisiert werden. Jetzt können Sie mit dem Hacken beginnen!
From Existing Codebase?
Sie können der Anleitung zur manuellen Installation] folgen, um loszulegen.
Viel Spaß!
Erstellen Sie Ihre erste MDX-Datei im Ordner „docs“.
---
title: Hello World
---
## Yo what's upFühren Sie die App im Entwicklungsmodus aus und sehen Sie sich http://localhost:3000/docs. an
npm run devErkunden
Im Projekt ist zu sehen:
lib/source.ts: Code für den Inhaltsquellenadapter,loader()bietet eine Schnittstelle für die Interaktion mit Ihrer Inhaltsquelle und weist Ihren Seiten eine URL zu.app/layout.config.tsx: Gemeinsame Optionen für Layouts, optional, aber vorzugsweise beibehalten.
| Route | Beschreibung |
|---|---|
app/(home) | Die Routengruppe für Ihre Zielseite und andere Seiten. |
app/docs | Das Layout und die Seiten der Dokumentation. |
app/api/search/route.ts | Der Routenhandler für die Suche. |
Inhalte schreiben
Lesen Sie zum Verfassen von Dokumenten unbedingt Folgendes:
Markdown
Fumadocs has some additional features for authoring content too.
Navigation
Learn how to customise navigation links/sidebar items.
Inhaltsquelle
Die Inhaltsquelle verwaltet alle Ihre Inhalte, z. B. das Kompilieren von Markdown-Dateien und die Validierung von Frontmatter.
Lesen Sie die Einführung, um zu erfahren, wie es mit Ihren Inhalten umgeht.
Eine source.config.ts-Konfigurationsdatei ist enthalten. Sie können verschiedene Optionen wie das Frontmatter-Schema anpassen.
Fumadocs ist nicht Markdown-exklusiv. Für andere Quellen wie Sanity können Sie eine benutzerdefinierte Inhaltsquelle.
Benutzeroberfläche anpassen
Siehe Customization Guide.
FAQ
Einige häufige Fragen, die Ihnen möglicherweise begegnen.
Video-Tutorials
Lerfahren Sie mehr
Neu hier? Keine Sorge, wir freuen uns über Ihre Fragen.
Wenn Sie etwas verwirrend finden, geben Sie bitte Ihr Feedback zur Github-Diskussion!