Liigu sisu juurde

Konfigureerimine

Vaata Markdownina Muuda teenuses GitHub Dokumentatsioon: 7b38e05

Saidiülesed seaded asuvad projekti juurkaustas failis onedocs.config.ts. Anna eksporditud objekt edasi DocsLayout-ile, HomePage-ile ja createMetadata-ile, mis seda loevad. Sisu asukoht määratakse failis source.config.ts, mitte siin (vt Alustamine).

Põhiseadistus

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

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

See on miinimum. Kõik muu on valikuline.

Täielik näide

Funktsiooniikoonid on React-elemendid, seega peab neid kasutav konfiguratsioon olema .tsx fail:

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" }],
  },
});

Suvandid

title (nõutav)

Sinu saidi nimi. Navigeerimisribal kuvatakse see siis, kui logo pole määratud; createMetadata kasutab seda vaikelehe pealkirjana ja mallis %s | Title; avalehel kasutatakse seda avapealkirjana ja jaluse autoriõiguse tekstis.

TypeScript
title: "My Project"

description

Lühikirjeldus. createMetadata kasutab seda meta-kirjeldusena ning avalehel kuvatakse see avapealkirja all, kui homepage.hero.description pole määratud.

TypeScript
description: "Documentation for My Project"

Asendab navigeerimisribal pealkirja. Kasuta üht teed või heleda ja tumeda kujunduse variante; pilt on 24 px kõrge ning selle alt-tekst on title.

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

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

icon

createMetadata kaudu määratud lemmik. Heleda ja tumeda kujunduse variandid kuvatakse prefers-color-scheme meediapäringutega.

TypeScript
icon: "/icon.png"

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

Navigeerimisriba seadistus, mida kasutavad DocsLayout ja 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",
}

homepage

Avavaade ja funktsioonide ruudustik, mille renderdab 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 renderdatakse muutmata kujul, seega anna edasi element, näiteks lucide-react ikoon. String nagu "rocket" kuvatakse tekstina.

Veel kaks avavaate valikut asendavad vaikeavavaate osi:

  • hero.left asendab pealkirja, kirjelduse, paigaldusploki ja nupu sinu enda sisuga. See võtab React sõlme või funktsiooni, mis tagastab sellise sõlme.
  • hero.right täidab avavaate parema poole. See peidetakse alla lg murdepunkti.

Lingid ja suhtlusvõrgustike ikoonid jaotise HomePage jaluses, autoriõiguse rea kõrval. Mõlemad avanevad uuel vahekaardil.

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

Iga suhtlusvõrgustiku lingi ligipääsetav nimi on label.

Valikud, mis veel mõju ei avalda

OnedocsConfig määrab ka tüübiks docs, theme ja i18n ning defineConfig lisab vaikimisi väärtused docs.dir ja theme.darkMode, kuid ükski Onedocs kood neid ei loe (#2). Nende määramine ei muuda midagi:

  • docs.dir: sisukaust on source.config.ts failis funktsioonile defineDocs antud dir.
  • theme.primaryColor ja theme.darkMode: värvid pärinevad kujundusest Fumadocs UI, mille impordib eelseadistus CSS; heledad ja tumedad režiimid pärinevad jaotise Fumadocs UI valikust RootProvider.
  • i18n: Onedocs ei toeta mitut keelt.

TypeScript

Abifunktsioon defineConfig pakub täielikku automaattäitmist:

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

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

export default defineConfig(config);

defineConfig tagastab edasi antud objekti koos eespool kirjeldatud kasutamata vaikeväärtustega docs ja theme.