Configurare

Setările întregului site se află în onedocs.config.ts din rădăcina proiectului. Transmiteți obiectul exportat către DocsLayout, HomePage și createMetadata, care îl citesc. Locul în care se află conținutul se setează în source.config.ts, nu aici (consultați Introducere).

Configurare de bază

import { defineConfig } from "onedocs/config";

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

Acesta este minimul necesar. Restul este opțional.

Exemplu complet

Pictogramele funcționalităților sunt elemente React, așadar un fișier de configurare care le folosește trebuie să fie un fișier .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" }],
  },
});

Opțiuni

titlu (obligatoriu)

Numele site-ului. Bara de navigare îl afișează când nu este setat niciun logo, createMetadata îl folosește ca titlu implicit al paginii și în șablonul %s | Title, iar pagina principală îl folosește ca titlu al secțiunii principale și în linia de drepturi de autor din subsol.

title: "My Project"

descriere

Descriere scurtă. createMetadata o folosește pentru descrierea meta, iar pagina principală o afișează sub titlul secțiunii principale când homepage.hero.description nu este setat.

description: "Documentation for My Project"

logo

Înlocuiește titlul din bara de navigare. Folosiți o singură cale sau variante pentru tema luminoasă și cea întunecată; imaginea are 24 px înălțime și folosește title drept text alternativ.

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

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

icon

Pictograma favicon, setată prin createMetadata. Variantele pentru tema luminoasă și cea întunecată sunt furnizate cu interogări media prefers-color-scheme.

icon: "/icon.png"

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

navigare

Configurația barei de navigare, folosită de DocsLayout și HomePage.

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",
}

pagina principală

Secțiunea principală și grila de funcționalități pe care le randează HomePage.

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 este randat exact cum este furnizat, așadar transmiteți un element precum o pictogramă lucide-react. Un șir precum "rocket" este afișat ca text.

Încă două opțiuni ale secțiunii principale înlocuiesc părți din varianta implicită:

• hero.left înlocuiește titlul, descrierea, blocul de instalare și butonul cu propriul conținut. Primește un nod React sau o funcție care returnează unul.
• hero.right umple jumătatea dreaptă a secțiunii principale. Este ascuns sub pragul lg.

footer

Linkuri și pictograme sociale în subsolul HomePage, lângă linia cu drepturile de autor. Ambele se deschid într-o filă nouă.

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

Fiecare link social folosește label ca nume accesibil.

Opțiuni care încă nu au efect

OnedocsConfig definește tipurile pentru docs, theme și i18n, iar defineConfig completează valorile implicite pentru docs.dir și theme.darkMode, dar niciun cod Onedocs nu le citește (Problema #2). Setarea lor nu schimbă nimic:

• docs.dir: dosarul de conținut este dir pe care îl transmiteți lui defineDocs în source.config.ts.
• theme.primaryColor și theme.darkMode: culorile provin din tema Fumadocs UI importată de presetarea CSS, iar modurile luminos și întunecat provin din Fumadocs UI al lui RootProvider.
• i18n: Onedocs nu acceptă mai multe limbi.

TypeScript

Funcția ajutătoare defineConfig oferă completarea automată integrală:

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

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

export default defineConfig(config);

defineConfig returnează obiectul transmis, plus valorile implicite nefolosite docs și theme descrise mai sus.