MkSaaS Docs
MkSaaS Docs
Homepage

介绍

快速入门什么是 Fumadocs对比

设置

手动安装静态导出

写作

Markdown国际化

UI

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

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

文件

在文档中显示文件结构

GitHub 信息

显示您的 GitHub 仓库信息

Table of Contents

使用方法