Next.js：Fumadocs 文档
为使用 Next.js 和 Fumadocs 构建的文档站点提供布局、首页和 SEO 辅助功能。
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562最新版本 0.1.27 MIT Next.js 16, Node 20.9+
import { HomePage, CTASection } from "onedocs";
export default function Home() {
return (
<HomePage config={config} packageName="my-package">
<CTASection
title="Ready to get started?"
cta={{ label: "Read the Docs", href: "/docs" }}
/>
</HomePage>
);
}实践应用
Onedocs 将一个配置对象传递给 Fumadocs UI 布局。
一份配置，一个布局
onedocs.config.ts 保存站点标题、描述和 GitHub 仓库，DocsLayout 则将其与 Fumadocs 源的页面树一并读取。
布局会渲染侧边栏、主题切换按钮、根据 nav.github 构建的 GitHub 链接，以及搜索对话框；对话框会查询你添加的 /api/search 路由。
入门指南介绍了其他文件：内容源、Next.js 配置、根布局和页面路由。
import { defineConfig } from "onedocs/config";
export default defineConfig({
title: "My Docs",
description: "Documentation for my project",
nav: {
github: "username/repo",
},
});import { DocsLayout } from "onedocs";
import type { ReactNode } from "react";
import { source } from "@/lib/source";
import config from "../../../onedocs.config";
export default function Layout({ children }: { children: ReactNode }) {
return (
<DocsLayout config={config} pageTree={source.pageTree}>
{children}
</DocsLayout>
);
}现成布局
DocsLayout、DocsPage 和 HomePage 为你提供带侧边栏、搜索和目录的文档框架，以及一个着陆页。
单个配置文件
defineConfig() 在 onedocs.config.ts 中设置标题、描述、徽标、导航链接、页脚，以及首页的主视觉区和功能。
Markdown 优先
在内容文件夹中编写 .md 或 .mdx 文件，每个页面都会提供语法高亮和目录。
搜索
Fumadocs 内置的 Orama 搜索。添加一个带有 createFromSource 的 API 路由，搜索对话框便会使用它。
深色模式
浅色和深色主题来自 Fumadocs UI，文档布局也包含主题切换按钮。徽标和网站图标支持浅色和深色变体。
TypeScript 就绪
支持 TypeScript，提供类型安全的配置和编辑器自动补全。
SEO 与 llms.txt
提供 sitemap.xml、robots.txt、llms.txt、llms-full.txt、页面元数据和 Open Graph 图像的辅助功能。
可自定义
需要更多控制文档时，可直接使用 Fumadocs 组件。
探索完整的 Onedocs 指南，涵盖安装、首次使用、高级工作流程和 API 详情。