Pāriet uz saturu

Konfigurācija

Vietnes mēroga iestatījumus norādiet failā onedocs.config.ts projekta saknes mapē. Eksportēto objektu padodiet DocsLayout, HomePage un createMetadata, kas to nolasa. Satura atrašanās vieta tiek iestatīta failā source.config.ts, nevis šeit (skatiet Darba sākšana).

Pamata iestatīšana

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

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

Ar to pietiek. Viss pārējais nav obligāts.

Pilns piemērs

Iespēju ikonas ir React elementi, tāpēc konfigurācijas failam, kurā tās izmantotas, jābūt .tsx failam:

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

Opcijas

title (obligāts)

Vietnes nosaukums. Ja nav iestatīts logo, to rāda navigācijas joslā; createMetadata to izmanto kā noklusējuma lapas nosaukumu un veidnē %s | Title, bet sākumlapā tas tiek izmantots kā galvenā bloka nosaukums un autortiesību rindā kājenē.

TypeScript
title: "My Project"

description

Īss apraksts. createMetadata to izmanto meta aprakstam, un sākumlapā tas tiek rādīts zem galvenā bloka nosaukuma, ja nav iestatīts homepage.hero.description.

TypeScript
description: "Documentation for My Project"

Aizstāj nosaukumu navigācijas joslā. Izmantojiet vienu ceļu vai gaišā un tumšā režīma variantus; attēla augstums ir 24 px, un tā alternatīvajam tekstam tiek izmantots title.

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

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

icon

Vietnes ikona, kas iestatīta ar createMetadata. Gaišā un tumšā režīma varianti tiek rādīti, izmantojot prefers-color-scheme multivides vaicājumus.

TypeScript
icon: "/icon.png"

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

Navigācijas joslas konfigurācija, ko izmanto DocsLayout un 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

Sākumlapas galvenais bloks un iespēju režģis, ko renderē 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 tiek attēlots tāds, kāds tas ir, tāpēc padodiet elementu, piemēram, ikonu lucide-react. Virkne, piemēram, "rocket", tiek parādīta kā teksts.

Vēl divas galvenā bloka opcijas aizstāj noklusējuma galvenā bloka daļas:

  • hero.left aizstāj nosaukumu, aprakstu, instalēšanas bloku un pogu ar jūsu saturu. Tā pieņem React mezglu vai funkciju, kas to atgriež.
  • hero.right aizpilda galvenā bloka labo pusi. Tas ir paslēpts zem lg pārtraukumpunkta.

Saites un sociālo tīklu ikonas HomePage kājenē līdzās autortiesību rindai. Abas tiek atvērtas jaunā cilnē.

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

Katrai sociālā tīkla saitei pieejamais nosaukums ir label.

Opcijas, kas vēl nedarbojas

OnedocsConfig arī definē tipus docs, theme un i18n, savukārt defineConfig aizpilda docs.dir un theme.darkMode noklusējuma vērtības, taču tās nelasa neviens Onedocs kods (#2). To iestatīšana neko nemaina:

  • docs.dir: satura mape ir dir, ko padodat defineDocs failā source.config.ts.
  • theme.primaryColor un theme.darkMode: krāsas nāk no Fumadocs UI tēmas, ko importē CSS sākotnējā konfigurācija, bet gaišo un tumšo režīmu nodrošina Fumadocs UI RootProvider.
  • i18n: Onedocs neatbalsta vairākas valodas.

TypeScript

Palīgfunkcija defineConfig nodrošina pilnu automātiskās pabeigšanas atbalstu:

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

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

export default defineConfig(config);

defineConfig atgriež padoto objektu un iepriekš aprakstītās neizmantotās docs un theme noklusējuma vērtības.