Διαμόρφωση

Οι ρυθμίσεις για ολόκληρο τον ιστότοπο βρίσκονται στο 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, επομένως ένα config που τα χρησιμοποιεί πρέπει να είναι αρχείο .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, ενώ η αρχική σελίδα το χρησιμοποιεί ως τίτλο hero και στη γραμμή πνευματικών δικαιωμάτων του υποσέλιδου.

title: "My Project"

περιγραφή

Σύντομη περιγραφή. Το createMetadata τη χρησιμοποιεί ως μετα-περιγραφή, ενώ η αρχική σελίδα την εμφανίζει κάτω από τον τίτλο hero όταν δεν έχει οριστεί το 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",
}

αρχική σελίδα

Το hero και το πλέγμα χαρακτηριστικών που αποδίδει το 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 αντικαθιστούν τμήματα του προεπιλεγμένου hero:

• Το hero.left αντικαθιστά τον τίτλο, την περιγραφή, το μπλοκ εγκατάστασης και το κουμπί με δικό σας περιεχόμενο. Δέχεται κόμβο React ή συνάρτηση που επιστρέφει έναν τέτοιο κόμβο.
• Το hero.right γεμίζει το δεξί μισό του hero. Είναι κρυφό κάτω από το σημείο διακοπής 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, ενώ οι φωτεινές και σκοτεινές λειτουργίες προέρχονται από το Fumadocs UI του RootProvider.
• i18n: το Onedocs δεν υποστηρίζει πολλές γλώσσες.

TypeScript

Η βοηθητική συνάρτηση defineConfig παρέχει πλήρη αυτόματη συμπλήρωση:

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

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

export default defineConfig(config);

Το defineConfig επιστρέφει το αντικείμενο που περνάτε, μαζί με τις αχρησιμοποίητες προεπιλεγμένες τιμές docs και theme που περιγράφονται παραπάνω.