Zum Hauptinhalt springen

Die Website-Shell konfigurieren

Website-Identität, Navigation, Banner, Repository-Links, Feedback und Lesersteuerung in app.config.ts festlegen.

Lege Darstellungsoptionen unter ginkoDocs in app/app.config.ts ab. Der Layer liefert Standardwerte; ergänze nur Werte, die zu deiner Website gehören.

app/app.config.ts
export default defineAppConfig({
  ginkoDocs: {
    site: {
      url: "https://docs.example.com",
      name: { en: "Acme Docs", de: "Acme-Dokumentation" },
      description: {
        en: "Documentation for Acme.",
        de: "Dokumentation für Acme.",
      },
      logo: {
        light: "/logo.svg",
        dark: "/logo-dark.svg",
      },
      docsSidebarSwitcher: "tabs",
      lupinumAttribution: true,
    },
    nav: { links: "auto" },
    social: {
      github: "https://github.com/acme/docs",
      discord: "https://discord.gg/acme",
      linkedin: "https://www.linkedin.com/company/acme",
    },
    feedback: { enabled: true },
    analytics: {
      plausible: { scriptId: "ExampleSiteScriptId" },
    },
    images: { zoom: true },
    toc: { depth: 3 },
    repository: {
      url: "https://github.com/acme/docs",
      branch: "main",
      contentDirectory: "content",
    },
  },
});

Lokalisierte Werte verwenden immer die Form { en, de? }. Auch eine rein englische Website nutzt { en: '…' }; dadurch bleiben Layer-Merging und Hot Reload deterministisch.

site.url ist die Laufzeitbasis für Canonical-Links und Seitenaktionen. Verwende dieselbe Produktions-URL in Content Config, Nuxt Site Config und i18n.baseUrl; SEO und Social Cards zeigt die vollständige Verdrahtung.

Die Bereichsauswahl der Sidebar festlegen

site.docsSidebarSwitcher steuert nur, wie Leser einen obersten Dokumentationsbereich wählen:

WertErgebnis
tabsHorizontale Bereichs-Tabs
dropdownEin kompaktes Bereichsmenü
listEine sichtbare Bereichsliste

Titel von Bereichen und Gruppen stammen weiterhin aus .navigation.yml. Diese Einstellung erstellt oder sortiert keine Navigationseinträge.

Automatische Navigation verwenden

Behalte nav.links: 'auto', wenn der Header Dokumentation und, bei blog: true in content.config.ts, den Blog anzeigen soll. Der Router ist die Quelle für die Verfügbarkeit des Blogs.

Verwende nur dann ein Array, wenn der Header andere Ziele benötigt:

app/app.config.ts
export default defineAppConfig({
  ginkoDocs: {
    nav: {
      links: [
        {
          label: { en: "Documentation", de: "Dokumentation" },
          to: { en: "/docs/getting-started", de: "/de/dokumentation/erste-schritte" },
          icon: "lucide:book-open",
          description: {
            en: "Install and configure Acme.",
            de: "Acme installieren und konfigurieren.",
          },
        },
      ],
    },
  },
});

Ein explizites Array ersetzt die automatischen Links; es erweitert sie nicht.

Einen Ankündigungsbanner hinzufügen

Der Banner ist standardmäßig deaktiviert. Aktiviere ihn mit lokalisiertem Text und einem optionalen expliziten Ziel. Die Bestätigung wird über id gespeichert; ändere die ID, wenn die Meldung erneut erscheinen soll.

app/app.config.ts
export default defineAppConfig({
  ginkoDocs: {
    banner: {
      enabled: true,
      id: "acme-2",
      text: {
        en: "Acme 2 is available.",
        de: "Acme 2 ist verfügbar.",
      },
      link: {
        label: { en: "Read the release notes", de: "Versionshinweise lesen" },
        to: { en: "/blog/acme-2", de: "/de/blog/acme-2" },
      },
      showOnLanding: true,
    },
  },
});

repository aktiviert Links zum Bearbeiten und Melden. feedback.enabled fügt die Seitenbewertung hinzu, wenn Plausible ebenfalls konfiguriert ist. Bewertungen senden das Ereignis docs-feedback. Die Referenz zur App-Konfiguration beschreibt alle Felder und Standardwerte.