javayhu
parent
80219fa10b
commit
3560616b52
43
content/docs/components/accordion.mdx
Normal file
43
content/docs/components/accordion.mdx
Normal file
@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Accordion
|
||||
description: Add Accordions to your documentation
|
||||
preview: accordion
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Based on
|
||||
[Radix UI Accordion](https://www.radix-ui.com/primitives/docs/components/accordion), useful for FAQ sections.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
|
||||
|
||||
<Accordions type="single">
|
||||
<Accordion title="My Title">My Content</Accordion>
|
||||
</Accordions>;
|
||||
```
|
||||
|
||||
### Accordions
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="AccordionsProps" /> */}
|
||||
|
||||
### Accordion
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="AccordionProps" /> */}
|
||||
|
||||
### Linking to Accordion
|
||||
|
||||
You can specify an `id` for accordion. The accordion will automatically open when the user is navigating to the page with the specified `id` in hash parameter.
|
||||
|
||||
```mdx
|
||||
<Accordions>
|
||||
<Accordion title="My Title" id="my-title">
|
||||
|
||||
My Content
|
||||
|
||||
</Accordion>
|
||||
</Accordions>
|
||||
```
|
||||
|
||||
> The value of accordion is same as title by default. When an id presents, it will be used as the value instead.
|
||||
42
content/docs/components/accordion.zh.mdx
Normal file
42
content/docs/components/accordion.zh.mdx
Normal file
@ -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 type="single">
|
||||
<Accordion title="我的标题">我的内容</Accordion>
|
||||
</Accordions>;
|
||||
```
|
||||
|
||||
### Accordions
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="AccordionsProps" /> */}
|
||||
|
||||
### Accordion
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="AccordionProps" /> */}
|
||||
|
||||
### 链接到手风琴
|
||||
|
||||
您可以为手风琴指定一个 `id`。当用户导航到带有指定 `id` 的哈希参数的页面时，手风琴将自动打开。
|
||||
|
||||
```mdx
|
||||
<Accordions>
|
||||
<Accordion title="我的标题" id="my-title">
|
||||
|
||||
我的内容
|
||||
|
||||
</Accordion>
|
||||
</Accordions>
|
||||
```
|
||||
|
||||
> 手风琴的值默认与标题相同。当存在 id 时，它将被用作值。
|
||||
61
content/docs/components/banner.mdx
Normal file
61
content/docs/components/banner.mdx
Normal file
@ -0,0 +1,61 @@
|
||||
---
|
||||
title: Banner
|
||||
description: Add a banner to your site
|
||||
preview: banner
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Put the element at the top of your root layout, you can use it for displaying announcements.
|
||||
|
||||
```tsx
|
||||
import { Banner } from 'fumadocs-ui/components/banner';
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}): React.ReactElement {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Banner>Hello World</Banner>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Variant
|
||||
|
||||
Change the default variant.
|
||||
|
||||
```tsx
|
||||
import { Banner } from 'fumadocs-ui/components/banner';
|
||||
|
||||
<Banner variant="rainbow">Hello World</Banner>;
|
||||
```
|
||||
|
||||
### Change Layout
|
||||
|
||||
By default, the banner uses a `style` tag to modify Fumadocs layouts (e.g. reduce the sidebar height).
|
||||
You can disable it with:
|
||||
|
||||
```tsx
|
||||
import { Banner } from 'fumadocs-ui/components/banner';
|
||||
|
||||
<Banner changeLayout={false}>Hello World</Banner>;
|
||||
```
|
||||
|
||||
### Close
|
||||
|
||||
To allow users to close the banner, give the banner an ID.
|
||||
|
||||
```tsx
|
||||
import { Banner } from 'fumadocs-ui/components/banner';
|
||||
|
||||
<Banner id="hello-world">Hello World</Banner>;
|
||||
```
|
||||
|
||||
The state will be automatically persisted.
|
||||
61
content/docs/components/banner.zh.mdx
Normal file
61
content/docs/components/banner.zh.mdx
Normal file
@ -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 (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Banner>Hello World</Banner>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 变体
|
||||
|
||||
更改默认变体。
|
||||
|
||||
```tsx
|
||||
import { Banner } from 'fumadocs-ui/components/banner';
|
||||
|
||||
<Banner variant="rainbow">Hello World</Banner>;
|
||||
```
|
||||
|
||||
### 更改布局
|
||||
|
||||
默认情况下，横幅使用 `style` 标签来修改 Fumadocs 布局（例如减少侧边栏高度）。
|
||||
您可以通过以下方式禁用它：
|
||||
|
||||
```tsx
|
||||
import { Banner } from 'fumadocs-ui/components/banner';
|
||||
|
||||
<Banner changeLayout={false}>Hello World</Banner>;
|
||||
```
|
||||
|
||||
### 关闭
|
||||
|
||||
要允许用户关闭横幅，请给横幅一个 ID。
|
||||
|
||||
```tsx
|
||||
import { Banner } from 'fumadocs-ui/components/banner';
|
||||
|
||||
<Banner id="hello-world">Hello World</Banner>;
|
||||
```
|
||||
|
||||
状态将自动保持。
|
||||
38
content/docs/components/dynamic-codeblock.mdx
Normal file
38
content/docs/components/dynamic-codeblock.mdx
Normal file
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Code Block (Dynamic)
|
||||
description: A codeblock that also highlights code
|
||||
preview: dynamicCodeBlock
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
|
||||
<DynamicCodeBlock lang="ts" code='console.log("Hello World")' />;
|
||||
```
|
||||
|
||||
This component, different from the MDX [`CodeBlock`](/docs/mdx/codeblock) component, can be used without MDX.
|
||||
It highlights the code with Shiki and use the default component to render it.
|
||||
|
||||
Features:
|
||||
|
||||
- Can be pre-rendered on server
|
||||
- load languages and themes on browser lazily
|
||||
|
||||
### Options
|
||||
|
||||
```tsx
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
|
||||
<DynamicCodeBlock
|
||||
lang="ts"
|
||||
code='console.log("Hello World")'
|
||||
options={{
|
||||
components: {
|
||||
// add/override components
|
||||
},
|
||||
// or Shiki options
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
38
content/docs/components/dynamic-codeblock.zh.mdx
Normal file
38
content/docs/components/dynamic-codeblock.zh.mdx
Normal file
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 代码块（动态）
|
||||
description: 也能高亮代码的代码块
|
||||
preview: dynamicCodeBlock
|
||||
---
|
||||
|
||||
## 使用方法
|
||||
|
||||
```tsx
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
|
||||
<DynamicCodeBlock lang="ts" code='console.log("Hello World")' />;
|
||||
```
|
||||
|
||||
这个组件与 MDX [`CodeBlock`](/docs/mdx/codeblock) 组件不同，可以在不使用 MDX 的情况下使用。
|
||||
它使用 Shiki 高亮代码，并使用默认组件渲染它。
|
||||
|
||||
特点：
|
||||
|
||||
- 可以在服务器上预渲染
|
||||
- 在浏览器上懒加载语言和主题
|
||||
|
||||
### 选项
|
||||
|
||||
```tsx
|
||||
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
|
||||
|
||||
<DynamicCodeBlock
|
||||
lang="ts"
|
||||
code='console.log("Hello World")'
|
||||
options={{
|
||||
components: {
|
||||
// 添加/覆盖组件
|
||||
},
|
||||
// 或 Shiki 选项
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
35
content/docs/components/files.mdx
Normal file
35
content/docs/components/files.mdx
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
title: Files
|
||||
description: Display file structure in your documentation
|
||||
preview: 'files'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Wrap file components in `Files`.
|
||||
|
||||
```mdx
|
||||
import { File, Folder, Files } from 'fumadocs-ui/components/files';
|
||||
|
||||
<Files>
|
||||
<Folder name="app" defaultOpen>
|
||||
<File name="layout.tsx" />
|
||||
<File name="page.tsx" />
|
||||
<File name="global.css" />
|
||||
</Folder>
|
||||
<Folder name="components">
|
||||
<File name="button.tsx" />
|
||||
<File name="tabs.tsx" />
|
||||
<File name="dialog.tsx" />
|
||||
</Folder>
|
||||
<File name="package.json" />
|
||||
</Files>
|
||||
```
|
||||
|
||||
### File
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="FileProps" /> */}
|
||||
|
||||
### Folder
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="FolderProps" /> */}
|
||||
35
content/docs/components/files.zh.mdx
Normal file
35
content/docs/components/files.zh.mdx
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
title: 文件
|
||||
description: 在文档中显示文件结构
|
||||
preview: 'files'
|
||||
---
|
||||
|
||||
## 使用方法
|
||||
|
||||
将文件组件包装在 `Files` 中。
|
||||
|
||||
```mdx
|
||||
import { File, Folder, Files } from 'fumadocs-ui/components/files';
|
||||
|
||||
<Files>
|
||||
<Folder name="app" defaultOpen>
|
||||
<File name="layout.tsx" />
|
||||
<File name="page.tsx" />
|
||||
<File name="global.css" />
|
||||
</Folder>
|
||||
<Folder name="components">
|
||||
<File name="button.tsx" />
|
||||
<File name="tabs.tsx" />
|
||||
<File name="dialog.tsx" />
|
||||
</Folder>
|
||||
<File name="package.json" />
|
||||
</Files>
|
||||
```
|
||||
|
||||
### File
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="FileProps" /> */}
|
||||
|
||||
### Folder
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="FolderProps" /> */}
|
||||
45
content/docs/components/github-info.mdx
Normal file
45
content/docs/components/github-info.mdx
Normal file
@ -0,0 +1,45 @@
|
||||
---
|
||||
title: GitHub Info
|
||||
description: Display your GitHub repository information
|
||||
preview: githubInfo
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { GithubInfo } from 'fumadocs-ui/components/github-info';
|
||||
|
||||
<GithubInfo
|
||||
owner="fuma-nama"
|
||||
repo="fumadocs"
|
||||
// your own GitHub access token (optional)
|
||||
token={process.env.GITHUB_TOKEN}
|
||||
/>;
|
||||
```
|
||||
|
||||
It's recommended to add it to your docs layout with `links` option:
|
||||
|
||||
```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: (
|
||||
<GithubInfo owner="fuma-nama" repo="fumadocs" className="lg:-mx-2" />
|
||||
),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default function Layout({ children }: { children: ReactNode }) {
|
||||
return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
|
||||
}
|
||||
```
|
||||
45
content/docs/components/github-info.zh.mdx
Normal file
45
content/docs/components/github-info.zh.mdx
Normal file
@ -0,0 +1,45 @@
|
||||
---
|
||||
title: GitHub 信息
|
||||
description: 显示您的 GitHub 仓库信息
|
||||
preview: githubInfo
|
||||
---
|
||||
|
||||
## 使用方法
|
||||
|
||||
```tsx
|
||||
import { GithubInfo } from 'fumadocs-ui/components/github-info';
|
||||
|
||||
<GithubInfo
|
||||
owner="fuma-nama"
|
||||
repo="fumadocs"
|
||||
// 您自己的 GitHub 访问令牌（可选）
|
||||
token={process.env.GITHUB_TOKEN}
|
||||
/>;
|
||||
```
|
||||
|
||||
建议将其添加到您的文档布局中，使用 `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: (
|
||||
<GithubInfo owner="fuma-nama" repo="fumadocs" className="lg:-mx-2" />
|
||||
),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default function Layout({ children }: { children: ReactNode }) {
|
||||
return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
|
||||
}
|
||||
```
|
||||
34
content/docs/components/image-zoom.mdx
Normal file
34
content/docs/components/image-zoom.mdx
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Zoomable Image
|
||||
description: Allow zoom-in images in your documentation
|
||||
preview: zoomImage
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Replace `img` with `ImageZoom` in your MDX components.
|
||||
|
||||
```tsx title="app/docs/[[...slug]]/page.tsx"
|
||||
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
|
||||
import defaultMdxComponents from 'fumadocs-ui/mdx';
|
||||
|
||||
return (
|
||||
<MdxContent
|
||||
components={{
|
||||
...defaultMdxComponents,
|
||||
img: (props) => <ImageZoom {...(props as any)} />,
|
||||
// other Mdx components
|
||||
}}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
Now image zoom will be automatically enabled on all images.
|
||||
|
||||
```mdx
|
||||
|
||||
```
|
||||
|
||||
### Image Optimization
|
||||
|
||||
A default [`sizes` property](https://nextjs.org/docs/app/api-reference/components/image#sizes) will be defined for Next.js `<Image />` component if not specified.
|
||||
34
content/docs/components/image-zoom.zh.mdx
Normal file
34
content/docs/components/image-zoom.zh.mdx
Normal file
@ -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 (
|
||||
<MdxContent
|
||||
components={{
|
||||
...defaultMdxComponents,
|
||||
img: (props) => <ImageZoom {...(props as any)} />,
|
||||
// 其他 Mdx 组件
|
||||
}}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
现在，所有图片都将自动启用图片缩放功能。
|
||||
|
||||
```mdx
|
||||
|
||||
```
|
||||
|
||||
### 图片优化
|
||||
|
||||
如果未指定，将为 Next.js `<Image />` 组件定义默认的 [`sizes` 属性](https://nextjs.org/docs/app/api-reference/components/image#sizes)。
|
||||
5
content/docs/components/index.mdx
Normal file
5
content/docs/components/index.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Components
|
||||
description: Additional components to improve your docs
|
||||
index: true
|
||||
---
|
||||
5
content/docs/components/index.zh.mdx
Normal file
5
content/docs/components/index.zh.mdx
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: 组件
|
||||
description: 改进文档的额外组件
|
||||
index: true
|
||||
---
|
||||
31
content/docs/components/inline-toc.mdx
Normal file
31
content/docs/components/inline-toc.mdx
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
title: Inline TOC
|
||||
description: Add Inline TOC into your documentation
|
||||
preview: inlineTOC
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Pass TOC items to the component.
|
||||
|
||||
```mdx
|
||||
import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
|
||||
|
||||
<InlineTOC items={toc} />
|
||||
```
|
||||
|
||||
### Use in Pages
|
||||
|
||||
You can add inline TOC into every page.
|
||||
|
||||
```tsx
|
||||
<DocsPage>
|
||||
...
|
||||
<InlineTOC items={toc} />
|
||||
...
|
||||
</DocsPage>
|
||||
```
|
||||
|
||||
## Reference
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="InlineTOCProps" /> */}
|
||||
31
content/docs/components/inline-toc.zh.mdx
Normal file
31
content/docs/components/inline-toc.zh.mdx
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
title: 内联目录
|
||||
description: 在文档中添加内联目录
|
||||
preview: inlineTOC
|
||||
---
|
||||
|
||||
## 使用方法
|
||||
|
||||
将 TOC 项目传递给组件。
|
||||
|
||||
```mdx
|
||||
import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
|
||||
|
||||
<InlineTOC items={toc} />
|
||||
```
|
||||
|
||||
### 在页面中使用
|
||||
|
||||
您可以在每个页面中添加内联目录。
|
||||
|
||||
```tsx
|
||||
<DocsPage>
|
||||
...
|
||||
<InlineTOC items={toc} />
|
||||
...
|
||||
</DocsPage>
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="InlineTOCProps" /> */}
|
||||
35
content/docs/components/root-toggle.mdx
Normal file
35
content/docs/components/root-toggle.mdx
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
title: Root Toggle
|
||||
description: Switch between page trees
|
||||
preview: rootToggle
|
||||
---
|
||||
|
||||
## Usages
|
||||
|
||||
Add this component to your sidebar or other places you want.
|
||||
|
||||
```tsx
|
||||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||||
import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
|
||||
|
||||
<DocsLayout
|
||||
sidebar={{
|
||||
banner: (
|
||||
<RootToggle
|
||||
options={[
|
||||
{
|
||||
title: 'Folder 1',
|
||||
description: 'Pages in folder 1',
|
||||
url: '/path/to/page-tree-1',
|
||||
},
|
||||
{
|
||||
title: 'Folder 2',
|
||||
description: 'Pages in folder 2',
|
||||
url: '/path/to/page-tree-2',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
35
content/docs/components/root-toggle.zh.mdx
Normal file
35
content/docs/components/root-toggle.zh.mdx
Normal file
@ -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';
|
||||
|
||||
<DocsLayout
|
||||
sidebar={{
|
||||
banner: (
|
||||
<RootToggle
|
||||
options={[
|
||||
{
|
||||
title: '文件夹 1',
|
||||
description: '文件夹 1 中的页面',
|
||||
url: '/path/to/page-tree-1',
|
||||
},
|
||||
{
|
||||
title: '文件夹 2',
|
||||
description: '文件夹 2 中的页面',
|
||||
url: '/path/to/page-tree-2',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
57
content/docs/components/steps.mdx
Normal file
57
content/docs/components/steps.mdx
Normal file
@ -0,0 +1,57 @@
|
||||
---
|
||||
title: Steps
|
||||
description: Adding steps to your docs
|
||||
preview: steps
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Put your steps into the `Steps` container.
|
||||
|
||||
```mdx
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
|
||||
<Steps>
|
||||
<Step>
|
||||
|
||||
### Hello World
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
|
||||
### Hello World
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
```
|
||||
|
||||
> We recommend using Tailwind CSS utility classes directly on Tailwind CSS projects.
|
||||
|
||||
### Without imports
|
||||
|
||||
You can use the Tailwind CSS utilities without importing it.
|
||||
|
||||
```mdx
|
||||
<div className="fd-steps">
|
||||
<div className="fd-step" />
|
||||
</div>
|
||||
```
|
||||
|
||||
It supports adding step styles to only headings with arbitrary variants.
|
||||
|
||||
```mdx
|
||||
<div className='fd-steps [&_h3]:fd-step'>
|
||||
|
||||
### Hello World
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
<div className='fd-steps [&_h3]:fd-step'>
|
||||
|
||||
### Hello World
|
||||
|
||||
You no longer need to use the step component anymore.
|
||||
|
||||
</div>
|
||||
57
content/docs/components/steps.zh.mdx
Normal file
57
content/docs/components/steps.zh.mdx
Normal file
@ -0,0 +1,57 @@
|
||||
---
|
||||
title: 步骤
|
||||
description: 在文档中添加步骤
|
||||
preview: steps
|
||||
---
|
||||
|
||||
## 使用方法
|
||||
|
||||
将您的步骤放入 `Steps` 容器中。
|
||||
|
||||
```mdx
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
|
||||
<Steps>
|
||||
<Step>
|
||||
|
||||
### 你好世界
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
|
||||
### 你好世界
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
```
|
||||
|
||||
> 我们建议在 Tailwind CSS 项目中直接使用 Tailwind CSS 实用类。
|
||||
|
||||
### 不使用导入
|
||||
|
||||
您可以在不导入的情况下使用 Tailwind CSS 实用工具。
|
||||
|
||||
```mdx
|
||||
<div className="fd-steps">
|
||||
<div className="fd-step" />
|
||||
</div>
|
||||
```
|
||||
|
||||
它支持仅对带有任意变体的标题添加步骤样式。
|
||||
|
||||
```mdx
|
||||
<div className='fd-steps [&_h3]:fd-step'>
|
||||
|
||||
### 你好世界
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
<div className='fd-steps [&_h3]:fd-step'>
|
||||
|
||||
### 你好世界
|
||||
|
||||
您不再需要使用步骤组件了。
|
||||
|
||||
</div>
|
||||
146
content/docs/components/tabs.mdx
Normal file
146
content/docs/components/tabs.mdx
Normal file
@ -0,0 +1,146 @@
|
||||
---
|
||||
title: Tabs
|
||||
description:
|
||||
A Tabs component built with Radix UI, with additional features such as
|
||||
persistent and shared value.
|
||||
preview: tabs
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Import it in your MDX documents.
|
||||
|
||||
```mdx
|
||||
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
|
||||
|
||||
<Tabs items={['Javascript', 'Rust']}>
|
||||
<Tab value="Javascript">Javascript is weird</Tab>
|
||||
<Tab value="Rust">Rust is fast</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### Without `value`
|
||||
|
||||
Without a `value`, it detects from the children index. Note that it might cause errors on re-renders, it's not encouraged if the tabs might change.
|
||||
|
||||
```mdx
|
||||
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
|
||||
|
||||
<Tabs items={['Javascript', 'Rust']}>
|
||||
<Tab>Javascript is weird</Tab>
|
||||
<Tab>Rust is fast</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
#### Demo with Re-renders
|
||||
|
||||
<Tabs items={['Javascript', 'Rust']}>
|
||||
<Tab>Javascript is weird</Tab>
|
||||
<Tab>Rust is fast</Tab>
|
||||
</Tabs>
|
||||
|
||||
{/* <WithoutValueTest /> */}
|
||||
|
||||
### Shared Value
|
||||
|
||||
By passing an `groupId` property, you can share a value across all tabs with the same
|
||||
id.
|
||||
|
||||
```mdx
|
||||
<Tabs groupId="language" items={['Javascript', 'Rust']}>
|
||||
<Tab value="Javascript">Javascript is weird</Tab>
|
||||
<Tab value="Rust">Rust is fast</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### Persistent
|
||||
|
||||
You can enable persistent by passing a `persist` property. The value will be
|
||||
stored in `localStorage`, with its id as the key.
|
||||
|
||||
```mdx
|
||||
<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
|
||||
<Tab value="Javascript">Javascript is weird</Tab>
|
||||
<Tab value="Rust">Rust is fast</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
> Persistent only works if you have passed an `id`.
|
||||
|
||||
### Default Value
|
||||
|
||||
Set a default value by passing `defaultIndex`.
|
||||
|
||||
```mdx
|
||||
<Tabs items={['Javascript', 'Rust']} defaultIndex={1}>
|
||||
<Tab value="Javascript">Javascript is weird</Tab>
|
||||
<Tab value="Rust">Rust is fast</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### Link to Tab
|
||||
|
||||
Use HTML `id` attribute to link to a specific tab.
|
||||
|
||||
```mdx
|
||||
<Tabs items={['Javascript', 'Rust', 'C++']}>
|
||||
<Tab value="Javascript">Javascript is weird</Tab>
|
||||
<Tab value="Rust">Rust is fast</Tab>
|
||||
<Tab id="tab-cpp" value="C++">
|
||||
`Hello World`
|
||||
</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
You can add the hash `#tab-cpp` to your URL and reload, the C++ tab will be activated.
|
||||
|
||||
<Tabs items={['Javascript', 'Rust', 'C++']}>
|
||||
<Tab value="Javascript">Javascript is weird</Tab>
|
||||
<Tab value="Rust">Rust is fast</Tab>
|
||||
<Tab id="tab-cpp" value="C++">
|
||||
`Hello World`
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
Additionally, the `updateAnchor` property can be set to `true` in the `Tabs` component
|
||||
to automatically update the URL hash whenever time a new tab is selected:
|
||||
|
||||
```mdx
|
||||
<Tabs items={['Javascript', 'Rust', 'C++']} updateAnchor>
|
||||
<Tab id="tab-js" value="Javascript">
|
||||
Javascript is weird
|
||||
</Tab>
|
||||
<Tab id="tab-rs" value="Rust">
|
||||
Rust is fast
|
||||
</Tab>
|
||||
<Tab id="tab-cpp" value="C++">
|
||||
`Hello World`
|
||||
</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
{/* <UrlBar /> */}
|
||||
|
||||
<Tabs items={['Hello', 'World']} updateAnchor>
|
||||
<Tab id="tab-hello" value="Hello">
|
||||
Hello!
|
||||
</Tab>
|
||||
<Tab id="tab-world" value="World">
|
||||
World!
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Advanced
|
||||
|
||||
You can use the styled Radix UI primitive directly from exported `Primitive`.
|
||||
|
||||
```mdx
|
||||
import { Primitive } from 'fumadocs-ui/components/tabs';
|
||||
|
||||
<Primitive.Tabs>
|
||||
<Primitive.TabsList>
|
||||
<Primitive.TabsTrigger />
|
||||
</Primitive.TabsList>
|
||||
<Primitive.TabsContent />
|
||||
</Primitive.Tabs>
|
||||
```
|
||||
114
content/docs/components/tabs.zh.mdx
Normal file
114
content/docs/components/tabs.zh.mdx
Normal file
@ -0,0 +1,114 @@
|
||||
---
|
||||
title: 选项卡
|
||||
description:
|
||||
使用 Radix UI 构建的选项卡组件，具有持久性和共享值等附加功能。
|
||||
preview: tabs
|
||||
---
|
||||
|
||||
## 使用方法
|
||||
|
||||
在 MDX 文档中导入它。
|
||||
|
||||
```mdx
|
||||
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
|
||||
|
||||
<Tabs items={['Javascript', 'Rust']}>
|
||||
<Tab value="Javascript">Javascript 很奇怪</Tab>
|
||||
<Tab value="Rust">Rust 很快</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### 不使用 `value`
|
||||
|
||||
如果没有 `value`，它会从子元素索引中检测。请注意，这可能会在重新渲染时导致错误，如果选项卡可能会改变，不建议这样做。
|
||||
|
||||
```mdx
|
||||
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
|
||||
|
||||
<Tabs items={['Javascript', 'Rust']}>
|
||||
<Tab>Javascript 很奇怪</Tab>
|
||||
<Tab>Rust 很快</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### 共享值
|
||||
|
||||
通过传递 `groupId` 属性，您可以在具有相同 ID 的所有选项卡之间共享值。
|
||||
|
||||
```mdx
|
||||
<Tabs groupId="language" items={['Javascript', 'Rust']}>
|
||||
<Tab value="Javascript">Javascript 很奇怪</Tab>
|
||||
<Tab value="Rust">Rust 很快</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### 持久性
|
||||
|
||||
您可以通过传递 `persist` 属性启用持久性。该值将存储在 `localStorage` 中，以其 ID 作为键。
|
||||
|
||||
```mdx
|
||||
<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
|
||||
<Tab value="Javascript">Javascript 很奇怪</Tab>
|
||||
<Tab value="Rust">Rust 很快</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
> 持久性仅在您传递了 `id` 时有效。
|
||||
|
||||
### 默认值
|
||||
|
||||
通过传递 `defaultIndex` 设置默认值。
|
||||
|
||||
```mdx
|
||||
<Tabs items={['Javascript', 'Rust']} defaultIndex={1}>
|
||||
<Tab value="Javascript">Javascript 很奇怪</Tab>
|
||||
<Tab value="Rust">Rust 很快</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### 链接到选项卡
|
||||
|
||||
使用 HTML `id` 属性链接到特定选项卡。
|
||||
|
||||
```mdx
|
||||
<Tabs items={['Javascript', 'Rust', 'C++']}>
|
||||
<Tab value="Javascript">Javascript 很奇怪</Tab>
|
||||
<Tab value="Rust">Rust 很快</Tab>
|
||||
<Tab id="tab-cpp" value="C++">
|
||||
`Hello World`
|
||||
</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
您可以在 URL 中添加哈希 `#tab-cpp` 并重新加载，C++ 选项卡将被激活。
|
||||
|
||||
此外，可以在 `Tabs` 组件中将 `updateAnchor` 属性设置为 `true`，以便在每次选择新选项卡时自动更新 URL 哈希：
|
||||
|
||||
```mdx
|
||||
<Tabs items={['Javascript', 'Rust', 'C++']} updateAnchor>
|
||||
<Tab id="tab-js" value="Javascript">
|
||||
Javascript 很奇怪
|
||||
</Tab>
|
||||
<Tab id="tab-rs" value="Rust">
|
||||
Rust 很快
|
||||
</Tab>
|
||||
<Tab id="tab-cpp" value="C++">
|
||||
`Hello World`
|
||||
</Tab>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### 高级用法
|
||||
|
||||
您可以直接从导出的 `Primitive` 中使用样式化的 Radix UI 原语。
|
||||
|
||||
```mdx
|
||||
import { Primitive } from 'fumadocs-ui/components/tabs';
|
||||
|
||||
<Primitive.Tabs>
|
||||
<Primitive.TabsList>
|
||||
<Primitive.TabsTrigger />
|
||||
</Primitive.TabsList>
|
||||
<Primitive.TabsContent />
|
||||
</Primitive.Tabs>
|
||||
```
|
||||
34
content/docs/components/type-table.mdx
Normal file
34
content/docs/components/type-table.mdx
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Type Table
|
||||
description: A table for documenting types
|
||||
preview: typeTable
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
It accepts a `type` property.
|
||||
|
||||
```mdx
|
||||
import { TypeTable } from 'fumadocs-ui/components/type-table';
|
||||
|
||||
<TypeTable
|
||||
type={{
|
||||
percentage: {
|
||||
description:
|
||||
'The percentage of scroll position to display the roll button',
|
||||
type: 'number',
|
||||
default: 0.2,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## References
|
||||
|
||||
### Type Table
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="TypeTableProps" /> */}
|
||||
|
||||
### Object Type
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="ObjectTypeProps" /> */}
|
||||
34
content/docs/components/type-table.zh.mdx
Normal file
34
content/docs/components/type-table.zh.mdx
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
title: 类型表格
|
||||
description: 用于记录类型的表格
|
||||
preview: typeTable
|
||||
---
|
||||
|
||||
## 使用方法
|
||||
|
||||
它接受一个 `type` 属性。
|
||||
|
||||
```mdx
|
||||
import { TypeTable } from 'fumadocs-ui/components/type-table';
|
||||
|
||||
<TypeTable
|
||||
type={{
|
||||
percentage: {
|
||||
description:
|
||||
'显示滚动按钮的滚动位置百分比',
|
||||
type: 'number',
|
||||
default: 0.2,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
### Type Table
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="TypeTableProps" /> */}
|
||||
|
||||
### Object Type
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="ObjectTypeProps" /> */}
|
||||
166
content/docs/layouts/docs.mdx
Normal file
166
content/docs/layouts/docs.mdx
Normal file
@ -0,0 +1,166 @@
|
||||
---
|
||||
title: Docs Layout
|
||||
description: The layout of documentation
|
||||
---
|
||||
|
||||
The layout of documentation pages, it includes a sidebar and mobile-only navbar.
|
||||
|
||||
> It is a server component, you should not reference it in a client component.
|
||||
|
||||
## Usage
|
||||
|
||||
Pass your page tree to the component.
|
||||
|
||||
```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 (
|
||||
<DocsLayout {...baseOptions} tree={tree}>
|
||||
{children}
|
||||
</DocsLayout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable
|
||||
path="./content/docs/props.ts"
|
||||
type="Omit<DocsLayoutProps, 'children' | 'disableThemeSwitch'>"
|
||||
/> */}
|
||||
|
||||
## Sidebar
|
||||
|
||||
```tsx title="layout.tsx"
|
||||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||||
|
||||
<DocsLayout
|
||||
sidebar={{
|
||||
// sidebar options:
|
||||
enabled: true,
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="SidebarProps" /> */}
|
||||
|
||||
### Sidebar Tabs
|
||||
|
||||
See [Navigation Guide](/docs/navigation/sidebar#sidebar-tabs) for usages.
|
||||
|
||||
#### Decoration
|
||||
|
||||
Change the icon/styles of tabs.
|
||||
|
||||
```tsx
|
||||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||||
|
||||
<DocsLayout
|
||||
sidebar={{
|
||||
tabs: {
|
||||
transform: (option, node) => ({
|
||||
...option,
|
||||
icon: 'my icon',
|
||||
}),
|
||||
},
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
## Nav
|
||||
|
||||
A mobile-only navbar, we recommend to customise it from `baseOptions`.
|
||||
|
||||
<div className='max-w-[460px] mx-auto'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
```tsx
|
||||
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
|
||||
|
||||
export const baseOptions: BaseLayoutProps = {
|
||||
githubUrl: 'https://github.com/fuma-nama/fumadocs',
|
||||
nav: {
|
||||
title: 'My App',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable
|
||||
path="./content/docs/props.ts"
|
||||
type="Omit<NavbarProps, 'children'>"
|
||||
/> */}
|
||||
|
||||
### Transparent Mode
|
||||
|
||||
To make the navbar background transparent, you can configure transparent mode.
|
||||
|
||||
```tsx
|
||||
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
|
||||
|
||||
export const baseOptions: BaseLayoutProps = {
|
||||
nav: {
|
||||
transparentMode: 'top',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
| Mode | Description |
|
||||
| -------- | ---------------------------------------- |
|
||||
| `always` | Always use a transparent background |
|
||||
| `top` | When at the top of page |
|
||||
| `none` | Disable transparent background (default) |
|
||||
|
||||
### Replace Navbar
|
||||
|
||||
To replace the navbar in Docs Layout, set `nav.component` to your own 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 (
|
||||
<DocsLayout
|
||||
{...baseOptions}
|
||||
nav={{
|
||||
component: <CustomNavbar />,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</DocsLayout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Fumadocs uses **CSS Variables** to share the size of layout components, and fit each layout component into appropriate position.
|
||||
|
||||
You need to override `--fd-nav-height` to the exact height of your custom navbar, this can be done with a CSS stylesheet (e.g. in `global.css`):
|
||||
|
||||
```css
|
||||
:root {
|
||||
--fd-nav-height: 80px !important;
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced
|
||||
|
||||
### Disable Prefetching
|
||||
|
||||
By default, it uses the Next.js Link component with prefetch enabled.
|
||||
When the link component appears into the browser viewport, the content (RSC payload) will be prefetched.
|
||||
|
||||
On Vercel, this may cause a high usage of serverless functions and Data Cache.
|
||||
It can also hit the limits of some other hosting platforms.
|
||||
|
||||
You can disable prefetching to reduce the amount of RSC requests.
|
||||
|
||||
```tsx
|
||||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||||
|
||||
<DocsLayout sidebar={{ prefetch: false }} />;
|
||||
```
|
||||
160
content/docs/layouts/docs.zh.mdx
Normal file
160
content/docs/layouts/docs.zh.mdx
Normal file
@ -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 (
|
||||
<DocsLayout {...baseOptions} tree={tree}>
|
||||
{children}
|
||||
</DocsLayout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable
|
||||
path="./content/docs/props.ts"
|
||||
type="Omit<DocsLayoutProps, 'children' | 'disableThemeSwitch'>"
|
||||
/> */}
|
||||
|
||||
## 侧边栏
|
||||
|
||||
```tsx title="layout.tsx"
|
||||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||||
|
||||
<DocsLayout
|
||||
sidebar={{
|
||||
// sidebar options:
|
||||
enabled: true,
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="SidebarProps" /> */}
|
||||
|
||||
### 侧边栏标签
|
||||
|
||||
有关用法，请参见[导航指南](/docs/navigation/sidebar#sidebar-tabs)。
|
||||
|
||||
#### 装饰
|
||||
|
||||
更改标签的图标/样式。
|
||||
|
||||
```tsx
|
||||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||||
|
||||
<DocsLayout
|
||||
sidebar={{
|
||||
tabs: {
|
||||
transform: (option, node) => ({
|
||||
...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',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable
|
||||
path="./content/docs/props.ts"
|
||||
type="Omit<NavbarProps, 'children'>"
|
||||
/> */}
|
||||
|
||||
### 透明模式
|
||||
|
||||
要使导航栏背景透明，您可以配置透明模式。
|
||||
|
||||
```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 (
|
||||
<DocsLayout
|
||||
{...baseOptions}
|
||||
nav={{
|
||||
component: <CustomNavbar />,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</DocsLayout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
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';
|
||||
|
||||
<DocsLayout sidebar={{ prefetch: false }} />;
|
||||
```
|
||||
33
content/docs/layouts/home-layout.mdx
Normal file
33
content/docs/layouts/home-layout.mdx
Normal file
@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Home Layout
|
||||
description: Shared layout for other pages
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Add a navbar and search dialog across other pages.
|
||||
|
||||
```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 <HomeLayout {...baseOptions}>{children}</HomeLayout>;
|
||||
}
|
||||
```
|
||||
|
||||
Create a [Route Group](https://nextjs.org/docs/app/building-your-application/routing/route-groups) to share the same layout across multiple pages.
|
||||
|
||||
<Files>
|
||||
<Folder name="(home)" defaultOpen>
|
||||
<File name="page.tsx" />
|
||||
<File name="layout.tsx" />
|
||||
</Folder>
|
||||
<Folder name="/docs">
|
||||
<Folder name={'[[..slugs]]'}>
|
||||
<File name="page.tsx" />
|
||||
</Folder>
|
||||
<File name="layout.tsx" />
|
||||
</Folder>
|
||||
</Files>
|
||||
33
content/docs/layouts/home-layout.zh.mdx
Normal file
33
content/docs/layouts/home-layout.zh.mdx
Normal file
@ -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 <HomeLayout {...baseOptions}>{children}</HomeLayout>;
|
||||
}
|
||||
```
|
||||
|
||||
创建一个[路由组](https://nextjs.org/docs/app/building-your-application/routing/route-groups)来在多个页面之间共享相同的布局。
|
||||
|
||||
<Files>
|
||||
<Folder name="(home)" defaultOpen>
|
||||
<File name="page.tsx" />
|
||||
<File name="layout.tsx" />
|
||||
</Folder>
|
||||
<Folder name="/docs">
|
||||
<Folder name={'[[..slugs]]'}>
|
||||
<File name="page.tsx" />
|
||||
</Folder>
|
||||
<File name="layout.tsx" />
|
||||
</Folder>
|
||||
</Files>
|
||||
32
content/docs/layouts/notebook.mdx
Normal file
32
content/docs/layouts/notebook.mdx
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Notebook
|
||||
description: A more compact version of Docs Layout
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Enable the notebook layout with `fumadocs-ui/layouts/notebook`, it's a more compact layout than the default one.
|
||||
|
||||
|
||||
|
||||
```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 (
|
||||
<DocsLayout
|
||||
{...baseOptions}
|
||||
// the position of navbar
|
||||
nav={{ ...baseOptions.nav, mode: 'top' }}
|
||||
// the position of Sidebar Tabs
|
||||
tabMode="navbar"
|
||||
tree={source.pageTree}
|
||||
>
|
||||
{children}
|
||||
</DocsLayout>
|
||||
);
|
||||
}
|
||||
```
|
||||
32
content/docs/layouts/notebook.zh.mdx
Normal file
32
content/docs/layouts/notebook.zh.mdx
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
title: 笔记本
|
||||
description: 文档布局的更紧凑版本
|
||||
---
|
||||
|
||||
## 使用方法
|
||||
|
||||
使用 `fumadocs-ui/layouts/notebook` 启用笔记本布局，它比默认布局更加紧凑。
|
||||
|
||||
|
||||
|
||||
```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 (
|
||||
<DocsLayout
|
||||
{...baseOptions}
|
||||
// the position of navbar
|
||||
nav={{ ...baseOptions.nav, mode: 'top' }}
|
||||
// the position of Sidebar Tabs
|
||||
tabMode="navbar"
|
||||
tree={source.pageTree}
|
||||
>
|
||||
{children}
|
||||
</DocsLayout>
|
||||
);
|
||||
}
|
||||
```
|
||||
217
content/docs/layouts/page.mdx
Normal file
217
content/docs/layouts/page.mdx
Normal file
@ -0,0 +1,217 @@
|
||||
---
|
||||
title: Docs Page
|
||||
description: A page in your documentation
|
||||
---
|
||||
|
||||
Page is the base element of a documentation, it includes Table of contents,
|
||||
Footer, and Breadcrumb.
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx title="page.tsx"
|
||||
import {
|
||||
DocsPage,
|
||||
DocsDescription,
|
||||
DocsTitle,
|
||||
DocsBody,
|
||||
} from 'fumadocs-ui/page';
|
||||
|
||||
<DocsPage>
|
||||
<DocsTitle>title</DocsTitle>
|
||||
<DocsDescription>description</DocsDescription>
|
||||
<DocsBody>...</DocsBody>
|
||||
</DocsPage>;
|
||||
```
|
||||
|
||||
<Callout type='info' title='Good to know'>
|
||||
|
||||
Instead of rendering the title with `DocsTitle` in `page.tsx`, you can put the title into MDX file.
|
||||
This will render the title in the MDX body.
|
||||
|
||||
</Callout>
|
||||
|
||||
### Body
|
||||
|
||||
It applies the [Typography](/docs/theme#typography) styles, wrap your content inside.
|
||||
|
||||
```tsx
|
||||
import { DocsBody } from 'fumadocs-ui/page';
|
||||
|
||||
<DocsBody>
|
||||
<h1>This heading looks good!</h1>
|
||||
</DocsBody>;
|
||||
```
|
||||
|
||||
### Category
|
||||
|
||||
Optional, link the other pages in its (page tree) folder with cards.
|
||||
|
||||
> You can use this component without `<DocsPage />`.
|
||||
|
||||
```tsx title="page.tsx"
|
||||
import { source } from '@/lib/source';
|
||||
import { DocsCategory } from 'fumadocs-ui/page';
|
||||
|
||||
const page = source.getPage(['...']);
|
||||
|
||||
<DocsCategory page={page} from={source} />;
|
||||
```
|
||||
|
||||
**Demo:**
|
||||
|
||||
{/* DocsCategory is not supported */}
|
||||
{/* <DocsCategory /> */}
|
||||
|
||||
## Configurations
|
||||
|
||||
### Full Mode
|
||||
|
||||
To extend the page to fill up all available space, pass `full` to the page component.
|
||||
This will force TOC to be shown as a popover.
|
||||
|
||||
```tsx
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
|
||||
<DocsPage full>...</DocsPage>;
|
||||
```
|
||||
|
||||
### Table of Contents
|
||||
|
||||
An overview of all the headings in your article, it requires an array of headings.
|
||||
|
||||
For Markdown and MDX documents, You can obtain it using the
|
||||
[TOC Utility](/docs/headless/utils/get-toc). Content sources like Fumadocs MDX offer this out-of-the-box.
|
||||
|
||||
```tsx
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
|
||||
<DocsPage toc={headings}>...</DocsPage>;
|
||||
```
|
||||
|
||||
Customise or disable TOC from your documentation with the `tableOfContent` option.
|
||||
|
||||
```tsx
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
|
||||
<DocsPage tableOfContent={options}>...</DocsPage>;
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="TOCProps" /> */}
|
||||
|
||||
#### Style
|
||||
|
||||
You can choose another style for TOC, like `clerk` inspired by https://clerk.com:
|
||||
|
||||
```tsx
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
|
||||
<DocsPage
|
||||
tableOfContent={{
|
||||
style: 'clerk',
|
||||
}}
|
||||
>
|
||||
...
|
||||
</DocsPage>;
|
||||
```
|
||||
|
||||
#### Popover Mode
|
||||
|
||||
On smaller devices, it is shown on a popover instead.
|
||||
Customise it with the `tableOfContentPopover` option.
|
||||
|
||||
```tsx
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
|
||||
<DocsPage tableOfContentPopover={options}>...</DocsPage>;
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="TOCPopoverProps" /> */}
|
||||
|
||||
### Last Updated Time
|
||||
|
||||
Display last updated time of the page.
|
||||
|
||||
```tsx
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
|
||||
<DocsPage lastUpdate={new Date(lastModifiedTime)} />;
|
||||
```
|
||||
|
||||
Since you might have different version controls (e.g. Github) or it's from
|
||||
remote sources like Sanity, Fumadocs UI doesn't display the last updated time by
|
||||
default.
|
||||
|
||||
For Github hosted documents, you can use
|
||||
the [`getGithubLastEdit`](/docs/headless/utils/git-last-edit) utility.
|
||||
|
||||
```tsx
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
import { getGithubLastEdit } from 'fumadocs-core/server';
|
||||
|
||||
const time = await getGithubLastEdit({
|
||||
owner: 'fuma-nama',
|
||||
repo: 'fumadocs',
|
||||
path: `content/docs/${page.file.path}`,
|
||||
});
|
||||
|
||||
<DocsPage lastUpdate={new Date(time)} />;
|
||||
```
|
||||
|
||||
<Callout type='info' title='Note'>
|
||||
|
||||
You can also specify the last updated time of documents (e.g. using frontmatter).
|
||||
Don't forget to [update the schema type](/docs/mdx/collections#schema) on Fumadocs MDX first.
|
||||
|
||||
</Callout>
|
||||
|
||||
### Edit on GitHub
|
||||
|
||||
Add "Edit on GitHub" button to the page.
|
||||
|
||||
```tsx
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
|
||||
<DocsPage
|
||||
editOnGithub={{
|
||||
owner: 'fuma-nama',
|
||||
repo: 'fumadocs',
|
||||
sha: 'main',
|
||||
// file path, make sure it's valid
|
||||
path: `content/docs/${page.file.path}`,
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
### Footer
|
||||
|
||||
Footer is a navigation element that has two buttons to jump to the next and previous pages. When not specified, it shows the neighbour pages found from page tree.
|
||||
|
||||
Customise the footer with the `footer` option.
|
||||
|
||||
```tsx
|
||||
import { DocsPage, DocsBody } from 'fumadocs-ui/page';
|
||||
|
||||
<DocsPage footer={options}>
|
||||
<DocsBody>...</DocsBody>
|
||||
</DocsPage>;
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="FooterProps" /> */}
|
||||
|
||||
### Breadcrumb
|
||||
|
||||
A navigation element, shown only when user is navigating in folders.
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="BreadcrumbProps" /> */}
|
||||
|
||||
### MDX Page
|
||||
|
||||
In conjunction of Fumadocs MDX, you may create a `page.mdx` file and add the following.
|
||||
|
||||
```mdx
|
||||
export { withArticle as default } from 'fumadocs-ui/page';
|
||||
|
||||
## Hello World
|
||||
```
|
||||
|
||||
This creates a page with MDX, with proper typography styles applied.
|
||||
238
content/docs/layouts/page.zh.mdx
Normal file
238
content/docs/layouts/page.zh.mdx
Normal file
@ -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 (
|
||||
<DocsPage
|
||||
title={page.title}
|
||||
description={page.description}
|
||||
mdx={page.body}
|
||||
toc={page.toc}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable
|
||||
path="./content/docs/props.ts"
|
||||
type="Omit<DocsPageProps, 'children'>"
|
||||
/> */}
|
||||
|
||||
### 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<Metadata> {
|
||||
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 <DocsPage toc={toc} />;
|
||||
}
|
||||
```
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="TOCItemProps[]" /> */}
|
||||
|
||||
### 自定义内容目录
|
||||
|
||||
可以定制 TOC（目录）的呈现方式，但您仍然需要通过 `toc` 字段传递真实的 TOC 项目。
|
||||
|
||||
```tsx title="page.tsx"
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<DocsPage tocClassName="hidden lg:block" toc={toc}>
|
||||
<div>Custom TOC</div>
|
||||
</DocsPage>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 最后更新时间
|
||||
|
||||
```tsx title="page.tsx"
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
|
||||
export default function Page() {
|
||||
return <DocsPage lastUpdatedAt={new Date()} />;
|
||||
}
|
||||
```
|
||||
|
||||
## 页脚
|
||||
|
||||
```tsx title="layout.tsx"
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
import { baseOptions } from '@/app/layout.config';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<DocsPage
|
||||
footer={{
|
||||
text: 'Built with Fumadocs',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 使用基础配置
|
||||
|
||||
您可以创建一个 `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 <DocsPage {...baseOptions} />;
|
||||
}
|
||||
```
|
||||
|
||||
### 编辑链接
|
||||
|
||||
```tsx
|
||||
import { DocsPage } from 'fumadocs-ui/page';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<DocsPage
|
||||
gitTimestamp={true}
|
||||
footer={{
|
||||
// Edit Link
|
||||
editLink: {
|
||||
text: 'Edit this page',
|
||||
url: 'https://github.com/username/repo/blob/main',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 页面导航
|
||||
|
||||
```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 (
|
||||
<DocsPage
|
||||
footer={{
|
||||
navigation: {
|
||||
prev: prev?.url
|
||||
? {
|
||||
title: prev.title,
|
||||
href: prev.url,
|
||||
}
|
||||
: undefined,
|
||||
next: next?.url
|
||||
? {
|
||||
title: next.title,
|
||||
href: next.url,
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### 自定义获取相邻页面
|
||||
|
||||
您可以在 `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,
|
||||
});
|
||||
```
|
||||
54
content/docs/layouts/root-provider.mdx
Normal file
54
content/docs/layouts/root-provider.mdx
Normal file
@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Root Provider
|
||||
description: The context provider of Fumadocs UI.
|
||||
---
|
||||
|
||||
The context provider of all the components, including `next-themes` and context
|
||||
for search dialog. It should be located at the root layout.
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
import { RootProvider } from 'fumadocs-ui/provider';
|
||||
|
||||
export default function Layout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<RootProvider>{children}</RootProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Search Dialog
|
||||
|
||||
Customize or disable the search dialog with `search` option.
|
||||
|
||||
```jsx
|
||||
<RootProvider
|
||||
search={{
|
||||
enabled: false,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RootProvider>
|
||||
```
|
||||
|
||||
Learn more from [Search](/docs/search).
|
||||
|
||||
### Theme Provider
|
||||
|
||||
Fumadocs supports light/dark modes with [`next-themes`](https://github.com/pacocoursey/next-themes).
|
||||
Customise or disable it with `theme` option.
|
||||
|
||||
```jsx
|
||||
<RootProvider
|
||||
theme={{
|
||||
enabled: false,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RootProvider>
|
||||
```
|
||||
53
content/docs/layouts/root-provider.zh.mdx
Normal file
53
content/docs/layouts/root-provider.zh.mdx
Normal file
@ -0,0 +1,53 @@
|
||||
---
|
||||
title: 根提供者
|
||||
description: Fumadocs UI 的上下文提供者
|
||||
---
|
||||
|
||||
所有组件的上下文提供者，包括 `next-themes` 和搜索对话框的上下文。它应该位于根布局中。
|
||||
|
||||
## 使用方法
|
||||
|
||||
```jsx
|
||||
import { RootProvider } from 'fumadocs-ui/provider';
|
||||
|
||||
export default function Layout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<RootProvider>{children}</RootProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 搜索对话框
|
||||
|
||||
使用 `search` 选项自定义或禁用搜索对话框。
|
||||
|
||||
```jsx
|
||||
<RootProvider
|
||||
search={{
|
||||
enabled: false,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RootProvider>
|
||||
```
|
||||
|
||||
从[搜索](/docs/search)了解更多信息。
|
||||
|
||||
### 主题提供者
|
||||
|
||||
Fumadocs 通过 [`next-themes`](https://github.com/pacocoursey/next-themes) 支持明/暗模式。
|
||||
使用 `theme` 选项自定义或禁用它。
|
||||
|
||||
```jsx
|
||||
<RootProvider
|
||||
theme={{
|
||||
enabled: false,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RootProvider>
|
||||
```
|
||||
25
content/docs/mdx/callout.mdx
Normal file
25
content/docs/mdx/callout.mdx
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
title: Callout
|
||||
description: Add callout to your docs
|
||||
preview: callout
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Add it to your MDX components.
|
||||
|
||||
```tsx
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
<MDX
|
||||
components={{
|
||||
Callout,
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
See [Markdown](/docs/markdown#callouts) for usages.
|
||||
|
||||
### Reference
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="CalloutProps" /> */}
|
||||
25
content/docs/mdx/callout.zh.mdx
Normal file
25
content/docs/mdx/callout.zh.mdx
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
title: 提示框
|
||||
description: 在文档中添加提示框
|
||||
preview: callout
|
||||
---
|
||||
|
||||
## 使用方法
|
||||
|
||||
将其添加到您的 MDX 组件中。
|
||||
|
||||
```tsx
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
<MDX
|
||||
components={{
|
||||
Callout,
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
有关用法，请参见 [Markdown](/docs/markdown#callouts)。
|
||||
|
||||
### 参考
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="CalloutProps" /> */}
|
||||
56
content/docs/mdx/card.mdx
Normal file
56
content/docs/mdx/card.mdx
Normal file
@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Card
|
||||
description: Use the Card component in your MDX documentation
|
||||
preview: card
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Add it to your MDX components.
|
||||
|
||||
```tsx
|
||||
import { Card, Cards } from 'fumadocs-ui/components/card';
|
||||
|
||||
<MDX
|
||||
components={{
|
||||
Card,
|
||||
Cards,
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
See [Markdown](/docs/markdown#cards) for usages.
|
||||
|
||||
### Cards
|
||||
|
||||
The container of cards.
|
||||
|
||||
### Card
|
||||
|
||||
Based on Next.js `<Link />`.
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="CardProps" /> */}
|
||||
|
||||
<Callout title="Tree Shaking on icons" type="warn">
|
||||
|
||||
If you're not using Fumadocs MDX for rendering MDX (e.g. using Contentlayer), ensure that
|
||||
tree shaking is working properly.
|
||||
|
||||
Most of the icon libraries support importing icons individually.
|
||||
|
||||
```tsx
|
||||
import HomeIcon from 'lucide-react/dist/esm/icons/home';
|
||||
```
|
||||
|
||||
As a workaround, you can pass icons to MDX Components too. (this uses Next.js bundler instead of content source)
|
||||
|
||||
```tsx title="page.tsx"
|
||||
import { HomeIcon } from 'lucide-react';
|
||||
|
||||
const components = {
|
||||
...defaultComponents,
|
||||
HomeIcon,
|
||||
};
|
||||
```
|
||||
|
||||
</Callout>
|
||||
56
content/docs/mdx/card.zh.mdx
Normal file
56
content/docs/mdx/card.zh.mdx
Normal file
@ -0,0 +1,56 @@
|
||||
---
|
||||
title: 卡片
|
||||
description: 在 MDX 文档中使用卡片组件
|
||||
preview: card
|
||||
---
|
||||
|
||||
## 使用方法
|
||||
|
||||
将其添加到您的 MDX 组件中。
|
||||
|
||||
```tsx
|
||||
import { Card, Cards } from 'fumadocs-ui/components/card';
|
||||
|
||||
<MDX
|
||||
components={{
|
||||
Card,
|
||||
Cards,
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
有关用法，请参见 [Markdown](/docs/markdown#cards)。
|
||||
|
||||
### Cards
|
||||
|
||||
卡片的容器。
|
||||
|
||||
### Card
|
||||
|
||||
基于 Next.js 的 `<Link />`。
|
||||
|
||||
{/* <AutoTypeTable path="./content/docs/props.ts" name="CardProps" /> */}
|
||||
|
||||
<Callout title="图标的树摇优化" type="warn">
|
||||
|
||||
如果您没有使用 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,
|
||||
};
|
||||
```
|
||||
|
||||
</Callout>
|
||||
79
content/docs/mdx/codeblock.mdx
Normal file
79
content/docs/mdx/codeblock.mdx
Normal file
@ -0,0 +1,79 @@
|
||||
---
|
||||
title: Code Block
|
||||
description: Adding code blocks to your docs
|
||||
---
|
||||
|
||||
<Wrapper>
|
||||
<div className="bg-fd-background rounded-lg prose-no-margin">
|
||||
|
||||
```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);
|
||||
```
|
||||
|
||||
</div>
|
||||
</Wrapper>
|
||||
|
||||
Display code blocks, added by default.
|
||||
|
||||
- Copy button
|
||||
- Custom titles and icons
|
||||
|
||||
## Usage
|
||||
|
||||
Wrap the pre element in `<CodeBlock />`, which acts as the wrapper of code block.
|
||||
|
||||
```tsx
|
||||
import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
|
||||
|
||||
<MDX
|
||||
components={{
|
||||
// HTML `ref` attribute conflicts with `forwardRef`
|
||||
pre: ({ ref: _ref, ...props }) => (
|
||||
<CodeBlock {...props}>
|
||||
<Pre>{props.children}</Pre> {/* [!code highlight] */}
|
||||
</CodeBlock>
|
||||
),
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
See [Markdown](/docs/markdown#codeblock) for usages.
|
||||
|
||||
### Keep Background
|
||||
|
||||
Use the background color generated by Shiki (the Rehype Code plugin).
|
||||
|
||||
```tsx
|
||||
import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
|
||||
|
||||
<MDX
|
||||
components={{
|
||||
pre: ({ ref: _ref, ...props }) => (
|
||||
<CodeBlock keepBackground {...props}>
|
||||
<Pre>{props.children}</Pre>
|
||||
</CodeBlock>
|
||||
),
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
### Icons
|
||||
|
||||
Specify a custom icon by passing an `icon` prop to `CodeBlock` component.
|
||||
|
||||
By default, the icon will be injected by the custom Shiki transformer.
|
||||
|
||||
```js title="config.js"
|
||||
console.log('js');
|
||||
```
|
||||
79
content/docs/mdx/codeblock.zh.mdx
Normal file
79
content/docs/mdx/codeblock.zh.mdx
Normal file
@ -0,0 +1,79 @@
|
||||
---
|
||||
title: 代码块
|
||||
description: 在文档中添加代码块
|
||||
---
|
||||
|
||||
<Wrapper>
|
||||
<div className="bg-fd-background rounded-lg prose-no-margin">
|
||||
|
||||
```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);
|
||||
```
|
||||
|
||||
</div>
|
||||
</Wrapper>
|
||||
|
||||
显示代码块，默认添加。
|
||||
|
||||
- 复制按钮
|
||||
- 自定义标题和图标
|
||||
|
||||
## 使用方法
|
||||
|
||||
将 pre 元素包装在 `<CodeBlock />` 中，它作为代码块的包装器。
|
||||
|
||||
```tsx
|
||||
import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
|
||||
|
||||
<MDX
|
||||
components={{
|
||||
// HTML `ref` attribute conflicts with `forwardRef`
|
||||
pre: ({ ref: _ref, ...props }) => (
|
||||
<CodeBlock {...props}>
|
||||
<Pre>{props.children}</Pre> {/* [!code highlight] */}
|
||||
</CodeBlock>
|
||||
),
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
有关用法，请参见 [Markdown](/docs/markdown#codeblock)。
|
||||
|
||||
### 保留背景
|
||||
|
||||
使用由 Shiki（Rehype Code 插件）生成的背景颜色。
|
||||
|
||||
```tsx
|
||||
import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
|
||||
|
||||
<MDX
|
||||
components={{
|
||||
pre: ({ ref: _ref, ...props }) => (
|
||||
<CodeBlock keepBackground {...props}>
|
||||
<Pre>{props.children}</Pre>
|
||||
</CodeBlock>
|
||||
),
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
### 图标
|
||||
|
||||
通过向 `CodeBlock` 组件传递 `icon` 属性来指定自定义图标。
|
||||
|
||||
默认情况下，图标将由自定义 Shiki 转换器注入。
|
||||
|
||||
```js title="config.js"
|
||||
console.log('js');
|
||||
```
|
||||
26
content/docs/mdx/heading.mdx
Normal file
26
content/docs/mdx/heading.mdx
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Heading
|
||||
description: Heading components for your MDX documentation
|
||||
preview: heading
|
||||
---
|
||||
|
||||
The heading component which automatically adds the `id` prop.
|
||||
|
||||
## Usage
|
||||
|
||||
Add it to your MDX components, from `h1` to `h6`.
|
||||
|
||||
```mdx
|
||||
import { Heading } from 'fumadocs-ui/components/heading';
|
||||
|
||||
<MDX
|
||||
components={{
|
||||
h1: (props) => <Heading as="h1" {...props} />,
|
||||
h2: (props) => <Heading as="h2" {...props} />,
|
||||
h3: (props) => <Heading as="h3" {...props} />,
|
||||
h4: (props) => <Heading as="h4" {...props} />,
|
||||
h5: (props) => <Heading as="h5" {...props} />,
|
||||
h6: (props) => <Heading as="h6" {...props} />,
|
||||
}}
|
||||
/>
|
||||
```
|
||||
26
content/docs/mdx/heading.zh.mdx
Normal file
26
content/docs/mdx/heading.zh.mdx
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: 标题
|
||||
description: MDX 文档的标题组件
|
||||
preview: heading
|
||||
---
|
||||
|
||||
自动添加 `id` 属性的标题组件。
|
||||
|
||||
## 使用方法
|
||||
|
||||
将其添加到您的 MDX 组件中，从 `h1` 到 `h6`。
|
||||
|
||||
```mdx
|
||||
import { Heading } from 'fumadocs-ui/components/heading';
|
||||
|
||||
<MDX
|
||||
components={{
|
||||
h1: (props) => <Heading as="h1" {...props} />,
|
||||
h2: (props) => <Heading as="h2" {...props} />,
|
||||
h3: (props) => <Heading as="h3" {...props} />,
|
||||
h4: (props) => <Heading as="h4" {...props} />,
|
||||
h5: (props) => <Heading as="h5" {...props} />,
|
||||
h6: (props) => <Heading as="h6" {...props} />,
|
||||
}}
|
||||
/>
|
||||
```
|
||||
41
content/docs/mdx/index.mdx
Normal file
41
content/docs/mdx/index.mdx
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
title: MDX
|
||||
description: Default MDX Components
|
||||
index: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
The default MDX components include Cards, Callouts, Code Blocks and Headings.
|
||||
|
||||
```ts
|
||||
import defaultMdxComponents from 'fumadocs-ui/mdx';
|
||||
```
|
||||
|
||||
### Relative Link
|
||||
|
||||
To support links with relative file path in `href`, override the default `a` component with:
|
||||
|
||||
```tsx
|
||||
import { createRelativeLink } from 'fumadocs-ui/mdx';
|
||||
import { source } from '@/lib/source';
|
||||
|
||||
const page = source.getPage(['...']);
|
||||
|
||||
return (
|
||||
<MdxContent
|
||||
components={{
|
||||
// override the `a` tag
|
||||
a: createRelativeLink(source, page),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
```mdx
|
||||
[My Link](./file.mdx)
|
||||
```
|
||||
|
||||
[Example: `../(integrations)/open-graph.mdx`](<../(integrations)/open-graph.mdx>)
|
||||
|
||||
<Callout type="warn">Server Component only.</Callout>
|
||||
41
content/docs/mdx/index.zh.mdx
Normal file
41
content/docs/mdx/index.zh.mdx
Normal file
@ -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 (
|
||||
<MdxContent
|
||||
components={{
|
||||
// override the `a` tag
|
||||
a: createRelativeLink(source, page),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
```mdx
|
||||
[My Link](./file.mdx)
|
||||
```
|
||||
|
||||
[示例: `../(integrations)/open-graph.mdx`](<../(integrations)/open-graph.mdx>)
|
||||
|
||||
<Callout type="warn">仅限服务器组件。</Callout>
|
||||
@ -17,6 +17,9 @@
|
||||
"---UI---",
|
||||
"customisation",
|
||||
"theme",
|
||||
"search"
|
||||
"search",
|
||||
"components",
|
||||
"mdx",
|
||||
"layouts"
|
||||
]
|
||||
}
|
||||
|
||||
@ -17,6 +17,9 @@
|
||||
"---UI---",
|
||||
"customisation",
|
||||
"theme",
|
||||
"search"
|
||||
"search",
|
||||
"components",
|
||||
"mdx",
|
||||
"layouts"
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user