元件 | Fumadocs

概覽

您還可以使用以下元件：

MDX 元件

預設的 MDX 元件包含卡片 (Cards) 、提示框 (Callouts) 、程式碼區塊與標題 (Headings) 。

import defaultMdxComponents from 'fumadocs-ui/mdx';

相對連結

僅適用於伺服器元件。

若要讓 href 中的連結支援相對檔案路徑，請以下列方式覆寫預設的 a 元件：

app/docs/[[...slug]]/page.tsx

import { createRelativeLink } from 'fumadocs-ui/mdx';
import { source } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';

const page = source.getPage(['...']);

return (
  <MdxContent
    components={getMDXComponents({
      // 覆寫 `a` 標籤
      a: createRelativeLink(source, page),
    })}
  />
);

在 Astro 中，請將它傳給 <Content />，它會以與 Astro MDX 相同的方式算繪：

src/pages/docs/[...slug].astro

<Content components={{ a: createRelativeLink(source, page) }} />

[My Link](./file.mdx)

範例：../../(integrations)/feedback.mdx

元件

概覽複製錨點連結

手風琴

Auto Type Table

橫幅

程式碼區塊

程式碼區塊（Dynamic）

檔案

GitHub 資訊

關聯圖檢視

可縮放圖片

內嵌目錄

步驟

頁籤

型別表格

MDX 元件複製錨點連結

相對連結複製錨點連結

本頁目錄

概覽

MDX 元件

相對連結