LogoMkSaaS文档
LogoMkSaaS文档
首页

介绍

快速入门什么是 Fumadocs对比

设置

手动安装静态导出

写作

Markdown国际化

UI

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

可缩放图片

在文档中允许放大图片

banner

使用方法

在 MDX 组件中用 ImageZoom 替换 img。

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 组件
    }}
  />
);

现在,所有图片都将自动启用图片缩放功能。

![Test](/banner.png)

图片优化

如果未指定,将为 Next.js <Image /> 组件定义默认的 sizes 属性。

GitHub 信息

显示您的 GitHub 仓库信息

内联目录

在文档中添加内联目录

目录

使用方法
图片优化