Pereiti prie turinio

Konfigūracija

Visos svetainės nuostatos pateikiamos onedocs.config.ts projekto šakniniame kataloge. Eksportuotą objektą perduokite DocsLayout, HomePage ir createMetadata, kurie jį nuskaito. Turinio vieta nurodoma faile source.config.ts, ne čia (žr. Darbo pradžia).

Pagrindinė sąranka

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

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

Tai viskas, ko reikia pradžiai. Visa kita neprivaloma.

Išsamus pavyzdys

Funkcijų piktogramos yra React elementai, todėl jas naudojantis konfigūracijos failas turi būti .tsx failas:

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

Parinktys

title (privaloma)

Jūsų svetainės pavadinimas. Navigacijos juostoje jis rodomas, jei nenustatyta logo, createMetadata naudoja jį kaip numatytąjį puslapio pavadinimą ir %s | Title šablone, o pradžios puslapyje – kaip pagrindinės srities pavadinimą ir poraštės autorių teisių eilutėje.

TypeScript
title: "My Project"

description

Trumpas aprašas. createMetadata naudoja jį meta aprašui, o pradžios puslapyje rodo po pagrindinės srities pavadinimu, jei nenustatyta homepage.hero.description.

TypeScript
description: "Documentation for My Project"

Pakeičia pavadinimą navigacijos juostoje. Naudokite vieną kelią arba šviesius ir tamsius variantus; vaizdas yra 24 px aukščio, o jo alternatyvusis tekstas – title.

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

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

icon

Piktograma nustatoma per createMetadata. Šviesūs ir tamsūs variantai pateikiami naudojant prefers-color-scheme medijos užklausas.

TypeScript
icon: "/icon.png"

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

Navigacijos juostos konfigūracija, naudojama DocsLayout ir 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

Pagrindinė sritis ir funkcijų tinklelis, kuriuos atvaizduoja 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 atvaizduojamas toks, koks pateiktas, todėl perduokite elementą, pavyzdžiui, lucide-react piktogramą. Eilutė, tokia kaip "rocket", bus rodoma kaip tekstas.

Dar dvi pagrindinės srities parinktys pakeičia numatytosios pagrindinės srities dalis:

  • hero.left pakeičia pavadinimą, aprašą, diegimo bloką ir mygtuką jūsų turiniu. Priima React mazgą arba funkciją, kuri jį grąžina.
  • hero.right užpildo dešinę pagrindinės srities pusę. Ji paslepiama esant mažesniam nei lg lūžio taškui.

Nuorodos ir socialinių tinklų piktogramos HomePage poraštėje, šalia autorių teisių eilutės. Abi atidaromos naujame skirtuke.

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

Kiekvienos socialinės nuorodos pasiekiamas pavadinimas yra label.

Parinktys, kurios dar neveikia

OnedocsConfig taip pat tipizuoja docs, theme ir i18n, o defineConfig nustato numatytąsias docs.dir ir theme.darkMode reikšmes, tačiau jokio Onedocs kodo jos nenuskaito (#2). Jas nustačius niekas nepasikeičia:

  • docs.dir: turinio aplankas yra source.config.ts perduodamas defineDocs parametras dir.
  • theme.primaryColor ir theme.darkMode: spalvos gaunamos iš CSS išankstinio nustatymo importuojamos Fumadocs UI temos, o šviesų ir tamsų režimus suteikia Fumadocs UI RootProvider.
  • i18n: Onedocs nepalaiko kelių kalbų.

TypeScript

defineConfig pagalbinė funkcija suteikia visą automatinio užbaigimo funkciją:

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

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

export default defineConfig(config);

defineConfig grąžina perduotą objektą ir pirmiau aprašytas nenaudojamas numatytąsias docs bei theme reikšmes.