Konfigurasi

Lihat sebagai Markdown Edit di GitHub Dokumentasi di 7b38e05

Pengaturan seluruh situs ditempatkan di onedocs.config.ts pada root proyek Anda. Teruskan objek yang diekspor ke DocsLayout, HomePage, dan createMetadata, yang membacanya. Lokasi konten diatur di source.config.ts, bukan di sini (lihat Memulai).

Penyiapan dasar

TypeScript

import { defineConfig } from "onedocs/config";

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

Itulah konfigurasi minimum. Semua yang lain bersifat opsional.

Contoh lengkap

Ikon fitur adalah elemen React, jadi konfigurasi yang menggunakannya harus berupa file .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" }],
  },
});

Opsi

judul (wajib)

Nama situs Anda. Navbar menampilkannya jika logo tidak ditetapkan, createMetadata menggunakannya sebagai judul halaman default dan dalam templat %s | Title, dan beranda menggunakannya sebagai judul hero serta di baris hak cipta footer.

TypeScript

title: "My Project"

deskripsi

Deskripsi singkat. createMetadata menggunakannya untuk deskripsi meta, dan beranda menampilkannya di bawah judul hero jika homepage.hero.description tidak ditetapkan.

TypeScript

description: "Documentation for My Project"

logo

Menggantikan judul di navbar. Gunakan satu path atau varian terang dan gelap; tinggi gambar 24 px dan teks alt-nya menggunakan title.

TypeScript

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

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

icon

Favicon, ditetapkan melalui createMetadata. Varian terang dan gelap disajikan menggunakan kueri media prefers-color-scheme.

TypeScript

icon: "/icon.png"

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

navigasi

Konfigurasi bilah navigasi, digunakan oleh DocsLayout dan 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",
}

beranda

Hero dan kisi fitur yang dirender oleh 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 dirender sebagaimana diberikan, jadi teruskan elemen seperti ikon lucide-react. String seperti "rocket" akan dicetak sebagai teks.

Dua opsi hero lainnya menggantikan bagian dari hero default:

hero.left menggantikan judul, deskripsi, blok instalasi, dan tombol dengan konten Anda sendiri. Opsi ini menerima node React atau fungsi yang mengembalikan node.
hero.right mengisi separuh kanan hero. Elemen ini disembunyikan di bawah breakpoint lg.

Tautan dan ikon sosial di footer HomePage, di samping baris hak cipta. Keduanya terbuka di tab baru.

TSX

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

Setiap tautan sosial menggunakan label sebagai nama yang dapat diakses.

Opsi yang belum berpengaruh

OnedocsConfig juga mengetik docs, theme, dan i18n, dan defineConfig mengisi default docs.dir dan theme.darkMode, tetapi tidak ada kode Onedocs yang membacanya (#2). Menetapkannya tidak mengubah apa pun:

docs.dir: folder konten adalah dir yang Anda teruskan ke defineDocs di source.config.ts.
theme.primaryColor dan theme.darkMode: warna berasal dari tema Fumadocs UI yang diimpor oleh preset CSS, sedangkan mode terang dan gelap berasal dari Fumadocs UI milik RootProvider.
i18n: Onedocs tidak mendukung banyak bahasa.

TypeScript

Helper defineConfig memberikan pelengkapan otomatis penuh:

TypeScript

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

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

export default defineConfig(config);

defineConfig mengembalikan objek yang Anda teruskan, ditambah default docs dan theme yang belum digunakan seperti dijelaskan di atas.