Customization
Lernen Sie den Aufbau eines Tiramisu Docs-Projekts mit allen wichtigen Dateien und Ordnern kennen.
Ein Tiramisu Docs-Projekt folgt einem Standard-SvelteKit-Layout mit einigen Tiramisu-spezifischen Konventionen.
Dateibaum
my-docs
src
docs
en
getting-started.tiramisu
guide.tiramisu
lib
tiramisu.config.ts
components
index.ts
tiramisu
MyCustomWidget.svelte
routes
docs/[...slug]
+page.svelte
+page.ts
app.css
svelte.config.js
vite.config.ts
package.json
Wichtige Dateien
| Datei | Zweck |
|---|---|
src/lib/tiramisu.config.ts | Hauptkonfigurationsdatei. Definiert Titel, Abschnitte, Seitenleiste, i18n und mehr. |
src/docs/ | Dokumentationsinhalt. Jede .tiramisu-Datei wird zu einer Seite. |
src/lib/components/index.ts | Komponenten-Barrel-Datei. Re-exportiert alle Kit-Komponenten. Bearbeiten Sie sie, um eingebaute Komponenten zu überschreiben. |
src/lib/components/tiramisu/ | Benutzerdefinierte Komponenten. Jede Svelte-Komponente hier kann als Tiramisu-Funktion verwendet werden. |
src/routes/docs/[...slug]/ | Die Catch-all-Route, die Dokumentationsseiten rendert. |
vite.config.ts | Vite-Konfiguration mit dem tiramisuPlugin(). |
svelte.config.js | SvelteKit-Adapter-Konfiguration. |
src/app.css | Globale Stile. Importieren Sie hier das Tiramisu-Theme. |
Die Docs-Route
Das Verzeichnis src/routes/docs/[...slug]/ enthält zwei Dateien, die die Dokumentation steuern:
+page.ts lädt den kompilierten Tiramisu-Inhalt und die Metadaten:
import { loadDoc } from "@tiramisu-docs/kit";
export const load = loadDoc;+page.svelte rendert das Dokumentations-Layout:
<script>
import { DocsLayout } from "@tiramisu-docs/kit";
let { data } = $props();
</script>
<DocsLayout {...data}>
<data.component />
</DocsLayout>