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

    内联目录

    在文档中添加内联目录

    目录

    使用方法
    图片优化