İçeriğe geç

Yapılandırma

Markdown olarak görüntüle GitHub üzerinde düzenle Dokümantasyon: 7b38e05

Site genelindeki ayarlar, proje kökündeki onedocs.config.ts dosyasına yazılır. Dışa aktarılan nesneyi bu ayarları okuyan DocsLayout, HomePage ve createMetadata öğelerine iletirsiniz. İçeriğinizin nerede bulunduğu burada değil, source.config.ts içinde belirlenir (bkz. Başlarken).

Temel kurulum

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

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

Asgari gerekenler bunlardır. Diğer her şey isteğe bağlıdır.

Tam örnek

Özellik simgeleri React öğeleridir; bu nedenle bunları kullanan bir yapılandırma .tsx dosyası olmalıdır:

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

Seçenekler

title (gerekli)

Sitenizin adı. logo ayarlanmadığında gezinme çubuğunda gösterilir; createMetadata bunu varsayılan sayfa başlığı ve %s | Title şablonunda kullanır; ana sayfada ise hero başlığı ve altbilgideki telif hakkı satırında yer alır.

TypeScript
title: "My Project"

description

Kısa açıklama. createMetadata bunu meta açıklama olarak kullanır; homepage.hero.description ayarlanmadığında ana sayfada hero başlığının altında gösterir.

TypeScript
description: "Documentation for My Project"

Gezinme çubuğundaki başlığın yerini alır. Tek bir yol veya açık ve koyu varyantları kullanın; görsel 24 px yüksekliğindedir ve alternatif metin olarak title kullanır.

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

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

simge

createMetadata aracılığıyla ayarlanan site simgesi. Açık ve koyu varyantlar prefers-color-scheme medya sorgularıyla sunulur.

TypeScript
icon: "/icon.png"

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

DocsLayout ve HomePage tarafından kullanılan gezinme çubuğu yapılandırması.

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

HomePage tarafından oluşturulan hero ve özellik ızgarası.

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 olduğu gibi oluşturulur; bu nedenle lucide-react simgesi gibi bir öğe iletin. "rocket" gibi bir metin dizesi metin olarak yazdırılır.

Varsayılan hero'nun bazı bölümlerini değiştiren iki ek hero seçeneği:

  • hero.left; başlığı, açıklamayı, kurulum bloğunu ve düğmeyi kendi içeriğinizle değiştirir. Bir React düğümü veya böyle bir düğüm döndüren bir işlev alır.
  • hero.right, hero'nun sağ yarısını doldurur. lg kesme noktasının altında gizlenir.

HomePage altbilgisinde, telif hakkı satırının yanında yer alan bağlantılar ve sosyal medya simgeleri. Her ikisi de yeni sekmede açılır.

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

Her sosyal medya bağlantısının erişilebilir adı olarak label kullanılır.

Henüz etkisi olmayan seçenekler

OnedocsConfig ayrıca docs, theme ve i18n türlerini de tanımlar; defineConfig ise docs.dir ve theme.darkMode varsayılanlarını ekler, ancak hiçbir Onedocs kodu bunları okumaz (#2). Bunları ayarlamak hiçbir şeyi değiştirmez:

  • docs.dir: içerik klasörü, source.config.ts içinde defineDocs öğesine ilettiğiniz dir değeridir.
  • theme.primaryColor ve theme.darkMode: renkler, CSS ön ayarının içe aktardığı Fumadocs UI temasından gelir; açık ve koyu modlar ise Fumadocs UI öğesinin RootProvider değerinden gelir.
  • i18n: Onedocs çoklu dil desteğine sahip değildir.

TypeScript

defineConfig yardımcı işlevi, otomatik tamamlama özelliğini sağlar:

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

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

export default defineConfig(config);

defineConfig, ilettiğiniz nesneyi ve yukarıda açıklanan kullanılmayan docs ile theme varsayılanlarını döndürür.