Customization
Découvrez l'arborescence des fichiers et les conventions d'un projet Tiramisu Docs basé sur SvelteKit.
Un projet Tiramisu Docs suit une structure SvelteKit standard avec quelques conventions spécifiques à Tiramisu.
Arborescence des fichiers
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
Fichiers clés
| Fichier | Rôle |
|---|---|
src/lib/tiramisu.config.ts | Fichier de configuration principal. Définit le titre, les sections, la barre latérale, l'i18n et plus encore. |
src/docs/ | Contenu de la documentation. Chaque fichier .tiramisu devient une page. |
src/lib/components/index.ts | Fichier barrel des composants. Réexporte tous les composants du kit. Modifiez-le pour remplacer n'importe quel composant intégré. |
src/lib/components/tiramisu/ | Composants personnalisés. Tout composant Svelte ici peut être utilisé comme fonction Tiramisu. |
src/routes/docs/[...slug]/ | La route attrape-tout qui affiche les pages de documentation. |
vite.config.ts | Configuration Vite avec le tiramisuPlugin(). |
svelte.config.js | Configuration de l'adaptateur SvelteKit. |
src/app.css | Styles globaux. Importez le thème Tiramisu ici. |
La route de documentation
Le répertoire src/routes/docs/[...slug]/ contient deux fichiers qui alimentent la documentation :
+page.ts charge le contenu Tiramisu compilé et les métadonnées :
import { loadDoc } from "@tiramisu-docs/kit";
export const load = loadDoc;+page.svelte affiche la mise en page de la documentation :
<script>
import { DocsLayout } from "@tiramisu-docs/kit";
let { data } = $props();
</script>
<DocsLayout {...data}>
<data.component />
</DocsLayout>