diff --git a/content/docs/comparisons.zh.mdx b/content/docs/comparisons.zh.mdx new file mode 100644 index 0000000..adf80ea --- /dev/null +++ b/content/docs/comparisons.zh.mdx @@ -0,0 +1,68 @@ +--- +title: 对比 +description: Fumadocs 与其他现有框架有何不同？ +icon: GitCompareArrows +--- + +## Nextra + +Fumadocs 深受 Nextra 启发。例如，路由约定。这就是为什么 Fumadocs 中也存在 `meta.json`。 + +Nextra 比 Fumadocs 更加固执己见。Fumadocs 由 App Router 加速。因此，它提供了许多服务器端功能，与简单编辑配置文件相比，您必须手动配置一些内容。 + +如果您想要对一切都有更多的控制，比如将其添加到现有代码库或实现高级路由，Fumadocs 会表现得很出色。 + +### 功能表 + +| 功能 | Fumadocs | Nextra | +| ------------------- | ------------ | ------------------------- | +| 静态生成 | 是 | 是 | +| 缓存 | 是 | 是 | +| 明/暗模式 | 是 | 是 | +| 语法高亮 | 是 | 是 | +| 目录 | 是 | 是 | +| 全文搜索 | 是 | 是 | +| 国际化 | 是 | 是 | +| 最后 Git 编辑时间 | 是 | 是 | +| 页面图标 | 是 | 是，通过 `_meta.js` 文件 | +| RSC | 是 | 是 | +| 远程源 | 是 | 是 | +| SEO | 通过元数据 | 是 | +| 内置组件 | 是 | 是 | +| RTL 布局 | 是 | 是 | + +### 附加功能 + +通过第三方库支持的功能（如 [TypeDoc](https://typedoc.org)）不会在此列出。 + +| 功能 | Fumadocs | Nextra | +| -------------------------- | -------- | ------ | +| OpenAPI 集成 | 是 | 否 | +| TypeScript 文档生成 | 是 | 否 | +| TypeScript Twoslash | 是 | 是 | + +## Mintlify + +Mintlify 是一项文档服务，与 Fumadocs 相比，它提供免费套餐，但并非完全免费和开源。 + +Fumadocs 不如 Mintlify 强大，例如 Mintlify 的 OpenAPI 集成。 +作为 Fumadocs 的创建者，如果您对当前构建文档的方式感到满意，我不建议从 Mintlify 切换到 Fumadocs。 +然而，我相信 Fumadocs 是所有想要拥有优雅文档的 Next.js 开发者的合适工具。 + +## Docusaurus + +Docusaurus 是一个基于 React.js 的强大框架。它通过插件和自定义主题提供了许多酷炫的功能。 + +### 更好的开发者体验 + +由于 Fumadocs 构建在 Next.js 之上，您每次都必须启动 Next.js 开发服务器来查看更改，并且相对于 Docusaurus，初始样板代码较多。 + +对于简单的文档，如果您不需要任何特定于 Next.js 的功能，Docusaurus 可能是更好的选择。 + +然而，当您想要使用 Next.js，或寻求更多的可定制性，如调整默认 UI 组件时，Fumadocs 可能是更好的选择。 + +### 插件 + +您可以通过插件轻松实现许多功能，他们的生态系统确实更大，并由许多贡献者维护。 + +相比之下，Fumadocs 的灵活性允许您自己实现它们，可能需要更长的时间来调整它以达到您的满意度。 \ No newline at end of file diff --git a/content/docs/components/accordion.zh.mdx b/content/docs/components/accordion.zh.mdx new file mode 100644 index 0000000..fe608e1 --- /dev/null +++ b/content/docs/components/accordion.zh.mdx @@ -0,0 +1,42 @@ +--- +title: 手风琴 +description: 在文档中添加手风琴组件 +preview: accordion +--- + +## 使用方法 + +基于 [Radix UI Accordion](https://www.radix-ui.com/primitives/docs/components/accordion)，对 FAQ 部分特别有用。 + +```tsx +import React from 'react'; +import { Accordion, Accordions } from 'fumadocs-ui/components/accordion'; + + + 我的内容 +; +``` + +### Accordions + +{/* */} + +### Accordion + +{/* */} + +### 链接到手风琴 + +您可以为手风琴指定一个 `id`。当用户导航到带有指定 `id` 的哈希参数的页面时，手风琴将自动打开。 + +```mdx + + + +我的内容 + + + +``` + +> 手风琴的值默认与标题相同。当存在 id 时，它将被用作值。 \ No newline at end of file diff --git a/content/docs/components/banner.zh.mdx b/content/docs/components/banner.zh.mdx new file mode 100644 index 0000000..558c232 --- /dev/null +++ b/content/docs/components/banner.zh.mdx @@ -0,0 +1,61 @@ +--- +title: 横幅 +description: 在您的网站添加横幅 +preview: banner +--- + +## 使用方法 + +将元素放在根布局的顶部，您可以用它来显示公告。 + +```tsx +import { Banner } from 'fumadocs-ui/components/banner'; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}): React.ReactElement { + return ( + + + Hello World + {children} + + + ); +} +``` + +### 变体 + +更改默认变体。 + +```tsx +import { Banner } from 'fumadocs-ui/components/banner'; + +Hello World; +``` + +### 更改布局 + +默认情况下，横幅使用 `style` 标签来修改 Fumadocs 布局（例如减少侧边栏高度）。 +您可以通过以下方式禁用它： + +```tsx +import { Banner } from 'fumadocs-ui/components/banner'; + +Hello World; +``` + +### 关闭 + +要允许用户关闭横幅，请给横幅一个 ID。 + +```tsx +import { Banner } from 'fumadocs-ui/components/banner'; + +Hello World; +``` + +状态将自动保持。 \ No newline at end of file diff --git a/content/docs/components/dynamic-codeblock.zh.mdx b/content/docs/components/dynamic-codeblock.zh.mdx new file mode 100644 index 0000000..13fed15 --- /dev/null +++ b/content/docs/components/dynamic-codeblock.zh.mdx @@ -0,0 +1,38 @@ +--- +title: 代码块（动态） +description: 也能高亮代码的代码块 +preview: dynamicCodeBlock +--- + +## 使用方法 + +```tsx +import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock'; + +; +``` + +这个组件与 MDX [`CodeBlock`](/docs/mdx/codeblock) 组件不同，可以在不使用 MDX 的情况下使用。 +它使用 Shiki 高亮代码，并使用默认组件渲染它。 + +特点： + +- 可以在服务器上预渲染 +- 在浏览器上懒加载语言和主题 + +### 选项 + +```tsx +import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock'; + +; +``` \ No newline at end of file diff --git a/content/docs/components/files.zh.mdx b/content/docs/components/files.zh.mdx new file mode 100644 index 0000000..48b124b --- /dev/null +++ b/content/docs/components/files.zh.mdx @@ -0,0 +1,35 @@ +--- +title: 文件 +description: 在文档中显示文件结构 +preview: 'files' +--- + +## 使用方法 + +将文件组件包装在 `Files` 中。 + +```mdx +import { File, Folder, Files } from 'fumadocs-ui/components/files'; + + + + + + + + + + + + + + +``` + +### File + +{/* */} + +### Folder + +{/* */} \ No newline at end of file diff --git a/content/docs/components/github-info.zh.mdx b/content/docs/components/github-info.zh.mdx new file mode 100644 index 0000000..a8684b6 --- /dev/null +++ b/content/docs/components/github-info.zh.mdx @@ -0,0 +1,45 @@ +--- +title: GitHub 信息 +description: 显示您的 GitHub 仓库信息 +preview: githubInfo +--- + +## 使用方法 + +```tsx +import { GithubInfo } from 'fumadocs-ui/components/github-info'; + +; +``` + +建议将其添加到您的文档布局中，使用 `links` 选项： + +```tsx title="app/docs/layout.tsx" +import { DocsLayout, type DocsLayoutProps } from 'fumadocs-ui/layouts/notebook'; +import type { ReactNode } from 'react'; +import { baseOptions } from '@/app/layout.config'; +import { source } from '@/lib/source'; +import { GithubInfo } from 'fumadocs-ui/components/github-info'; + +const docsOptions: DocsLayoutProps = { + ...baseOptions, + tree: source.pageTree, + links: [ + { + type: 'custom', + children: ( + + ), + }, + ], +}; + +export default function Layout({ children }: { children: ReactNode }) { + return {children}; +} +``` \ No newline at end of file diff --git a/content/docs/components/image-zoom.zh.mdx b/content/docs/components/image-zoom.zh.mdx new file mode 100644 index 0000000..0f0c5c8 --- /dev/null +++ b/content/docs/components/image-zoom.zh.mdx @@ -0,0 +1,34 @@ +--- +title: 可缩放图片 +description: 在文档中允许放大图片 +preview: zoomImage +--- + +## 使用方法 + +在 MDX 组件中用 `ImageZoom` 替换 `img`。 + +```tsx title="app/docs/[[...slug]]/page.tsx" +import { ImageZoom } from 'fumadocs-ui/components/image-zoom'; +import defaultMdxComponents from 'fumadocs-ui/mdx'; + +return ( + , + // 其他 Mdx 组件 + }} + /> +); +``` + +现在，所有图片都将自动启用图片缩放功能。 + +```mdx +![Test](/banner.png) +``` + +### 图片优化 + +如果未指定，将为 Next.js `` 组件定义默认的 [`sizes` 属性](https://nextjs.org/docs/app/api-reference/components/image#sizes)。 \ No newline at end of file diff --git a/content/docs/components/index.zh.mdx b/content/docs/components/index.zh.mdx new file mode 100644 index 0000000..e49d3de --- /dev/null +++ b/content/docs/components/index.zh.mdx @@ -0,0 +1,5 @@ +--- +title: 组件 +description: 改进文档的额外组件 +index: true +--- \ No newline at end of file diff --git a/content/docs/components/inline-toc.zh.mdx b/content/docs/components/inline-toc.zh.mdx new file mode 100644 index 0000000..73e42a2 --- /dev/null +++ b/content/docs/components/inline-toc.zh.mdx @@ -0,0 +1,31 @@ +--- +title: 内联目录 +description: 在文档中添加内联目录 +preview: inlineTOC +--- + +## 使用方法 + +将 TOC 项目传递给组件。 + +```mdx +import { InlineTOC } from 'fumadocs-ui/components/inline-toc'; + + +``` + +### 在页面中使用 + +您可以在每个页面中添加内联目录。 + +```tsx + + ... + + ... + +``` + +## 参考 + +{/* */} \ No newline at end of file diff --git a/content/docs/components/root-toggle.zh.mdx b/content/docs/components/root-toggle.zh.mdx new file mode 100644 index 0000000..85f568f --- /dev/null +++ b/content/docs/components/root-toggle.zh.mdx @@ -0,0 +1,35 @@ +--- +title: 根切换器 +description: 在页面树之间切换 +preview: rootToggle +--- + +## 使用方法 + +将此组件添加到您的侧边栏或您想要的其他地方。 + +```tsx +import { DocsLayout } from 'fumadocs-ui/layouts/docs'; +import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle'; + + + ), + }} +/>; +``` \ No newline at end of file diff --git a/content/docs/components/steps.zh.mdx b/content/docs/components/steps.zh.mdx new file mode 100644 index 0000000..af1b320 --- /dev/null +++ b/content/docs/components/steps.zh.mdx @@ -0,0 +1,57 @@ +--- +title: 步骤 +description: 在文档中添加步骤 +preview: steps +--- + +## 使用方法 + +将您的步骤放入 `Steps` 容器中。 + +```mdx +import { Step, Steps } from 'fumadocs-ui/components/steps'; + + + + +### 你好世界 + + + + + +### 你好世界 + + + +``` + +> 我们建议在 Tailwind CSS 项目中直接使用 Tailwind CSS 实用类。 + +### 不使用导入 + +您可以在不导入的情况下使用 Tailwind CSS 实用工具。 + +```mdx +
+
+
+``` + +它支持仅对带有任意变体的标题添加步骤样式。 + +```mdx +
+ +### 你好世界 + +
+``` + +
+ +### 你好世界 + +您不再需要使用步骤组件了。 + +
\ No newline at end of file diff --git a/content/docs/components/tabs.zh.mdx b/content/docs/components/tabs.zh.mdx new file mode 100644 index 0000000..7d3f0ed --- /dev/null +++ b/content/docs/components/tabs.zh.mdx @@ -0,0 +1,114 @@ +--- +title: 选项卡 +description: + 使用 Radix UI 构建的选项卡组件，具有持久性和共享值等附加功能。 +preview: tabs +--- + +## 使用方法 + +在 MDX 文档中导入它。 + +```mdx +import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; + + + Javascript 很奇怪 + Rust 很快 + +``` + +### 不使用 `value` + +如果没有 `value`，它会从子元素索引中检测。请注意，这可能会在重新渲染时导致错误，如果选项卡可能会改变，不建议这样做。 + +```mdx +import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; + + + Javascript 很奇怪 + Rust 很快 + +``` + +### 共享值 + +通过传递 `groupId` 属性，您可以在具有相同 ID 的所有选项卡之间共享值。 + +```mdx + + Javascript 很奇怪 + Rust 很快 + +``` + +### 持久性 + +您可以通过传递 `persist` 属性启用持久性。该值将存储在 `localStorage` 中，以其 ID 作为键。 + +```mdx + + Javascript 很奇怪 + Rust 很快 + +``` + +> 持久性仅在您传递了 `id` 时有效。 + +### 默认值 + +通过传递 `defaultIndex` 设置默认值。 + +```mdx + + Javascript 很奇怪 + Rust 很快 + +``` + +### 链接到选项卡 + +使用 HTML `id` 属性链接到特定选项卡。 + +```mdx + + Javascript 很奇怪 + Rust 很快 + + `Hello World` + + +``` + +您可以在 URL 中添加哈希 `#tab-cpp` 并重新加载，C++ 选项卡将被激活。 + +此外，可以在 `Tabs` 组件中将 `updateAnchor` 属性设置为 `true`，以便在每次选择新选项卡时自动更新 URL 哈希： + +```mdx + + + Javascript 很奇怪 + + + Rust 很快 + + + `Hello World` + + +``` + +### 高级用法 + +您可以直接从导出的 `Primitive` 中使用样式化的 Radix UI 原语。 + +```mdx +import { Primitive } from 'fumadocs-ui/components/tabs'; + + + + + + + +``` \ No newline at end of file diff --git a/content/docs/components/type-table.zh.mdx b/content/docs/components/type-table.zh.mdx new file mode 100644 index 0000000..f51089b --- /dev/null +++ b/content/docs/components/type-table.zh.mdx @@ -0,0 +1,34 @@ +--- +title: 类型表格 +description: 用于记录类型的表格 +preview: typeTable +--- + +## 使用方法 + +它接受一个 `type` 属性。 + +```mdx +import { TypeTable } from 'fumadocs-ui/components/type-table'; + + +``` + +## 参考 + +### Type Table + +{/* */} + +### Object Type + +{/* */} \ No newline at end of file diff --git a/content/docs/customisation.zh.mdx b/content/docs/customisation.zh.mdx new file mode 100644 index 0000000..2fe5a4f --- /dev/null +++ b/content/docs/customisation.zh.mdx @@ -0,0 +1,60 @@ +--- +title: 概览 +description: Fumadocs UI 的概览 +--- + +## 架构 + + + +| | | +| ------------- | ------------------------------------------------------- | +| **侧边栏** | 显示站点标题和导航元素。 | +| **页面树** | 由您传递，主要作为侧边栏的项目渲染。 | +| **文档页面** | 页面的所有内容。 | +| **目录** | 文章内导航。 | + +### 页面树 + +侧边栏等导航元素使用[页面树](/docs/headless/page-tree)来渲染导航链接，它是描述所有可用页面和文件夹的树形结构。 + +通常，它是使用 [`loader()`](/docs/headless/source-api) 从您的文件结构生成的，您可以了解[如何组织页面](/docs/page-conventions)。 + +## 自定义 + +### 布局 + +您可以使用不同布局的暴露选项： + + + + 文档的布局 + + + 文档内容的布局 + + + 文档布局的更紧凑版本 + + + 其他页面的布局 + + + +### 组件 + +Fumadocs UI 还提供了样式化组件，用于交互式示例以增强您的文档，您可以使用暴露的道具如 `style` 和 `className` 来自定义它们。 + +参见[组件](/docs/components)。 + +### 设计系统 + +由于设计系统是基于 Tailwind CSS 构建的，您可以[通过 CSS 变量](/docs/theme#colors)自定义它。 + +### CLI + +如果这些都不适合您，Fumadocs CLI 是一个工具，可以将 Fumadocs UI 组件和布局安装到您的代码库中，类似于 Shadcn UI。允许您完全自定义 Fumadocs UI： + +```package-install +npx fumadocs add +``` \ No newline at end of file diff --git a/content/docs/index.zh.mdx b/content/docs/index.zh.mdx new file mode 100644 index 0000000..3b2246c --- /dev/null +++ b/content/docs/index.zh.mdx @@ -0,0 +1,249 @@ +--- +title: 快速入门 +description: Fumadocs 入门指南 +icon: Album +--- + +## 简介 + +Fumadocs (Foo-ma docs) 是一个基于 Next.js 的**文档框架**，设计为快速、灵活， +并无缝集成到 Next.js App Router 中。 + +Fumadocs 由不同部分组成： + + + +} title='Fumadocs Core'> + +处理大部分逻辑，包括文档搜索、内容源适配器和 Markdown 扩展。 + + + +} title='Fumadocs UI'> + +Fumadocs 的默认主题为文档站点提供了美观的外观和交互式组件。 + + + +} title='Content Source'> + +您内容的来源，可以是 CMS 或本地数据层，如 [Content Collections](https://www.content-collections.dev) 和 [Fumadocs MDX](/docs/mdx)，即官方内容源。 + + + +} title='Fumadocs CLI'> + +一个命令行工具，用于安装 UI 组件和自动化操作，对于自定义布局非常有用。 + + + + + + + 阅读我们深入的 [什么是 Fumadocs](/docs/what-is-fumadocs) 介绍。 + + +### 术语 + +**Markdown/MDX:** Markdown 是一种用于创建格式化文本的标记语言。Fumadocs 默认支持 Markdown 和 MDX（Markdown 的超集）。 + +虽然不是必需的，但对 Next.js App Router 的基本了解对于进一步的自定义会很有帮助。 + +## 自动安装 + +需要 Node.js 18 或更高版本，请注意 Node.js 23.1 可能在 Next.js 生产构建中存在问题。 + + + +```bash tab="npm" +npm create fumadocs-app +``` + +```bash tab="pnpm" +pnpm create fumadocs-app +``` + +```bash tab="yarn" +yarn create fumadocs-app +``` + +```bash tab="bun" +bun create fumadocs-app +``` + + + +它会询问您要使用的框架和内容源，随后将初始化一个新的 fumadocs 应用程序。现在您可以开始动手了！ + + + + 您可以按照 [手动安装](/docs/manual-installation) 指南开始。 + + + +### 尽情使用！ + +在 docs 文件夹中创建您的第一个 MDX 文件。 + +```mdx title="content/docs/index.mdx" +--- +title: Hello World +--- + +## Yo what's up +``` + +在开发模式下运行应用程序并查看 http://localhost:3000/docs。 + +```package-install +npm run dev +``` + +## 探索 + +在项目中，您可以看到： + +- `lib/source.ts`：内容源适配器的代码，[`loader()`](/docs/headless/source-api) 提供了与内容源交互的接口，并为您的页面分配 URL。 +- `app/layout.config.tsx`：布局的共享选项，可选但建议保留。 + +| 路由 | 描述 | +| ------------------------- | -------------------------------------- | +| `app/(home)` | 您的登陆页面和其他页面的路由组。 | +| `app/docs` | 文档布局和页面。 | +| `app/api/search/route.ts` | 搜索的路由处理器。 | + +### 编写内容 + +对于编写文档，请务必阅读： + + + + Fumadocs 还有一些额外的内容创作功能。 + + + 了解如何自定义导航链接/侧边栏项目。 + + + +### 内容源 + +内容源处理您的所有内容，例如编译 Markdown 文件和验证前言。 + + + + + + 阅读 [介绍](/docs/mdx) 了解它如何处理您的内容。 + + 项目中已包含 `source.config.ts` 配置文件，您可以自定义不同的选项，如前言模式。 + + + + + + Fumadocs 不仅限于 Markdown。对于其他源（如 Sanity），您可以构建 [自定义内容源](/docs/headless/custom-source)。 + + + + + +### 自定义 UI + +请参阅 [自定义指南](/docs/customisation)。 + +## 常见问题 + +您可能遇到的一些常见问题。 + + + + +有时，`fumadocs-ui` 没有安装在您的 Tailwind CSS 配置文件的工作区中（例如，在 monorepo 设置中）。 + +您必须确保 Tailwind CSS 扫描 `fumadocs-ui` 包，并为 `@source` 提供正确的相对路径。 + +例如，添加 `../../` 指向根工作区中的 `node_modules` 文件夹。 + + ```css + @import 'tailwindcss'; + @import 'fumadocs-ui/css/neutral.css'; + @import 'fumadocs-ui/css/preset.css'; + + /* [!code --] */ + @source '../node_modules/fumadocs-ui/dist/**/*.js'; + /* [!code ++] */ + @source '../../../node_modules/fumadocs-ui/dist/**/*.js'; + ``` + + + + +您可以更改文档的基本路由（例如，从 `/docs/page` 更改为 `/info/page`）。 +由于 Fumadocs 使用 Next.js App Router，您可以简单地重命名路由： + + + + + + + + + + +并在 `source.ts` 中告诉 Fumadocs 使用新的路由： + +```ts title="lib/source.ts" +import { loader } from 'fumadocs-core/source'; + +export const source = loader({ + baseUrl: '/info', + // other options +}); +``` + + + + +当配置了 `generateStaticParams` 时，Next.js 会将动态路由转换为静态路由。 +因此，它与静态页面一样快。 + +您可以在 Next.js 上启用静态导出，获得静态构建输出。（请注意，路由处理器不适用于静态导出，您必须配置静态搜索） + + + + +与在 Next.js App Router 中管理布局相同，从内容目录（`/content/docs`）中删除原始 MDX 文件。 +这确保重复的页面不会导致错误。 + +现在，您可以将页面添加到另一个路由组，该组不是文档布局的后代。 + +例如，在您的 `app` 文件夹下： + + + + + + + + + +将用您的 `page.tsx` 替换 `/docs` 页面。 + + + + + 为每个版本使用单独的部署。 + + 在 Vercel 上，可以通过在 GitHub 存储库中为特定版本创建另一个分支来实现。 + 要链接到其他版本的站点，请使用 Links API 或自定义导航组件。 + + + + 我们建议使用 [侧边栏标签](/docs/navigation/sidebar#sidebar-tabs)。 + + + + +## 了解更多 + +刚来这里？别担心，我们欢迎您的问题。 \ No newline at end of file diff --git a/content/docs/internationalization.zh.mdx b/content/docs/internationalization.zh.mdx new file mode 100644 index 0000000..8b921c5 --- /dev/null +++ b/content/docs/internationalization.zh.mdx @@ -0,0 +1,222 @@ +--- +title: 国际化 +description: 在您的文档中支持多种语言 +--- + + + + Fumadocs 不是一个功能齐全的 i18n 库，它只管理自己的组件和工具。 + + 您可以使用其他库，如 [next-intl](https://github.com/amannn/next-intl)，用于应用程序的其余部分。 + 阅读 [Next.js 文档](https://nextjs.org/docs/app/building-your-application/routing/internationalization)，了解更多关于在 Next.js 中实现 I18n 的信息。 + + + +## 手动设置 + +在一个文件中定义 i18n 配置，我们将在本指南中使用 `@/ilb/i18n` 导入它。 + + + ../../examples/i18n/lib/i18n.ts + + +将其传递给源加载器。 + +```ts title="lib/source.ts" +import { i18n } from '@/lib/i18n'; +import { loader } from 'fumadocs-core/source'; + +export const source = loader({ + i18n, // [!code highlight] + // other options +}); +``` + +并更新 Fumadocs UI 布局选项。 + +```tsx title="app/layout.config.tsx" +import { i18n } from '@/lib/i18n'; +import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'; + +export function baseOptions(locale: string): BaseLayoutProps { + return { + i18n, + // different props based on `locale` + }; +} +``` + +### 中间件 + +创建一个将用户重定向到适当语言环境的中间件。 + +```json doc-gen:file +{ + "file": "../../examples/i18n/middleware.ts", + "codeblock": { + "lang": "ts", + "meta": "title=\"middleware.ts\"" + } +} +``` + +查看[中间件](/docs/headless/internationalization#middleware)了解可自定义选项。 + +> 请注意，这是可选的，您也可以使用自己的中间件或 i18n 库提供的中间件。 + +### 路由 + +创建一个 `/app/[lang]` 文件夹，并将所有文件（例如 `page.tsx`、`layout.tsx`）从 `/app` 移动到该文件夹。 + +将根提供程序包装在 `I18nProvider` 中，并向其提供可用语言和翻译。 +请注意，默认情况下只提供英文翻译。 + +```tsx title="app/[lang]/layout.tsx" +import { RootProvider } from 'fumadocs-ui/provider'; +import { I18nProvider, type Translations } from 'fumadocs-ui/i18n'; + +const cn: Partial = { + search: 'Translated Content', + // other translations +}; + +// available languages that will be displayed on UI +// make sure `locale` is consistent with your i18n config +const locales = [ + { + name: 'English', + locale: 'en', + }, + { + name: 'Chinese', + locale: 'cn', + }, +]; + +export default async function RootLayout({ + params, + children, +}: { + params: Promise<{ lang: string }>; + children: React.ReactNode; +}) { + const lang = (await params).lang; + + return ( + + + + {children} + + + + ); +} +``` + +### 传递区域设置 + +在您的页面和布局中将区域设置传递给 Fumadocs。 + +```tsx title="/app/[lang]/(home)/layout.tsx" tab="Home Layout" +import type { ReactNode } from 'react'; +import { HomeLayout } from 'fumadocs-ui/layouts/home'; +import { baseOptions } from '@/app/layout.config'; + +export default async function Layout({ + params, + children, +}: { + params: Promise<{ lang: string }>; + children: ReactNode; +}) { + const { lang } = await params; + + return {children}; +} +``` + +```tsx title="/app/[lang]/docs/layout.tsx" tab="Docs Layout" +import type { ReactNode } from 'react'; +import { source } from '@/lib/source'; +import { DocsLayout } from 'fumadocs-ui/layouts/docs'; +import { baseOptions } from '@/app/layout.config'; + +export default async function Layout({ + params, + children, +}: { + params: Promise<{ lang: string }>; + children: ReactNode; +}) { + const { lang } = await params; + + return ( + + {children} + + ); +} +``` + +```ts title="page.tsx" tab="Docs Page" +import { source } from '@/lib/source'; + +export default async function Page({ + params, +}: { + params: Promise<{ lang: string; slug?: string[] }>; +}) { + const { slug, lang } = await params; + // get page + source.getPage(slug); // [!code --] + source.getPage(slug, lang); // [!code ++] + + // get pages + source.getPages(); // [!code --] + source.getPages(lang); // [!code ++] +} +``` + +### 搜索 + +在您的搜索解决方案上配置 i18n。 + +- **内置搜索 (Orama)：** + 对于[支持的语言](https://docs.orama.com/open-source/supported-languages#officially-supported-languages)，无需进一步更改。 + + 否则，需要额外配置（例如中文和日语）。请参阅[特殊语言](/docs/headless/search/orama#special-languages)。 + +- **云解决方案（例如 Algolia）：** + 它们通常官方支持多语言。 + +## 编写文档 + +../../shared/page-conventions.i18n.mdx + +## 导航 + +Fumadocs 只处理其自己的布局（例如侧边栏）的导航。 +对于其他地方，您可以使用 `useParams` 钩子从 url 获取区域设置，并将其添加到 `href`。 + +```tsx +import Link from 'next/link'; +import { useParams } from 'next/navigation'; + +const { lang } = useParams(); + +return This is a link; +``` + +另外，[`fumadocs-core/dynamic-link`](/docs/headless/components/link#dynamic-hrefs) 组件支持动态 hrefs，您可以使用它来添加区域设置前缀。 +这对于 Markdown/MDX 内容很有用。 + +```mdx title="content.mdx" +import { DynamicLink } from 'fumadocs-core/dynamic-link'; + +This is a link +``` \ No newline at end of file diff --git a/content/docs/layouts/docs.zh.mdx b/content/docs/layouts/docs.zh.mdx new file mode 100644 index 0000000..c3075f3 --- /dev/null +++ b/content/docs/layouts/docs.zh.mdx @@ -0,0 +1,160 @@ +--- +title: 文档布局 +description: 文档的布局 +--- + +文档页面的布局，它包括一个侧边栏和仅限移动设备的导航栏。 + +> 它是一个服务器组件，您不应该在客户端组件中引用它。 + +## 使用方法 + +将您的页面树传递给组件。 + +```tsx title="layout.tsx" +import { DocsLayout } from 'fumadocs-ui/layouts/docs'; +import { baseOptions } from '@/app/layout.config'; +import type { ReactNode } from 'react'; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} +``` + +{/* */} + +## 侧边栏 + +```tsx title="layout.tsx" +import { DocsLayout } from 'fumadocs-ui/layouts/docs'; + +; +``` + +{/* */} + +### 侧边栏标签 + +有关用法，请参见[导航指南](/docs/navigation/sidebar#sidebar-tabs)。 + +#### 装饰 + +更改标签的图标/样式。 + +```tsx +import { DocsLayout } from 'fumadocs-ui/layouts/docs'; + + ({ + ...option, + icon: 'my icon', + }), + }, + }} +/>; +``` + +## 导航栏 + +一个仅限移动设备的导航栏，我们建议从 `baseOptions` 自定义它。 + +```tsx +import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'; + +export const baseOptions: BaseLayoutProps = { + githubUrl: 'https://github.com/fuma-nama/fumadocs', + nav: { + title: 'My App', + }, +}; +``` + +{/* */} + +### 透明模式 + +要使导航栏背景透明，您可以配置透明模式。 + +```tsx +import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'; + +export const baseOptions: BaseLayoutProps = { + nav: { + transparentMode: 'top', + }, +}; +``` + +| 模式 | 描述 | +| -------- | ------------------------------ | +| `always` | 始终使用透明背景 | +| `top` | 在页面顶部时 | +| `none` | 禁用透明背景（默认） | + +### 替换导航栏 + +要替换文档布局中的导航栏，将 `nav.component` 设置为您自己的组件。 + +```tsx title="layout.tsx" +import { baseOptions } from '@/app/layout.config'; +import { DocsLayout } from 'fumadocs-ui/layouts/notebook'; +import type { ReactNode } from 'react'; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + , + }} + > + {children} + + ); +} +``` + +Fumadocs 使用 **CSS 变量**来共享布局组件的大小，并将每个布局组件放置在适当的位置。 + +您需要将 `--fd-nav-height` 覆盖为自定义导航栏的确切高度，这可以通过 CSS 样式表（例如在 `global.css` 中）完成： + +```css +:root { + --fd-nav-height: 80px !important; +} +``` + +## 高级 + +### 禁用预取 + +默认情况下，它使用启用了预取的 Next.js Link 组件。 +当链接组件出现在浏览器视口中时，内容（RSC 有效载荷）将被预取。 + +在 Vercel 上，这可能会导致大量使用无服务器函数和数据缓存。 +它也可能会达到一些其他托管平台的限制。 + +您可以禁用预取以减少 RSC 请求的数量。 + +```tsx +import { DocsLayout } from 'fumadocs-ui/layouts/docs'; + +; +``` \ No newline at end of file diff --git a/content/docs/layouts/home-layout.zh.mdx b/content/docs/layouts/home-layout.zh.mdx new file mode 100644 index 0000000..2dd56ef --- /dev/null +++ b/content/docs/layouts/home-layout.zh.mdx @@ -0,0 +1,33 @@ +--- +title: 主页布局 +description: 其他页面的共享布局 +--- + +## 使用方法 + +在其他页面上添加导航栏和搜索对话框。 + +```tsx title="/app/(home)/layout.tsx" +import { HomeLayout } from 'fumadocs-ui/layouts/home'; +import { baseOptions } from '@/app/layout.config'; +import type { ReactNode } from 'react'; + +export default function Layout({ children }: { children: ReactNode }) { + return {children}; +} +``` + +创建一个[路由组](https://nextjs.org/docs/app/building-your-application/routing/route-groups)来在多个页面之间共享相同的布局。 + + + + + + + + + + + + + \ No newline at end of file diff --git a/content/docs/layouts/notebook.zh.mdx b/content/docs/layouts/notebook.zh.mdx new file mode 100644 index 0000000..356c009 --- /dev/null +++ b/content/docs/layouts/notebook.zh.mdx @@ -0,0 +1,32 @@ +--- +title: 笔记本 +description: 文档布局的更紧凑版本 +--- + +## 使用方法 + +使用 `fumadocs-ui/layouts/notebook` 启用笔记本布局，它比默认布局更加紧凑。 + +![Notebook](/images/docs/notebook.png) + +```tsx title="layout.tsx" +import { DocsLayout } from 'fumadocs-ui/layouts/notebook'; +import { baseOptions } from '@/app/layout.config'; +import { source } from '@/lib/source'; +import type { ReactNode } from 'react'; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} +``` \ No newline at end of file diff --git a/content/docs/layouts/page.zh.mdx b/content/docs/layouts/page.zh.mdx new file mode 100644 index 0000000..fd5dea1 --- /dev/null +++ b/content/docs/layouts/page.zh.mdx @@ -0,0 +1,238 @@ +--- +title: 文档页面 +description: 文档中的页面 +--- + +可以渲染完整页面的组件（标题、目录等）。 + +## 正文 + +```tsx title="page.tsx" +import { DocsPage } from 'fumadocs-ui/page'; + +export default function Page({ params }: { params: { slug?: string[] } }) { + const page = getPage(params); + + return ( + + ); +} +``` + +{/* */} + +### SEO + +为页面添加 SEO 优化，有几种方法。首先，允许文档生成器提供 `metadata` 帮助程序： + +```tsx title="api.ts" +export { createMetadata } from 'fumadocs-core/docs'; +``` + +默认值包括 **标题**、**描述**、**开放图形**（Open Graph）和 **Twitter** 图片、**规范**（Canonical）URL 和 locale 元数据。 + +现在您可以直接使用它： + +```tsx title="page.tsx" +import type { Metadata } from 'next'; +import { createMetadata } from '@/app/api'; + +export async function generateMetadata({ + params, +}: { + params: { slug?: string[] }; +}): Promise { + const page = await getPage(params); + + return createMetadata({ + page, + params, + }); +} +``` + +或者您可以手动构建它： + +```tsx title="page.tsx" +import type { Metadata } from 'next'; +import { absoluteUrl } from 'fumadocs-core/utils/absolute-url'; + +export const metadata: Metadata = { + title: 'My Page', + description: 'Page Description', + openGraph: { + title: 'My Page', + description: 'Page Description', + type: 'article', + url: absoluteUrl('/docs/my-page'), + }, + twitter: { + title: 'My Page', + description: 'Page Description', + card: 'summary_large_image', + }, + alternates: { + canonical: absoluteUrl('/docs/my-page'), + }, +}; +``` + +## 内容目录 + +支持无限级别的标题。从页面内容中提取，您应该通过 `toc` 字段传递它。 + +```tsx title="page.tsx" +import { DocsPage } from 'fumadocs-ui/page'; +import { getToc } from 'fumadocs-core'; + +export default function Page() { + const toc = getToc(content); + + return ; +} +``` + +{/* */} + +### 自定义内容目录 + +可以定制 TOC（目录）的呈现方式，但您仍然需要通过 `toc` 字段传递真实的 TOC 项目。 + +```tsx title="page.tsx" +import { DocsPage } from 'fumadocs-ui/page'; + +export default function Page() { + return ( + +
Custom TOC
+ + ); +} +``` + +## 最后更新时间 + +```tsx title="page.tsx" +import { DocsPage } from 'fumadocs-ui/page'; + +export default function Page() { + return ; +} +``` + +## 页脚 + +```tsx title="layout.tsx" +import { DocsPage } from 'fumadocs-ui/page'; +import { baseOptions } from '@/app/layout.config'; + +export default function Page() { + return ( + + ); +} +``` + +### 使用基础配置 + +您可以创建一个 `baseOptions` 对象，用于所有页面和布局组件。 + +```tsx title="layout.config.ts" +import type { BasePageConfig } from 'fumadocs-ui/page'; + +export const baseOptions: BasePageConfig = { + githubUrl: 'https://github.com/fuma-nama/fumadocs', + footer: { + text: 'Built with Fumadocs', + }, +}; +``` + +```tsx title="page.tsx" +import { DocsPage } from 'fumadocs-ui/page'; +import { baseOptions } from '@/app/layout.config'; + +export default function Page() { + return ; +} +``` + +### 编辑链接 + +```tsx +import { DocsPage } from 'fumadocs-ui/page'; + +export default function Page() { + return ( + + ); +} +``` + +### 页面导航 + +```tsx +import { DocsPage } from 'fumadocs-ui/page'; +import { getPagesPath } from 'fumadocs-core'; + +export default function Page({ params }: { params: { slug?: string[] } }) { + const pagePath = getPagesPath(params); + const prev = getAdjacentPages({ current: pagePath, dir: 'prev' }); + const next = getAdjacentPages({ current: pagePath, dir: 'next' }); + + return ( + + ); +} +``` + +#### 自定义获取相邻页面 + +您可以在 `createAdjacentPages` 方法中应用 `includeInPageNav` 过滤器，该方法由文档生成器创建： + +```tsx title="api.ts" +import { createAdjacentPages } from 'fumadocs-core/docs'; +import { tree } from '@/app/source'; + +export const getAdjacentPages = createAdjacentPages(tree, { + includeInPageNav: (page) => !page.data.preview, +}); +``` \ No newline at end of file diff --git a/content/docs/layouts/root-provider.zh.mdx b/content/docs/layouts/root-provider.zh.mdx new file mode 100644 index 0000000..870bf2e --- /dev/null +++ b/content/docs/layouts/root-provider.zh.mdx @@ -0,0 +1,53 @@ +--- +title: 根提供者 +description: Fumadocs UI 的上下文提供者 +--- + +所有组件的上下文提供者，包括 `next-themes` 和搜索对话框的上下文。它应该位于根布局中。 + +## 使用方法 + +```jsx +import { RootProvider } from 'fumadocs-ui/provider'; + +export default function Layout({ children }) { + return ( + + + {children} + + + ); +} +``` + +### 搜索对话框 + +使用 `search` 选项自定义或禁用搜索对话框。 + +```jsx + + {children} + +``` + +从[搜索](/docs/search)了解更多信息。 + +### 主题提供者 + +Fumadocs 通过 [`next-themes`](https://github.com/pacocoursey/next-themes) 支持明/暗模式。 +使用 `theme` 选项自定义或禁用它。 + +```jsx + + {children} + +``` \ No newline at end of file diff --git a/content/docs/manual-installation.zh.mdx b/content/docs/manual-installation.zh.mdx new file mode 100644 index 0000000..1ff718f --- /dev/null +++ b/content/docs/manual-installation.zh.mdx @@ -0,0 +1,185 @@ +--- +title: 手动安装 +description: 从零开始创建一个新的 Fumadocs 项目 +--- + +> 请先阅读[快速入门](/docs)指南了解基本概念。 + +## 入门 + +使用 `create-next-app` 创建一个新的 Next.js 应用程序，并安装所需的包。 + +```package-install +fumadocs-ui fumadocs-core +``` + +### 内容源 + +Fumadocs 支持不同的内容源，您可以选择您喜欢的一种。 + +以下是官方支持的源列表： + +- [设置 Fumadocs MDX](/docs/mdx) +- [设置 Content Collections](/docs/headless/content-collections) + +请确保在继续之前按照其设置指南正确配置库，我们将在本指南中使用 `@/lib/source.ts` 导入源适配器。 + +### 根布局 + +将整个应用程序包装在 [Root Provider](/docs/layouts/root-provider) 中，并为 `body` 添加所需的样式。 + +```tsx +import { RootProvider } from 'fumadocs-ui/provider'; +import type { ReactNode } from 'react'; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + + {children} + + + ); +} +``` + +### 样式 + +在您的 Next.js 应用程序上设置 Tailwind CSS v4，将以下内容添加到 `global.css`。 + +```css title="Tailwind CSS" +@import 'tailwindcss'; +@import 'fumadocs-ui/css/neutral.css'; +@import 'fumadocs-ui/css/preset.css'; + +/* path of `fumadocs-ui` relative to the CSS file */ +@source '../node_modules/fumadocs-ui/dist/**/*.js'; +``` + +> 它不附带默认字体，您可以从 `next/font` 中选择一个。 + +### 布局 + +创建一个 `app/layout.config.tsx` 文件，放置我们布局的共享选项。 + +```json doc-gen:file +{ + "file": "../../examples/next-mdx/app/layout.config.tsx", + "codeblock": { + "meta": "title=\"app/layout.config.tsx\"" + } +} +``` + +为我们的文档创建一个文件夹 `/app/docs`，并给它一个适当的布局。 + +```json doc-gen:file +{ + "file": "../../examples/next-mdx/app/docs/layout.tsx", + "codeblock": { + "meta": "title=\"app/docs/layout.tsx\"" + } +} +``` + +> `pageTree` 指的是页面树，应该由您的内容源提供。 + +### 页面 + +为文档页面创建一个捕获所有路由 `/app/docs/[[...slug]]`。 + +在页面中，将您的内容包装在 [Page](/docs/layouts/page) 组件中。 +这可能因您的内容源而异。您应该使用 `generateStaticParams` 配置静态渲染，并使用 `generateMetadata` 配置元数据。 + + + +```json doc-gen:file +{ + "file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx", + "codeblock": { + "meta": "title=\"app/docs/[[...slug]]/page.tsx\" tab=\"Fumadocs MDX\"" + } +} +``` + +```json doc-gen:file +{ + "file": "../../examples/content-collections/app/docs/[[...slug]]/page.tsx", + "codeblock": { + "meta": "title=\"app/docs/[[...slug]]/page.tsx\" tab=\"Content Collections\"" + } +} +``` + + + +### 搜索 + +使用基于 Orama 的默认文档搜索。 + + + +```json doc-gen:file +{ + "file": "../../examples/next-mdx/app/api/search/route.ts", + "codeblock": { + "meta": "title=\"app/api/search/route.ts\" tab=\"Fumadocs MDX\"" + } +} +``` + +```json doc-gen:file +{ + "file": "../../examples/content-collections/app/api/search/route.ts", + "codeblock": { + "meta": "title=\"app/api/search/route.ts\" tab=\"Content Collections\"" + } +} +``` + + + +了解更多关于[文档搜索](/docs/headless/search)的信息。 + +### 完成 + +您可以启动开发服务器并创建 MDX 文件。 + +```mdx title="content/docs/index.mdx" +--- +title: Hello World +--- + +## Introduction + +I love Anime. +``` + +## 自定义 + +您可以为网站的其他页面使用 [Home Layout](/docs/layouts/home-layout)，它包含一个带有主题切换的导航栏。 + +## 部署 + +它应该在 Vercel 和 Netlify 上开箱即用。 + +### Docker 部署 + +如果您想使用 Docker 部署您的 Fumadocs 应用程序，并且已**配置了 Fumadocs MDX**，请确保将 `source.config.ts` 文件添加到 Dockerfile 中的 `WORKDIR`。 +以下片段取自官方 [Next.js Dockerfile 示例](https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile)： + +```zsh title="Dockerfile" +WORKDIR /app + +# Install dependencies based on the preferred package manager +COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* source.config.ts ./ +``` + +这确保 Fumadocs MDX 在构建期间可以访问您的配置文件。 \ No newline at end of file diff --git a/content/docs/markdown.zh.mdx b/content/docs/markdown.zh.mdx new file mode 100644 index 0000000..9404243 --- /dev/null +++ b/content/docs/markdown.zh.mdx @@ -0,0 +1,249 @@ +--- +title: Markdown +description: 如何撰写文档 +--- + +## 介绍 + +Fumadocs 为 MDX（一种标记语言）提供了许多有用的扩展。以下是 Fumadocs UI 默认 MDX 语法的简要介绍。 + +> MDX 不是 Fumadocs 唯一支持的格式。实际上，您可以使用任何渲染器，如 `next-mdx-remote` 或 CMS。 + +## Markdown + +我们使用 GFM（GitHub 风格的 Markdown），这是 Markdown（CommonMark）的超集。 +参见 [GFM 规范](https://github.github.com/gfm)。 + +````md +# Heading + +## Heading + +### Heading + +#### Heading + +Hello World, **Bold**, _Italic_, ~~Hidden~~ + +```js +console.log('Hello World'); +``` + +1. First +2. Second +3. Third + +- Item 1 +- Item 2 + +> Quote here + +![alt](/image.png) + +| Table | Description | +| ----- | ----------- | +| Hello | World | +```` + +### 自动链接 + +内部链接使用 `next/link` 组件，允许预取并避免硬重载。 + +外部链接将获得默认的 `rel="noreferrer noopener" target="_blank"` 属性以增强安全性。 + +```mdx +[My Link](https://github.github.com/gfm) + +This also works: https://github.github.com/gfm. +``` + +## MDX + +MDX 是 Markdown 的超集，支持 JSX 语法。 +它允许您导入组件，并直接在文档中使用它们，甚至导出值。 + +```mdx +import { Component } from './component'; + + +``` + +参见 [MDX 语法](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax) 了解更多信息。 + +### 卡片 + +对于添加链接很有用，默认包含。 + +```mdx + + + Learn more about caching in Next.js + + +``` + + + + Learn more about caching in Next.js + + + +#### 图标 + +您可以为卡片指定图标。 + +```mdx +import { HomeIcon } from 'lucide-react'; + + + } href="/" title="Home"> + Go back to home + + +``` + + + } href="/" title="Go back to home"> + The home page of Fumadocs. + + + +#### 无 href + +```mdx + + + Learn more about `fetch` in Next.js. + + +``` + + + + Learn more about `fetch` in Next.js. + + + +### 提示框 + +对于添加提示/警告很有用，默认包含。 + +```mdx +Hello World +``` + +Hello World + +#### 标题 + +指定提示框标题。 + +```mdx +Hello World +``` + +Hello World + +#### 类型 + +您可以指定提示框的类型。 + +- `info`（默认） +- `warn` +- `error` + +```mdx + + Hello World + +``` + + + Hello World + + +### 自定义组件 + +参见[所有 MDX 组件和可用选项](/docs/mdx)。 + +## 标题 + +每个标题会自动应用锚点，它会清理空格等无效字符。（例如，`Hello World` 变为 `hello-world`） + +```md +# Hello `World` +``` + +### 目录设置 + +目录 (TOC) 将基于标题生成，您还可以自定义标题的效果： + +```md +# Heading [!toc] + +This heading will be hidden from TOC. + +# Another Heading [toc] + +This heading will **only** be visible in TOC, you can use it to add additional TOC items. +Like headings rendered in a React component: + + +``` + +### 自定义锚点 + +您可以添加 `[#slug]` 来自定义标题锚点。 + +```md +# heading [#my-heading-id] +``` + +您也可以将其与目录设置链接起来，例如： + +```md +# heading [toc] [#my-heading-id] +``` + +要将人们链接到特定标题，请将标题 ID 添加到哈希片段：`/page#my-heading-id`。 + +## 前言 + +我们支持 YAML 前言。这是一种指定文档常见信息（例如标题）的方式。 +将其放在文档顶部。 + +```mdx +--- +title: Hello World +--- + +## Title +``` + +有关前言可用属性的列表，请参见[页面约定](/docs/page-conventions#frontmatter)。 + +## 代码块 + +默认使用 [Rehype Code](/docs/headless/mdx/rehype-code) 支持语法高亮。 + +````mdx +```js +console.log('Hello World'); +``` +```` + +您可以为代码块添加标题。 + +````mdx +```js title="My Title" +console.log('Hello World'); +``` +```` + +### 高亮行 \ No newline at end of file diff --git a/content/docs/mdx/callout.zh.mdx b/content/docs/mdx/callout.zh.mdx new file mode 100644 index 0000000..8e4c6b0 --- /dev/null +++ b/content/docs/mdx/callout.zh.mdx @@ -0,0 +1,25 @@ +--- +title: 提示框 +description: 在文档中添加提示框 +preview: callout +--- + +## 使用方法 + +将其添加到您的 MDX 组件中。 + +```tsx +import { Callout } from 'fumadocs-ui/components/callout'; + +; +``` + +有关用法，请参见 [Markdown](/docs/markdown#callouts)。 + +### 参考 + +{/* */} \ No newline at end of file diff --git a/content/docs/mdx/card.zh.mdx b/content/docs/mdx/card.zh.mdx new file mode 100644 index 0000000..9c4d9eb --- /dev/null +++ b/content/docs/mdx/card.zh.mdx @@ -0,0 +1,56 @@ +--- +title: 卡片 +description: 在 MDX 文档中使用卡片组件 +preview: card +--- + +## 使用方法 + +将其添加到您的 MDX 组件中。 + +```tsx +import { Card, Cards } from 'fumadocs-ui/components/card'; + +; +``` + +有关用法，请参见 [Markdown](/docs/markdown#cards)。 + +### Cards + +卡片的容器。 + +### Card + +基于 Next.js 的 ``。 + +{/* */} + + + +如果您没有使用 Fumadocs MDX 来渲染 MDX（例如，使用 Contentlayer），请确保 +树摇优化正常工作。 + +大多数图标库支持单独导入图标。 + +```tsx +import HomeIcon from 'lucide-react/dist/esm/icons/home'; +``` + +作为解决方法，您也可以将图标传递给 MDX 组件。（这使用 Next.js 打包器而不是内容源） + +```tsx title="page.tsx" +import { HomeIcon } from 'lucide-react'; + +const components = { + ...defaultComponents, + HomeIcon, +}; +``` + + \ No newline at end of file diff --git a/content/docs/mdx/codeblock.zh.mdx b/content/docs/mdx/codeblock.zh.mdx new file mode 100644 index 0000000..1e9c797 --- /dev/null +++ b/content/docs/mdx/codeblock.zh.mdx @@ -0,0 +1,79 @@ +--- +title: 代码块 +description: 在文档中添加代码块 +--- + + +
+ +```js title="config.js" +import createMDX from 'fumadocs-mdx/config'; + +const withMDX = createMDX(); + +// [!code word:config] +/** @type {import('next').NextConfig} */ +const config = { + // [!code highlight] + reactStrictMode: true, // [!code highlight] +}; // [!code highlight] + +export default withMDX(config); +``` + +
+ + +显示代码块，默认添加。 + +- 复制按钮 +- 自定义标题和图标 + +## 使用方法 + +将 pre 元素包装在 `` 中，它作为代码块的包装器。 + +```tsx +import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock'; + + ( + + 
{props.children}
{/* [!code highlight] */} + + ), + }} +/>; +``` + +有关用法，请参见 [Markdown](/docs/markdown#codeblock)。 + +### 保留背景 + +使用由 Shiki（Rehype Code 插件）生成的背景颜色。 + +```tsx +import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock'; + + ( + + 
{props.children}
+ + ), + }} +/>; +``` + +### 图标 + +通过向 `CodeBlock` 组件传递 `icon` 属性来指定自定义图标。 + +默认情况下，图标将由自定义 Shiki 转换器注入。 + +```js title="config.js" +console.log('js'); +``` \ No newline at end of file diff --git a/content/docs/mdx/heading.zh.mdx b/content/docs/mdx/heading.zh.mdx new file mode 100644 index 0000000..e943b49 --- /dev/null +++ b/content/docs/mdx/heading.zh.mdx @@ -0,0 +1,26 @@ +--- +title: 标题 +description: MDX 文档的标题组件 +preview: heading +--- + +自动添加 `id` 属性的标题组件。 + +## 使用方法 + +将其添加到您的 MDX 组件中，从 `h1` 到 `h6`。 + +```mdx +import { Heading } from 'fumadocs-ui/components/heading'; + + , + h2: (props) => , + h3: (props) => , + h4: (props) => , + h5: (props) => , + h6: (props) => , + }} +/> +``` \ No newline at end of file diff --git a/content/docs/mdx/index.zh.mdx b/content/docs/mdx/index.zh.mdx new file mode 100644 index 0000000..c4c5420 --- /dev/null +++ b/content/docs/mdx/index.zh.mdx @@ -0,0 +1,41 @@ +--- +title: MDX +description: 默认 MDX 组件 +index: true +--- + +## 使用方法 + +默认的 MDX 组件包括卡片、提示框、代码块和标题。 + +```ts +import defaultMdxComponents from 'fumadocs-ui/mdx'; +``` + +### 相对链接 + +要支持 `href` 中带有相对文件路径的链接，请使用以下方式覆盖默认的 `a` 组件： + +```tsx +import { createRelativeLink } from 'fumadocs-ui/mdx'; +import { source } from '@/lib/source'; + +const page = source.getPage(['...']); + +return ( + +); +``` + +```mdx +[My Link](./file.mdx) +``` + +[示例: `../(integrations)/open-graph.mdx`](<../(integrations)/open-graph.mdx>) + +仅限服务器组件。 \ No newline at end of file diff --git a/content/docs/meta.zh.json b/content/docs/meta.zh.json new file mode 100644 index 0000000..64c60a9 --- /dev/null +++ b/content/docs/meta.zh.json @@ -0,0 +1,24 @@ +{ + "title": "Framework", + "description": "The docs framework", + "icon": "Building2", + "root": true, + "pages": [ + "---介绍---", + "index", + "what-is-fumadocs", + "comparisons", + "---设置---", + "manual-installation", + "static-export", + "---写作---", + "markdown", + "---UI---", + "customisation", + "theme", + "search", + "components", + "mdx", + "layouts" + ] +} diff --git a/content/docs/search.zh.mdx b/content/docs/search.zh.mdx new file mode 100644 index 0000000..f0011df --- /dev/null +++ b/content/docs/search.zh.mdx @@ -0,0 +1,247 @@ +--- +title: 搜索 +description: 在您的文档中实现文档搜索 +--- + +Fumadocs UI 为您的文档提供了一个美观的搜索界面，而搜索功能则由 Fumadocs Core 提供和记录。 + +参见[文档搜索](/docs/headless/search)。 + +## 搜索 UI + +使用 ⌘ K 或 Ctrl K 打开。 + +### 配置 + +您可以通过根布局中的 [Root Provider](/docs/layouts/root-provider) 组件自定义搜索 UI。 + +当未指定时，它使用由 Orama 提供支持的默认 [`fetch` 搜索客户端](/docs/headless/search/orama)。 + +### 自定义链接 + +向搜索对话框添加自定义链接项。 +当查询为空时，它们会显示为备选项。 + +```tsx title="app/layout.tsx" +import { RootProvider } from 'fumadocs-ui/root-provider'; + + + {children} +; +``` + +### 禁用搜索 + +要禁用文档搜索，请在根提供程序中禁用它。 + +```tsx +import { RootProvider } from 'fumadocs-ui/root-provider'; + + + {children} +; +``` + +### 热键 + +自定义触发搜索对话框的热键。 + +```tsx +import { RootProvider } from 'fumadocs-ui/root-provider'; + + + {children} +; +``` + +### 标签过滤器 + +添加 UI 以更改过滤器。 +确保首先在搜索服务器上配置[标签过滤器](/docs/headless/search/orama#tag-filter)。 + +```tsx +import { RootProvider } from 'fumadocs-ui/root-provider'; + + + {children} +; +``` + +### 搜索选项 + +向搜索客户端传递选项，例如更改 Orama 搜索服务器的 API 端点： + +```tsx +import { RootProvider } from 'fumadocs-ui/root-provider'; + + + {children} +; +``` + +### 替换搜索对话框 + +您可以用以下内容替换默认搜索对话框： + +```tsx title="components/search.tsx" +'use client'; +import SearchDialog from 'fumadocs-ui/components/dialog/search-default'; +import type { SharedProps } from 'fumadocs-ui/components/dialog/search'; + +export default function CustomDialog(props: SharedProps) { + // your own logic here + return ; +} +``` + +要将其传递给 Root Provider，您需要一个带有 `use client` 指令的包装器。 + +```tsx title="provider.tsx" +'use client'; +import { RootProvider } from 'fumadocs-ui/provider'; +import dynamic from 'next/dynamic'; +import type { ReactNode } from 'react'; + +const SearchDialog = dynamic(() => import('@/components/search')); // lazy load + +export function Provider({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} +``` + +使用它替代您之前的 Root Provider + +```tsx title="layout.tsx" +import { Provider } from './provider'; +import type { ReactNode } from 'react'; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + + {children} + + + ); +} +``` + +## 其他解决方案 + +### Algolia + +关于设置指南，请参见[集成 Algolia 搜索](/docs/headless/search/algolia)。 + +虽然我们通常建议使用他们的客户端 SDK 构建您自己的搜索，但您也可以插入内置的对话框接口。 + +```tsx title="components/search.tsx" +'use client'; +import algo from 'algoliasearch/lite'; +import type { SharedProps } from 'fumadocs-ui/components/dialog/search'; +import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia'; + +const client = algo('appId', 'apiKey'); +const index = client.initIndex('indexName'); + +export default function CustomSearchDialog(props: SharedProps) { + return ; +} +``` + +1. 将 `appId`、`apiKey` 和 `indexName` 替换为您想要的值。 + +2. 用您的新组件[替换默认搜索对话框](#replace-search-dialog)。 + + + + 内置实现不使用即时搜索（他们的官方 JavaScript 客户端）。 + + + +#### 标签过滤器 + +与默认搜索客户端相同，您可以在对话框上配置[标签过滤器](/docs/headless/search/algolia#tag-filter)。 + +```tsx title="components/search.tsx" +import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia'; + +; +``` + +### Orama Cloud + +关于设置指南，请参见[集成 Orama Cloud](/docs/headless/search/orama-cloud)。 + +```tsx title="components/search.tsx" +'use client'; + +import { OramaClient } from '@oramacloud/client'; +import type { SharedProps } from 'fumadocs-ui/components/dialog/search'; +import SearchDialog from 'fumadocs-ui/components/dialog/search-orama'; + +const client = new OramaClient({ + endpoint: 'endpoint', + api_key: 'apiKey', +}); + +export default function CustomSearchDialog(props: SharedProps) { + return ; +} +``` + +1. 将 `endpoint`、`apiKey` 替换为您想要的值。 +2. 用您的新组件[替换默认搜索对话框](#replace-search-dialog)。 \ No newline at end of file diff --git a/content/docs/static-export.zh.mdx b/content/docs/static-export.zh.mdx new file mode 100644 index 0000000..ef680dd --- /dev/null +++ b/content/docs/static-export.zh.mdx @@ -0,0 +1,55 @@ +--- +title: 静态导出 +description: 使用 Fumadocs 启用静态导出 +--- + +## 概览 + +Fumadocs 完全兼容 Next.js 静态导出，允许您将应用程序导出为不需要 Node.js 服务器的静态 HTML 站点。 + +```js title="next.config.mjs" +/** + * @type {import('next').NextConfig} + */ +const nextConfig = { + output: 'export', +}; +``` + +## 搜索 + +### 云解决方案 + +由于搜索功能由远程服务器提供支持，静态导出无需配置即可工作。 + +### 内置搜索 + +Orama 搜索的默认搜索配置使用路由处理器，静态导出不支持这种方式。 + +相反，您可以按照 [Orama 搜索](/docs/headless/search/orama#static-export) 指南静态构建搜索索引。 +并从 Root Provider 在搜索客户端上启用静态模式： + +```tsx title="app/layout.tsx" +import { RootProvider } from 'fumadocs-ui/provider'; +import type { ReactNode } from 'react'; + +export default function RootLayout({ children }: { children: ReactNode }) { + return ( + + + + {children} + + + + ); +} +``` + +这允许路由处理器被静态缓存到单个文件中，搜索将在浏览器中计算。 \ No newline at end of file diff --git a/content/docs/theme.zh.mdx b/content/docs/theme.zh.mdx new file mode 100644 index 0000000..bb631a7 --- /dev/null +++ b/content/docs/theme.zh.mdx @@ -0,0 +1,165 @@ +--- +title: 主题 +description: 为 Fumadocs UI 添加主题 +--- + +## 使用方法 + +注意只支持 Tailwind CSS v4： + +```css title="Tailwind CSS" +@import 'tailwindcss'; +@import 'fumadocs-ui/css/neutral.css'; +@import 'fumadocs-ui/css/preset.css'; + +/* path of `fumadocs-ui` relative to the CSS file */ +@source '../node_modules/fumadocs-ui/dist/**/*.js'; +``` + +### 预设更改 + +通过使用 Tailwind CSS 插件或预构建的样式表，您的默认边框、文本和背景颜色将被更改。 + +### 明/暗模式 + +Fumadocs 通过 [`next-themes`](https://github.com/pacocoursey/next-themes) 支持明/暗模式，它包含在 Root Provider 中。 + +参见 [Root Provider](/docs/layouts/root-provider#theme-provider) 了解更多信息。 + +### RTL 布局 + +支持 RTL（从右到左）布局。 + +要启用 RTL，请在 body 和 root provider（Radix UI 需要）中将 `dir` 属性设置为 `rtl`。 + +```tsx +import { RootProvider } from 'fumadocs-ui/provider'; +import type { ReactNode } from 'react'; + +export default function RootLayout({ children }: { children: ReactNode }) { + return ( + + + {children} + + + ); +} +``` + +### 前缀 + +Fumadocs UI 有自己的颜色、动画和工具。 +默认情况下，它添加了 `fd-` 前缀，以避免与 Shadcn UI 或您自己的 CSS 变量冲突。 + +您可以通过添加一些别名来使用它们，而无需前缀： + +```css title="Tailwind CSS" +@theme { + --color-primary: var(--color-fd-primary); +} +``` + +> 您可以将其与 CSS 媒体查询一起使用，实现响应式设计。 + +### 布局宽度 + +使用 CSS 变量自定义文档布局的最大宽度。 + +```css +:root { + --fd-layout-width: 1400px; +} +``` + + + +## Tailwind CSS 预设 + +Tailwind CSS 预设引入了新的颜色和额外的工具，包括 `fd-steps`。 + +### 主题 + +它开箱即用地提供了许多主题，您可以选择一个您喜欢的。 + +```css +@import 'fumadocs-ui/css/.css'; + +/* Example */ +@import 'fumadocs-ui/css/black.css'; +``` + + + + + +![Neutral](/images/docs/themes/neutral.png) + + + + + +![Black](/images/docs/themes/black.png) + + + + + +![Vitepress](/images/docs/themes/vitepress.png) + + + + + +![Dusk](/images/docs/themes/dusk.png) + + + + + +![Catppuccin](/images/docs/themes/catppuccin.png) + + + + + +![Ocean](/images/docs/themes/ocean.png) + + + + + +![Purple](/images/docs/themes/purple.png) + + + + + +### 颜色 + +设计系统的灵感来自 [Shadcn UI](https://ui.shadcn.com)，您可以使用 CSS 变量轻松自定义颜色。 + +```css title="global.css" +:root { + --color-fd-background: hsl(0, 0%, 100%); +} + +.dark { + --color-fd-background: hsl(0, 0%, 0%); +} +``` + +### 排版 + +我们有一个内置插件，它是从 [Tailwind CSS Typography](https://tailwindcss.com/docs/typography-plugin) 派生而来的。 + +该插件添加了一个 `prose` 类和变体来自定义它。 + +```tsx +
+

Good Heading

+
+``` + +> 该插件仅与 Fumadocs UI 的 MDX 组件一起工作，它可能与 `@tailwindcss/typography` 冲突。 +> 如果您需要使用 `@tailwindcss/typography` 而不是默认插件，请[设置类名选项](https://github.com/tailwindlabs/tailwindcss-typography/blob/main/README.md#changing-the-default-class-name)以避免冲突。 \ No newline at end of file diff --git a/content/docs/what-is-fumadocs.zh.mdx b/content/docs/what-is-fumadocs.zh.mdx new file mode 100644 index 0000000..ff975fe --- /dev/null +++ b/content/docs/what-is-fumadocs.zh.mdx @@ -0,0 +1,56 @@ +--- +title: 什么是 Fumadocs +description: 介绍 Fumadocs，一个可以打破常规的文档框架 +icon: CircleHelp +--- + +Fumadocs 的创建是因为我想要一种更加可定制化的文档构建体验，一个不固执己见的文档框架，**一个你可以"打破"的"框架"**。 + +## 理念 + +**更少的抽象：** Fumadocs 期望您编写代码并与您的其余软件协作。 +虽然大多数框架都是通过配置文件进行配置，但当您希望调整其细节时，它们通常缺乏灵活性。 +您无法控制它们如何渲染页面或内部逻辑。Fumadocs 向您展示应用程序如何工作，而不是仅提供单一的配置文件。 + +**Next.js 基础：** 它为您提供实用工具和美观的 UI。 +您仍然使用 Next.js App Router 的功能，如**静态站点生成**。对于 Next.js 开发者来说没有新的东西，所以您可以放心使用。 + +**对 UI 有自己的看法：** Fumadocs UI（默认主题）提供的唯一东西是**用户界面**。UI 的设计理念是提供更好的移动响应性和用户体验。 +相反，我们使用受 Shadcn UI 启发的更灵活的方法 — [Fumadocs CLI](/docs/cli)，这样我们可以快速迭代设计，并欢迎更多关于 UI 的反馈。 + +## 为什么选择 Fumadocs + +Fumadocs 的设计考虑了灵活性。 + +您可以将 `fumadocs-core` 用作无头 UI 库并带来您自己的样式。 +Fumadocs MDX 也是处理 Next.js 中 MDX 内容的有用库。它还包括： + +- 许多内置组件。 +- Typescript Twoslash、OpenAPI 和 Math (KaTeX) 集成。 +- 默认情况下快速且优化，原生构建在 App Router 上。 +- 与 Next.js 紧密集成，您可以轻松将其添加到现有的 Next.js 项目中。 + +如果您感兴趣，可以阅读 [比较](/docs/comparisons)。 + +### 文档 + +Fumadocs 专注于**创作体验**，它提供了一个漂亮的主题和许多文档自动化工具。 + +它帮助您更快地迭代代码库，同时不会落下您的文档。 +您可以将此站点作为使用 Fumadocs 构建的文档站点的示例。 + +### 博客站点 + +由于 Next.js 已经是一个强大的框架，大多数功能可以**仅使用 Next.js** 实现。 + +Fumadocs 为 Next.js 提供了额外的工具，包括语法高亮、文档搜索和默认主题（Fumadocs UI）。 +它帮助您避免重新发明轮子。 + +## 何时使用 Fumadocs + +对于大多数 Web 应用程序，原生 React.js 已经不够用了。 +如今，我们还希望有一个博客、展示页面、FAQ 页面等。带有令人惊叹的精美 UI，在这些情况下，Fumadocs 可以帮助您更轻松地构建文档，减少样板代码。 + +Fumadocs 由 Fuma 和许多贡献者维护，关注代码库的可维护性。 +虽然我们不打算提供人们想要的每一项功能，但我们更专注于使基本功能完美且维护良好。 +您也可以通过贡献来帮助 Fumadocs 变得更加有用！ \ No newline at end of file