LogoMkSaaS文档
LogoMkSaaS文档
首页

介绍

快速入门什么是 Fumadocs对比

设置

手动安装静态导出

写作

Markdown国际化

UI

概览主题搜索
组件
手风琴横幅代码块（动态）文件GitHub 信息可缩放图片内联目录根切换器步骤选项卡类型表格
MDX
X (Twitter)
组件

GitHub 信息

显示您的 GitHub 仓库信息

使用方法

import { GithubInfo } from 'fumadocs-ui/components/github-info';

<GithubInfo
  owner="fuma-nama"
  repo="fumadocs"
  // 您自己的 GitHub 访问令牌（可选）
  token={process.env.GITHUB_TOKEN}
/>;

建议将其添加到您的文档布局中，使用 links 选项：

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>;
}