Preskoči na vsebino

Konfiguracija

Prikaži kot Markdown Uredi na GitHub Dokumentacija za 7b38e05

Nastavitve za celotno spletno mesto shranite v onedocs.config.ts v korenski mapi projekta. Izvoženi objekt podajte funkcijam DocsLayout, HomePage in createMetadata, ki ga berejo. Mesto vsebine je določeno v source.config.ts, ne tukaj (glejte Uvod).

Osnovna nastavitev

TypeScript
import { defineConfig } from "onedocs/config";

export default defineConfig({
  title: "My Project",
  description: "Documentation for My Project",
});

To je najmanj, kar potrebujete. Vse drugo je izbirno.

Celoten primer

Ikone funkcij so elementi React, zato mora biti konfiguracijska datoteka, ki jih uporablja, datoteka .tsx:

TSX
import { defineConfig } from "onedocs/config";
import { Rocket, Zap } from "lucide-react";

export default defineConfig({
  title: "My Project",
  description: "Documentation for My Project",

  // Logo (string or light/dark variants)
  logo: "/logo.svg",
  // logo: { light: "/logo-light.svg", dark: "/logo-dark.svg" },

  // Favicon (string or light/dark variants), used by createMetadata
  icon: "/icon.png",

  // Navigation bar
  nav: {
    links: [
      { label: "Blog", href: "/blog" },
      { label: "Changelog", href: "/changelog" },
    ],
    github: "username/repo",
  },

  // Homepage
  homepage: {
    hero: {
      title: "My Project",
      description: "Documentation that ships with the code",
      cta: { label: "Get Started", href: "/docs" },
    },
    features: [
      {
        title: "Fast",
        description: "Static pages built by Next.js",
        icon: <Zap className="size-5 text-fd-primary" />,
      },
      {
        title: "Simple",
        description: "Write markdown, get docs",
        icon: <Rocket className="size-5 text-fd-primary" />,
      },
    ],
  },

  // Homepage footer
  footer: {
    links: [{ label: "License", href: "https://github.com/username/repo/blob/main/LICENSE" }],
  },
});

Možnosti

naslov (obvezno)

Ime vašega spletnega mesta. Navigacijska vrstica ga prikaže, kadar ni nastavljen logo; createMetadata ga uporabi kot privzeti naslov strani in v predlogi %s | Title, domača stran pa kot naslov uvodnega dela in v vrstici z avtorskimi pravicami v nogi.

TypeScript
title: "My Project"

opis

Kratek opis. createMetadata ga uporabi kot metaopis, domača stran pa ga prikaže pod naslovom uvodnega dela, kadar homepage.hero.description ni nastavljen.

TypeScript
description: "Documentation for My Project"

V navigacijski vrstici nadomesti naslov. Uporabite eno pot ali svetle in temne različice; slika je visoka 24 px, kot nadomestno besedilo pa uporablja title.

TypeScript
// Single logo
logo: "/logo.svg"

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

ikona

Ikona zaznamka, nastavljena prek createMetadata. Svetle in temne različice se prikazujejo z medijskimi poizvedbami prefers-color-scheme.

TypeScript
icon: "/icon.png"

// Light/dark mode
icon: {
  light: "/icon-light.png",
  dark: "/icon-dark.png"
}

Konfiguracija navigacijske vrstice, ki jo uporabljata DocsLayout in HomePage.

TypeScript
nav: {
  // Extra links in the navbar
  links: [
    { label: "Blog", href: "/blog" },
    { label: "API", href: "/api" },
  ],

  // GitHub repo as "owner/name" (adds an icon link to https://github.com/owner/name)
  github: "username/repo",
}

domača stran

Uvodni del in mreža funkcij, ki ju izriše HomePage.

TSX
homepage: {
  hero: {
    title: "My Project",        // Defaults to config.title
    description: "Description", // Defaults to config.description
    cta: {
      label: "Get Started",     // Default: "Get Started"
      href: "/docs",            // Default: "/docs"
    },
  },
  features: [
    {
      title: "Feature 1",
      description: "Description of feature 1",
      icon: <Rocket className="size-5" />, // Optional React element
    },
  ],
}

icon se izriše tak, kot je podan, zato podajte element, na primer ikono lucide-react. Niz, kot je "rocket", se izpiše kot besedilo.

Še dve možnosti za uvodni del nadomestita dele privzetega uvodnega dela:

  • hero.left nadomesti naslov, opis, blok za namestitev in gumb z vašo vsebino. Sprejme vozlišče React ali funkcijo, ki ga vrne.
  • hero.right zapolni desno polovico uvodnega dela. Pod mejno širino lg je skrit.

Povezave in družabne ikone v nogi HomePage, ob vrstici z avtorskimi pravicami. Oboje se odpre v novem zavihku.

TSX
// import { GitHubIcon } from "onedocs";
footer: {
  links: [{ label: "Privacy", href: "/privacy" }],
  socials: [
    { label: "GitHub", href: "https://github.com/username/repo", icon: <GitHubIcon /> },
  ],
}

Vsaka povezava do družbenega omrežja uporablja label kot dostopno ime.

Možnosti, ki še ne vplivajo na delovanje

OnedocsConfig tipizira tudi docs, theme in i18n, defineConfig pa izpolni privzete vrednosti docs.dir in theme.darkMode, vendar jih ne bere nobena koda Onedocs (#2). Njihova nastavitev ničesar ne spremeni:

  • docs.dir: mapa z vsebino je dir, ki jo podate funkciji defineDocs v source.config.ts.
  • theme.primaryColor in theme.darkMode: barve izvirajo iz teme Fumadocs UI, ki jo uvozi prednastavitev CSS; svetli in temni način pa izhajata iz Fumadocs UI in njegovega RootProvider.
  • i18n: Onedocs ne podpira več jezikov.

TypeScript

Pomožna funkcija defineConfig omogoča popolno samodejno dopolnjevanje:

TypeScript
import { defineConfig, type OnedocsConfig } from "onedocs/config";

const config: OnedocsConfig = {
  title: "My Project",
};

export default defineConfig(config);

defineConfig vrne podani objekt ter neuporabljeni privzeti vrednosti docs in theme, opisani zgoraj.