Konfiguráció

A projekt gyökerében található onedocs.config.ts fájlban adhatók meg a webhely egészére vonatkozó beállítások. Az exportált objektumot a DocsLayout, HomePage és createMetadata számára kell átadni; ezek olvassák be. A tartalom helyét nem itt, hanem a source.config.ts fájlban kell beállítani (lásd: Első lépések).

Alapbeállítás

import { defineConfig } from "onedocs/config";

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

Ennyi a minimális beállítás. Minden más opcionális.

Teljes példa

A funkcióikonok React elemek, ezért használatukhoz a konfigurációnak .tsx fájlban kell lennie:

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

Beállítások

cím (kötelező)

A webhely neve. Ha nincs beállítva logo, a navigációs sáv ezt jeleníti meg; az createMetadata ezt használja alapértelmezett oldalcímként és a %s | Title sablonban, a kezdőoldal pedig nyitó címként és a lábléc szerzői jogi sorában.

title: "My Project"

leírás

Rövid leírás. A createMetadata ezt használja meta leírásként, a kezdőoldal pedig a kiemelt cím alatt jeleníti meg, ha a homepage.hero.description nincs beállítva.

description: "Documentation for My Project"

logó

A navigációs sávban a címet helyettesíti. Használjon egyetlen útvonalat vagy világos és sötét változatokat; a kép 24 px magas, a helyettesítő szövege pedig title.

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

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

ikon

A createMetadata útján beállított favicon. A világos és sötét változatokat a prefers-color-scheme médiakérdések szolgálják ki.

icon: "/icon.png"

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

navigáció

A DocsLayout és a HomePage által használt navigációssáv-konfiguráció.

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

kezdőlap

A kiemelt részt és a funkciórácsot jeleníti meg a 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
    },
  ],
}

A icon a megadott formában jelenik meg, ezért adjon át például egy lucide-react ikont. Az olyan karakterlánc, mint a "rocket", szövegként jelenik meg.

Két további kiemeltrész-beállítás lecseréli az alapértelmezett kiemelt rész bizonyos elemeit:

• A hero.left lecseréli a címet, a leírást, a telepítési blokkot és a gombot az Ön saját tartalmára. Egy React csomópontot vagy egy olyat visszaadó függvényt vár, amely ezt adja vissza.
• A hero.right tölti ki a kiemelt rész jobb felét. A lg töréspont alatt rejtve marad.

lábléc

A szerzői jogi sor melletti hivatkozások és közösségi ikonok a HomePage láblécében. Mindkettő új lapon nyílik meg.

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

Minden közösségi hivatkozás hozzáférhető neve a label.

Egyelőre hatástalan beállítások

A OnedocsConfig a docs, a theme és a i18n típusát is meghatározza, a defineConfig pedig kitölti a docs.dir és a theme.darkMode alapértelmezését, de egyetlen Onedocs kód sem olvassa be őket (#2). Beállításuk nem változtat semmin:

• docs.dir: a tartalommappa az a dir, amelyet a defineDocs részére ad át a source.config.ts fájlban.
• theme.primaryColor és theme.darkMode: a színek az CSS előbeállítás által importált Fumadocs UI témából származnak, a világos és sötét módot pedig az Fumadocs UI RootProvider konfigurációja biztosítja.
• i18n: a Onedocs nem támogat több nyelvet.

TypeScript

A defineConfig segédfüggvény teljes automatikus kódkiegészítést biztosít:

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

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

export default defineConfig(config);

A defineConfig a megadott objektumot adja vissza, valamint a fent leírt, nem használt docs és theme alapértelmezéseket.