Към съдържанието

Конфигурация

Настройките за целия сайт се задават в onedocs.config.ts в основната директория на проекта. Подавате експортирания обект на DocsLayout, HomePage и createMetadata, които го четат. Местоположението на съдържанието задавате в source.config.ts, а не тук (вижте Първи стъпки).

Основна настройка

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

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

Това е минимумът. Всичко останало е незадължително.

Пълен пример

Иконите на функциите са елементи React, затова конфигурационният файл, който ги използва, трябва да е файл .tsx:

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

Опции

заглавие (задължително)

Името на сайта ви. Навигационната лента го показва, когато не е зададен logo; createMetadata го използва като заглавие на страницата по подразбиране и в шаблона %s | Title; началната страница го използва като заглавие на основния банер и в реда за авторските права в долния колонтитул.

TypeScript
title: "My Project"

описание

Кратко описание. createMetadata го използва за метаописанието, а началната страница го показва под заглавието на основния банер, когато не е зададено homepage.hero.description.

TypeScript
description: "Documentation for My Project"

Заменя заглавието в навигационната лента. Използвайте един път или варианти за светъл и тъмен режим; изображението е високо 24 px и използва title като алтернативен текст.

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

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

икона

Иконата на сайта (favicon), зададена чрез createMetadata. Вариантите за светъл и тъмен режим се показват с медийни заявки prefers-color-scheme.

TypeScript
icon: "/icon.png"

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

Конфигурация на навигационната лента, използвана от DocsLayout и 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 визуализира.

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 се визуализира както е подаден, затова подайте елемент, например икона lucide-react. Низ като "rocket" се извежда като текст.

Още две опции за основната секция заменят части от нейната версия по подразбиране:

  • hero.left заменя заглавието, описанието, блока за инсталиране и бутона с ваше съдържание. Приема възел React или функция, която връща такъв.
  • hero.right запълва дясната половина на основната секция. Скрива се под точката на прекъсване lg.

Връзки и икони на социални мрежи във футъра на HomePage, до реда с авторските права. И двете се отварят в нов раздел.

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

Всяка връзка към социална мрежа използва label като достъпно име.

Опции, които все още нямат ефект

OnedocsConfig типизира също docs, theme и i18n, а defineConfig попълва стойностите по подразбиране docs.dir и theme.darkMode, но никой код на Onedocs не ги чете (#2). Задаването им не променя нищо:

  • docs.dir: папката със съдържание е dir, която подавате на defineDocs в source.config.ts.
  • theme.primaryColor и theme.darkMode: цветовете идват от темата Fumadocs UI, която импортира предварително зададената конфигурация на CSS, а светлият и тъмният режим идват от RootProvider на Fumadocs UI.
  • i18n: Onedocs не поддържа няколко езика.

TypeScript

Помощната функция defineConfig ви осигурява пълно автоматично довършване:

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

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

export default defineConfig(config);

defineConfig връща подадения от вас обект, както и описаните по-горе неизползвани стойности по подразбиране docs и theme.