可縮放圖片
讓文件中的圖片支援點擊放大檢視
Install to your codebase
Easier customization & control.
npx @fumadocs/cli@latest add image-zoom使用方式
請在您的 MDX 元件中，將 img 替換為 ImageZoom。
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
export function getMDXComponents(components?: MDXComponents) {
return {
...defaultComponents,
img: (props) => <ImageZoom {...(props as any)} />,
...components,
} satisfies MDXComponents;
}現在，所有圖片都會自動啟用圖片縮放功能。
圖片最佳化
在 Next.js 中，若 <Image /> 元件未指定 sizes 屬性，系統會自動為其設定預設值。
Lightbox
<Lightbox /> 內的可縮放圖片會在同一個檢視器中開啟，您可以使用方向鍵、滑動手勢或側邊按鈕瀏覽圖片。
用它包覆頁面內容，即可瀏覽整個頁面中的所有圖片：
import { Lightbox } from 'fumadocs-ui/components/image-zoom';
<DocsBody>
<Lightbox>
<MDX components={getMDXComponents()} />
</Lightbox>
</DocsBody>;圖說
圖片的標題 (title) 會顯示為圖說。
若要加入連結等豐富內容，請傳入 caption。
<ImageZoom
src="/notebook.png"
alt="Notebook Layout"
caption={
<>
See <a href="/docs/ui/layouts/notebook">Notebook Layout</a>
</>
}
/>圖庫
若要讓一組圖片可單獨瀏覽，請將它們包在另一個 <Lightbox /> 中，例如以網格排列：
<Lightbox>
<div className="not-prose grid grid-cols-2 gap-2">
</div>
</Lightbox>How is this guide?
最後更新於
General Translation
Ferry Health
assistant-ui
Inkeep