MkSaaS文档
MkSaaS文档
首页

介绍

快速入门什么是 Fumadocs对比

设置

手动安装静态导出

写作

Markdown国际化

UI

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

可缩放图片

在文档中允许放大图片

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 仓库信息

可缩放图片

在文档中允许放大图片

目录

使用方法
图片优化