自己动手制作
为 Fumadocs 创建你自己的内容来源。
介绍
🌐 Introduction
对于自定义内容源实现，有两种方式：
🌐 For a custom content source implementation, there's two ways:
使用加载器 API
🌐 Using Loader API
Loader API 具有类似文件系统的接口，可用于集成不同的内容来源。
🌐 Loader API has a file-system-like interface for integrating different content sources.
详情请参见 Loader API source。
🌐 See Loader API source for details.
使用底层 API
🌐 Using Low-Level API
为了更强大的控制，你可以直接使用底层 API。
🌐 For more robust control, you can use lower level APIs directly.
页面树
🌐 1. Page Tree
你可以选择硬编码页面树，或者编写一些代码来生成页面树。请参见 页面树的定义。
🌐 You can either hardcode the page tree, or write some code to generate one. See Definitions of Page Tree.
将你的页面树传给 DocsLayout（通常在 layout.tsx 中）:
🌐 Pass your page tree to DocsLayout (usually in a layout.tsx):
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<DocsLayout
tree={
{
// your own tree
}
}
>
{children}
</DocsLayout>
);
}页面树就像更智能的“侧边栏项目”，它们将在界面的各处用于导航元素，例如页面底部。
🌐 The page tree is like a smarter "sidebar items", they will be referenced everywhere in the UI for navigation elements, such as the page footer.
页面内容
🌐 2. Page Content
对于文档页面，逻辑相同：
🌐 For docs page, it's the same logic:
- 定义路径参数（
slugs）。 - 从路径参数获取页面内容。
- 呈现内容（在
DocsPage组件内）。
你可能需要目录，可以自行生成，或使用 getTableOfContents 工具（仅限 Markdown/MDX）。
🌐 You may need table of contents, which can be generated on your own, or using the getTableOfContents utility (Markdown/MDX only).
import { DocsPage, DocsBody } from 'fumadocs-ui/layouts/docs/page';
import { getPage } from './my-content-source';
import { notFound } from 'next/navigation';
export default function Page({ params }: { params: { slug?: string[] } }) {
const page = getPage(params.slug);
if (!page) notFound();
return (
<DocsPage toc={page.tableOfContents}>
<DocsBody>{page.render()}</DocsBody>
</DocsPage>
);
}预渲染
🌐 3. Pre-rendering
预渲染的机制取决于你使用的 React.js 框架。
🌐 The mechanism for pre-rendering differs depending on your React.js framework.
预渲染页面（尤其是访问频繁的页面）很重要，以提高初始加载速度。
🌐 It's important to pre-render pages (especially the frequently visited ones) to improve initial load time.
在 Next.js 中
定义 generateStaticParams 函数以填充动态和通配路由。
🌐 Define the generateStaticParams function to populate dynamic & catch-all routes.
在从远程源预渲染页面时，确保在构建阶段优化重复读取。例如，如果你通过 GitHub API 获取内容，最好将仓库内容克隆到本地进行预渲染。
🌐 When pre-rendering pages from a remote source, make sure to optimize repeated reads during the build phase. For example, if you're fetching content via GitHub API, it is better to clone the repository content locally for pre-rendering.
/docs/* -> GET github.com
/docs/introduction -> GET github.com
/docs/my-page -> GET github.com
Error: API Ratelimit文档搜索
🌐 4. Document Search
这可能会比较困难，因为你的内容不一定是 Markdown/MDX。对于 Markdown 和 MDX，内置的 搜索 API + 搜索索引的使用对于大多数用例来说已经足够。否则，你将需要自己实现相关功能。
🌐 This can be difficult considering your content may not be necessarily Markdown/MDX. For Markdown and MDX, the built-in Search API + search index usage is adequate for most use cases. Otherwise, you will have to bring your own implementation.
我们推荐使用第三方解决方案，如 Orama 或 Algolia 搜索。它们比内置的搜索 API 更灵活，并且更容易与远程资源集成。 Fumadocs 提供了一个 搜索集成 的变体。
🌐 We recommend 3rd party solutions like Orama or Algolia Search. They are more flexible than the built-in Search API, and is easier to integrate with remote sources. Fumadocs offers a variant of Search Integrations.
Last updated on