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

Налаштування для всього сайту містяться в onedocs.config.ts у кореневій папці проєкту. Передайте експортований об’єкт у DocsLayout, HomePage і createMetadata, які його зчитують. Розташування вмісту задається в source.config.ts, а не тут (дивіться Початок роботи).

Базове налаштування

import { defineConfig } from "onedocs/config";

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

Це мінімум. Усе інше необов’язкове.

Повний приклад

Значки функцій — це елементи React, тому конфігурацію, у якій вони використовуються, потрібно зберегти у файлі .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" }],
  },
});

Параметри

title (обов’язково)

Назва вашого сайту. Якщо logo не задано, вона відображається в навігаційній панелі; createMetadata використовує її як заголовок сторінки за замовчуванням і в шаблоні %s | Title, а головна сторінка — як заголовок головного блока та в рядку авторського права нижнього колонтитула.

title: "My Project"

опис

Короткий опис. createMetadata використовує його як метаопис, а на головній сторінці він відображається під заголовком головного блока, якщо не задано homepage.hero.description.

description: "Documentation for My Project"

логотип

Замінює заголовок у навігаційній панелі. Укажіть один шлях або світлий і темний варіанти; висота зображення — 24 px, а title використовується як альтернативний текст.

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

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

піктограма

Значок favicon задається через createMetadata. Світлий і темний варіанти відображаються за допомогою медіазапитів prefers-color-scheme.

icon: "/icon.png"

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

навігація

Конфігурація панелі навігації, яку використовують DocsLayout і 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",
}

головна сторінка

Головний блок і сітка функцій, які відображає 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 відображається без змін, тому передавайте елемент, наприклад значок lucide-react. Рядок на кшталт "rocket" виводиться як текст.

Ще два параметри головного блока замінюють його частини за замовчуванням:

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

Нижній колонтитул

Посилання й значки соцмереж у нижньому колонтитулі HomePage, поруч із рядком авторського права. Обидва відкриваються в новій вкладці.

// 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 UI від Fumadocs.
• i18n: Onedocs не підтримує кілька мов.

TypeScript

Хелпер defineConfig забезпечує повне автодоповнення:

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

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

export default defineConfig(config);

defineConfig повертає переданий вами об’єкт, а також невикористані значення за замовчуванням docs і theme, описані вище.