Siirry sisältöön

Kokoonpano

Näytä Markdown-muodossa Muokkaa palvelussa GitHub Dokumentaatio: 7b38e05

Sivustonlaajuiset asetukset määritetään projektin juurihakemiston tiedostossa onedocs.config.ts. Välität viedyn olion kohteisiin DocsLayout, HomePage ja createMetadata, jotka lukevat sen. Sisällön sijainti määritetään tiedostossa source.config.ts, ei täällä (katso Getting Started).

Perusasetukset

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

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

Tämä riittää alkuun. Kaikki muu on valinnaista.

Täysi esimerkki

Ominaisuuskuvakkeet ovat React-elementtejä, joten niitä käyttävän asetustiedoston on oltava .tsx-tiedosto:

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

Asetukset

title (pakollinen)

Sivustosi nimi. Navigointipalkissa näkyy tämä nimi, jos logo-arvoa ei ole asetettu. createMetadata käyttää sitä oletussivun otsikkona ja %s | Title-mallissa, ja etusivulla se näkyy pääotsikkona ja alatunnisteen tekijänoikeusrivillä.

TypeScript
title: "My Project"

description

Lyhyt kuvaus. createMetadata käyttää sitä metakuvauksena, ja etusivulla se näytetään pääotsikon alla, jos homepage.hero.description-arvoa ei ole asetettu.

TypeScript
description: "Documentation for My Project"

Korvaa navigointipalkissa otsikon. Käytä yhtä polkua tai vaaleaa ja tummaa versiota. Kuvan korkeus on 24 px, ja sen vaihtoehtoinen teksti on title.

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

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

icon

Tiedostossa createMetadata määritettävä sivustokuvake. Vaaleat ja tummat versiot näytetään prefers-color-scheme-mediakyselyillä.

TypeScript
icon: "/icon.png"

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

Navigointipalkin asetukset, joita käyttävät DocsLayout ja 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

Pääosio ja ominaisuusruudukko, jotka HomePage renderöi.

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 renderöidään sellaisenaan, joten välitä sille elementti, kuten lucide-react-kuvake. Merkkijono, kuten "rocket", näytetään tekstinä.

Kaksi muuta pääosion asetusta korvaavat oletuspääosion osia:

  • hero.left korvaa otsikon, kuvauksen, asennuslohkon ja painikkeen omalla sisällölläsi. Se ottaa vastaan React-solmun tai funktion, joka palauttaa sellaisen.
  • hero.right täyttää pääosion oikean puoliskon. Se piilotetaan lg-rajakohdan alapuolella.

Linkit ja somekuvakkeet kohteen HomePage alatunnisteessa tekijänoikeusrivin vieressä. Molemmat avautuvat uuteen välilehteen.

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

Kunkin some-linkin saavutettava nimi on label.

Asetukset, joilla ei vielä ole vaikutusta

OnedocsConfig myös määrittää tyypit kohteille docs, theme ja i18n, ja defineConfig asettaa kohteiden docs.dir ja theme.darkMode oletusarvot. Mikään Onedocs-koodi ei kuitenkaan lue niitä (#2). Niiden asettaminen ei muuta mitään:

  • docs.dir: sisältökansio on dir, jonka välität kohteessa defineDocs tiedostolle source.config.ts.
  • theme.primaryColor ja theme.darkMode: värit tulevat Fumadocs UI-teemasta, jonka CSS-esiasetus tuo käyttöön. Vaaleat ja tummat tilat tulevat kohteen Fumadocs UI RootProvider-asetuksista.
  • i18n: kohteessa Onedocs ei ole monikielisyystukea.

TypeScript

defineConfig-apuri tarjoaa täyden automaattisen täydennyksen:

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

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

export default defineConfig(config);

defineConfig palauttaa välittämäsi olion sekä edellä kuvatut käyttämättömät docs- ja theme-oletusarvot.