Tiramisu Docs

Configuration

Design

Passen Sie Logo, Navigationslinks, Dunkelmodus und CSS-Theme Ihrer Dokumentation an.

Design & Erscheinungsbild

Tiramisu Docs verwendet ein anpassbares Design, das auf Tailwind CSS und shadcn-svelte basiert. Sie können Farben, Branding und Erscheinungsbild über Ihre Konfigurationsdatei anpassen.

Setzen Sie Ihr Logo als String (gleich für Hell und Dunkel) oder als Objekt mit separaten Varianten:

typescript 
// Single logo
logo: "/logo.svg",

// Light and dark variants
logo: {
  light: "/logo.svg",
  dark: "/logo-dark.svg",
},

Das Logo erscheint oben links in der Seitenleiste (oder in der oberen Leiste, wenn Sektionen aktiviert sind).

Fügen Sie Links zur oberen Navigationsleiste hinzu:

typescript 
nav: [
  { label: "Docs", href: "/docs" },
  { label: "Blog", href: "/blog" },
],

GitHub-Integration

Konfigurieren Sie GitHub, um „Auf GitHub bearbeiten"-Links auf Dokumentationsseiten zu aktivieren:

typescript 
github: {
  repo: "user/repo",
  branch: "main",
  dir: "src/docs",
},

Das dir-Feld gibt an, wo sich Ihre Docs relativ zum Repository-Stammverzeichnis befinden.

MCP-Server

Legen Sie eine URL für den integrierten MCP-Server fest:

typescript 
mcp: "https://mcp.example.com",

Weitere Informationen zur Konfiguration des KI-gestützten Dokumentationsbrowsings finden Sie auf der Seite MCP-Server.

Dunkelmodus

Der Dunkelmodus ist integriert und funktioniert automatisch. Benutzer können über den Theme-Umschalter in der Seitenleiste oder oberen Leiste zwischen hellem und dunklem Design wechseln. Die Theme-Einstellung wird im lokalen Speicher gespeichert.

CSS-Anpassung

Importieren Sie das Tiramisu-Theme in Ihre src/app.css:

css 
@import "@tiramisu-docs/kit/theme.css";

Sie können CSS-Custom-Properties überschreiben oder eigene Tailwind-Klassen hinzufügen, um das Erscheinungsbild weiter anzupassen.