这个包包含了一系列用于 MDX 的 React 组件。 ## 组件列表 - [组件列表](#组件列表) - [MDXCollapse](#mdxcollapse) - [示例](#示例) - [API](#api) - [MDXTabs](#mdxtabs) - [示例](#示例-1) - [API](#api-1) - [MDXIcon](#mdxicon) - [示例](#示例-2) - [API](#api-2) - [MDXChat](#mdxchat) - [示例](#示例-3) - [API](#api-3) - [MDXText](#mdxtext) - [示例](#示例-4) - [API](#api-4) - [MDXImage](#mdximage) - [示例](#示例-5) - [API](#api-5) - [MDXHide](#mdxhide) - [示例](#示例-6) - [API](#api-6) - [MDXAlbum](#mdxalbum) - [示例](#示例-7) - [API](#api-7) - [MDXVideo](#mdxvideo) - [示例](#示例-8) - [API](#api-8) - [MDXBangumiCollections](#mdxbangumicollections) - [示例](#示例-9) - [API](#api-9) - [MDXBangumiSubject](#mdxbangumisubject) - [示例](#示例-10) - [API](#api-10) - [MDXBangumiTile](#mdxbangumitile) - [示例](#示例-11) - [API](#api-11) - [MDXBangumiTimeline](#mdxbangumitimeline) - [示例](#示例-12) - [API](#api-12) - [MDXTimeline](#mdxtimeline) - [示例](#示例-13) - [API](#api-13) - [MDXEmoji](#mdxemoji) - [示例](#示例-14) - [API](#api-14) - [MDXLink](#mdxlink) - [示例](#示例-15) - [API](#api-15) - [MDXMusic](#mdxmusic) - [示例](#示例-16) - [API](#api-16) - [MDXTable](#mdxtable) - [示例](#示例-17) - [API](#api-17) - [FriendLink](#friendlink) - [示例](#示例-18) - [API](#api-18) - [ReaderWall](#readerwall) - [示例](#示例-19) - [API](#api-19) --- ## MDXCollapse 一个允许你在 MDX 文件中创建可折叠内容区域（也称为“手风琴”或“折叠面板”）的组件。 ### 示例使用 `MDXCollapse` 包裹一个或多个 `MDXCollapse.Panel` 子组件。每个 `Panel` 都需要一个 `header` 属性作为其可见的标题。 ```js ### 这是一个折叠面板

这里是折叠面板中的内容。

你可以放入任何 Markdown 语法或者其他的 React 组件。

这是第二个面板的内容。

```

这里是折叠面板中的内容。

你可以放入任何 Markdown 语法或者其他的 React 组件。

这是第二个面板的内容。

添加 `accordion` 属性后，同时只能展开一个面板。当你打开一个新的面板时，其他已打开的面板会自动关闭。 ```js

内容 1

内容 2

```

内容 1

内容 2

使用 `defaultActiveKey` 属性可以指定在页面加载时默认展开的面板。该属性接受一个由面板索引（从 `0` 开始的字符串）组成的数组。 ```js {/* 下面的例子会默认展开第一个和第三个面板 */}

内容 1

内容 2

内容 3

```

内容 1

内容 2

内容 3

### API | 属性 | 类型 | 默认值 | 描述 | | ------------------ | ----------------- | ------- | ----------------------------------------- | | `children` | `React.ReactNode` | - | 一个或多个 `MDXCollapse.Panel` 组件。 | | `accordion` | `boolean` | `false` | 是否开启手风琴模式。 | | `defaultActiveKey` | `string[]` | `[]` | 默认展开的面板的 key 数组（索引字符串）。 | | 属性 | 类型 | 默认值 | 描述 | | ---------- | ----------------- | ------ | ---------------------- | | `header` | `string` | - | 面板的标题。 | | `children` | `React.ReactNode` | - | 面板展开后显示的内容。 | --- ## MDXTabs 一个允许你在 MDX 文件中创建页签的组件，封装了 Ant Design 的卡片式页签。 ### 示例使用 `MDXTabs` 包裹一个或多个 `MDXTabs.TabPane` 子组件。每个 `TabPane` 都需要一个 `label` 属性作为其页签标题。 ```js

这里是页签 1 的内容。

这里是页签 2 的内容。

```

这里是页签 1 的内容。

这里是页签 2 的内容。

使用 `defaultActiveKey` 属性可以指定在页面加载时默认激活的页签。该属性接受页签的索引（从 `0` 开始的字符串）。如果未提供，则默认激活第一个页签。 ```js {/* 下面的例子会默认激活第二个页签 */}

内容 1

内容 2

```

内容 1

内容 2

### API | 属性 | 类型 | 默认值 | 描述 | | ------------------ | ----------------- | ------ | -------------------------------------------- | | `children` | `React.ReactNode` | - | 一个或多个 `MDXTabs.TabPane` 组件。(必需) | | `defaultActiveKey` | `string` | `'0'` | 默认激活的面板的 key (索引字符串)。 | | 属性 | 类型 | 默认值 | 描述 | | ---------- | ----------------- | ------ | --------------------------- | | `label` | `string` | - | 页签的标题。(必需) | | `children` | `React.ReactNode` | - | 页签激活后显示的内容。(必需) | --- ## MDXIcon 一个通用的、自闭合的图标组件，用于在 MDX 中方便地插入预设的图标。 ### 示例该组件是一个自闭合组件，通过 `name` 属性指定要显示的图标。它会自动渲染一个带有预设颜色和右边距的图标。 ```js 已完成的任务已作废的任务待处理的任务一条提示信息一个警告提醒一个问题或帮助图标 ``` 已完成的任务已作废的任务待处理的任务一条提示信息一个警告提醒一个问题或帮助图标 ### API | 属性 | 类型 | 默认值 | 描述 | | ---- | -------------------------------------------------------------------- | ------ | ------------------ | | `name` | `'check' \| 'close' \| 'pending' \| 'info' \| 'warning' \| 'question'` | - | 要显示的图标名称。(必需) | --- ## MDXChat 一个用于在 MDX 中模拟聊天记录的组件，非常适合展示对话场景。 ### 示例使用 `MDXChat` 作为聊天窗口容器，并用 `MDXChat.Message` 来添加每一条消息。你可以通过 `align="right"` 来区分你自己的消息。 ```js 这个新组件看起来很酷！是的，我正在考虑如何实现它。如果没提供头像，会显示一个默认的占位头像。 ``` 这个新组件看起来很酷！是的，我正在考虑如何实现它。如果没提供头像，会显示一个默认的占位头像。 ### API | 属性 | 类型 | 默认值 | 描述 | | ---------- | ----------------- | ------ | -------------------------------------------- | | `title` | `string` | - | 聊天窗口顶部的标题。 | | `children` | `React.ReactNode` | - | 一个或多个 `MDXChat.Message` 组件。(必需) | | 属性 | 类型 | 默认值 | 描述 | | ---------- | ------------------- | -------- | -------------------------------------------------------------------------- | | `name` | `string` | - | 发送消息的人的昵称。(必需) | | `avatar` | `string` | - | 消息发送者的头像图片 URL。如果未提供，则显示基于昵称首字母的默认头像。 | | `align` | `'left' \| 'right'` | `'left'` | 消息的对齐方式。`'left'` (对方)，`'right'` 用于表示“我”。 | | `time` | `string` | - | 消息发送的时间戳。 | | `children` | `React.ReactNode` | - | 消息的具体内容。(必需) | --- ## MDXText 一个灵活的文本组件，用于在 MDX 中快速应用预设的颜色、样式和提示。 ### 示例使用 `color` 属性来应用预设的文本颜色。 ```js 这是主要颜色的文本。这是一条成功信息。这是一条危险警告。 ``` 这是主要颜色的文本。这是一条成功信息。这是一条危险警告。可以添加删除线或使用弱化（暗牧）效果。 ```js 这段文字被划上删除线。这段文字被弱化显示。 ``` 这段文字被划上删除线。
这段文字被弱化显示。通过 `tooltip` 属性，你可以为文本添加一个悬浮提示。 ```js 鼠标悬浮在这里查看效果。 ``` 鼠标悬浮在这里查看效果。所有属性都可以自由组合。 ```js 这是一段正常的文本，但这个部分是红色的、带删除线且有提示。 ``` 这是一段正常的文本，但这个部分是红色的、带删除线且有提示。 ### API | 属性 | 类型 | 默认值 | 描述 | | --------- | ---------------------------------------------------------------------- | -------- | ---------------------------------------------------------- | | `children` | `React.ReactNode` | - | 要渲染的文本内容。(必需) | | `color` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | - | 预设的文本颜色。 | | `delete` | `boolean` | `false` | 是否添加删除线样式。 | | `dim` | `boolean` | `false` | 是否使用弱化（暗牧）样式。 | | `tooltip` | `string` | - | 鼠标悬浮时显示的提示文本。 | | `className` | `string` | - | 允许传入自定义的 CSS 类名。 | --- ## MDXImage 一个用于在 MDX 中显示图片的组件，支持图片预览和自动 URL 解析。 ### 示例直接使用 `src` 属性来指定图片的路径。如果路径是相对路径，它会自动拼接基准 URL。 ```js ![示例文本](https://cdn.sumiler.com/usr/uploads/2022/05/3422573623.jpg) ``` ![示例文本](https://cdn.sumiler.com/usr/uploads/2022/05/3422573623.jpg) ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `src` | `string \| Blob` | - | 图片的源路径或 Blob 对象。(必需) | | `alt` | `string` | `''` | 图片的替代文本，同时会作为图片下方的注解显示。 | | `style` | `React.CSSProperties` | - | 自定义图片的样式。 | --- ## MDXHide 一个用于根据用户权限有条件地隐藏内容的组件。只有当用户角色为 `admin` 时，其包裹的子内容才会被渲染。对于其他用户或未登录用户，会显示一个提示块。 **注意：** 此组件是一个客户端组件，依赖于 `AuthProvider` 上下文。 ### 示例将需要根据权限显示的内容包裹在 `MDXHide` 组件中。 ```js 比如这里我放了一份涩图，只有聪明的人才能看到 ``` 比如这里我放了一份涩图，只有聪明的人才能看到 ### API | 属性 | 类型 | 默认值 | 描述 | | ---------- | ----------------- | ------ | ---------------------------------- | | `children` | `React.ReactNode` | - | 需要根据权限隐藏或显示的内容。(必需) | --- ## MDXAlbum 一个用于创建相册布局的组件，可以将一组图片（通常是 `MDXImage` 或 Markdown 图片）排列成一个响应式的网格。 ### 示例将多个 Markdown 图片或 `MDXImage` 组件包裹在 `MDXAlbum` 中，即可创建一个相册。组件会自动处理布局和样式。 ```js ![98537196_p4_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/05/3422573623.jpg) ![98001658_p0_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/05/549333538.jpg) ![98537196_p5_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/05/3750651281.jpg) ![98671673_p0_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/05/1937134526.jpg) ![95447912_p3_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/07/1481156125.jpg) ![78236671_p0_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/07/2180008167.jpg) ``` ![98537196_p4_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/05/3422573623.jpg) ![98001658_p0_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/05/549333538.jpg) ![98537196_p5_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/05/3750651281.jpg) ![98671673_p0_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/05/1937134526.jpg) ![95447912_p3_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/07/1481156125.jpg) ![78236671_p0_master1200.jpg](https://cdn.sumiler.com/usr/uploads/2022/07/2180008167.jpg) ### API | 属性 | 类型 | 默认值 | 描述 | | ---------- | ----------------- | ------ | ---------------------------------- | | `children` | `React.ReactNode` | - | 一组图片组件（例如 `MDXImage` 或 ``）。(必需) | --- ## MDXVideo 一个用于在 MDX 中嵌入来自不同平台（如 Bilibili、抖音）的响应式视频的组件。 ### 示例使用 `platform="bilibili"` 并提供视频的 `BV` 号作为 `id`。组件会自动处理为 16:9 的响应式布局。 ```js ``` 使用 `platform="douyin"` 并提供视频的 `vid` 作为 `id`。组件会根据桌面端和移动端自动调整布局和宽高比。 ```js ``` ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `platform` | `'bilibili' \| 'douyin'` | - | 视频来源平台。(必需) | | `id` | `string` | - | 视频的唯一标识符（Bilibili 的 BV 号或抖音的 vid）。(必需) | --- ## MDXBangumiCollections 一个用于展示 Bangumi 收藏列表的组件，采用卡片网格布局并支持分页加载。通过 `type` 属性指定条目类型。 ### 示例使用默认的动画类型展示在看、想看、看过三个页签下的收藏条目。 ```js ``` ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `type` | `'book' \| 'anime' \| 'music' \| 'game'` | `'anime'` | 条目类型，内部映射为 Bangumi API 的 `subject_type`。 | --- ## MDXBangumiSubject 一个用于展示单个 Bangumi 条目详情的卡片组件，左侧封面图，右侧为信息与评分。 ### 示例传入条目的数字 `id`，组件会请求 Bangumi 接口并渲染卡片。 ```js ``` ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `id` | `number` | - | Bangumi `subject` 的数字 ID。(必需) | | `className` | `string` | - | 可选的自定义样式类名。 | --- ## MDXBangumiTile 一个用于展示用户在 Bangumi 的季度进度瓦片（SVG）的组件，支持横向滚动查看。 ### 示例指定用户名来获取其进度瓦片。 ```js ``` ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `username` | `string` | `'sumiler'` | 用户名。 | --- ## MDXBangumiTimeline 一个用于拉取并展示 Bangumi 用户时间线 RSS 的组件，内部复用 `MDXTimeline` 进行展示。 ### 示例指定用户名并可设置展示条数上限。 ```js ``` ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `username` | `string` | `'sumiler'` | 用户名，用于拉取其时间线 RSS。 | | `limit` | `number` | `20` | 展示的条目数量上限。 | --- ## MDXTimeline 一个通用的时间线展示组件，仅包含时间与内容两部分；内容支持 MDX 语法。 ### 示例使用内层子组件的写法，不直接传入 `items`。 ```js 示例描述里面也支持 mdx 语法 ``` 示例描述里面也支持 mdx 语法 ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `children` | `React.ReactNode` | - | 一个或多个 `MDXTimeline.Item` 子组件。(必需) | | `loading` | `boolean` | `false` | 是否处于加载状态。 | | `error` | `string` | - | 错误消息文本。 | | `limit` | `number` | `20` | 展示条数上限。 | | `dateFormat` | `string` | `'YYYY年MM月DD日 HH:mm'` | 日期格式。 | | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `time` | `string` | - | 时间戳（ISO 字符串或可解析的日期文本）。(必需) | | `children` | `React.ReactNode` | - | 条目内容（支持 MDX 语法）。(必需) | --- ## MDXEmoji 一个用于在正文中插入行内表情图片的组件，默认会与文本基线对齐，适合和文字混排使用。它也可以配合 `remark-owo-emoji` 插件，把自定义标记自动转换成该组件。 ### 示例通过 `src` 指定图片地址，`size` 控制表情显示尺寸。组件会自动开启懒加载。 ```js 今天心情很好，继续写文档。 ``` 今天心情很好，继续写文档。 `size` 同时支持数字和字符串，方便在不同字号的正文里微调显示效果。 ```js 小号默认大号 ``` 小号默认大号 ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `src` | `string` | - | 表情图片地址。(必需) | | `alt` | `string` | `''` | 图片的替代文本。 | | `size` | `number \| string` | `24` | 表情显示尺寸，单位为像素。 | | `className` | `string` | - | 自定义类名。 | --- ## MDXLink 一个用于智能处理链接跳转的组件。它会根据 `href` 自动判断内外链，外部链接默认在新窗口打开，内部链接与锚点链接保持当前窗口跳转。 ### 示例在 `MDXRender` 中，普通 Markdown 链接会自动映射为 `MDXLink`，通常不需要手动写组件标签。 ```js [站内文章](/posts/hello-world) [外部站点](https://example.com) ``` [站内文章](/posts/hello-world) [外部站点](https://example.com) 如果你使用原生 `` 标签，`MDXRender` 也会自动把它交给 `MDXLink` 处理，因此仍然可以透传 `title`、`className` 等原生属性。 ```js 带标题的外部链接 ``` 带标题的外部链接 ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `href` | `string` | - | 链接地址。外部链接（`http://`、`https://` 或 `//`）默认新窗口打开。 | | `children` | `React.ReactNode` | - | 链接文本或子元素。 | | `...rest` | `React.AnchorHTMLAttributes` | - | 其余原生 `` 属性，会透传到底层元素。 | --- ## MDXMusic 一个基于网易云数据的音乐播放组件，会自动请求歌曲详情、播放地址和歌词，并使用 APlayer 渲染播放器。 ### 示例传入歌曲 `id` 后，组件会自动加载歌曲信息并渲染播放器。默认展示歌词面板。 ```js ``` 通过 `showLyric={false}` 可以只保留播放器，适合在内容区紧凑展示。 ```js ``` ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `id` | `string` | - | 网易云歌曲 ID。(必需) | | `level` | `'lossless' \| 'hires' \| 'exhigh' \| 'higher' \| 'standard' \| string` | `'standard'` | 请求播放地址时使用的音质等级。 | | `autoPlay` | `boolean` | `false` | 是否在组件加载后自动播放。 | | `showLyric` | `boolean` | `true` | 是否展示歌词面板。 | | `className` | `string` | - | 自定义类名。 | --- ## MDXTable 一个用于增强 Markdown 表格展示的组件。在 `MDXRender` 中，普通 Markdown 表格会自动映射为 `MDXTable`，并支持横向滚动与自动换行切换。 ### 示例直接写标准 Markdown 表格即可，渲染后会自动套用 Ant Design Table，并在右上角提供“横向滚动 / 自动换行”切换按钮。 ```js | 字段 | 说明 | 备注 | | --- | --- | --- | | `name` | 用户名 | 支持较长文本自动换行 | | `status` | 状态 | 默认优先横向滚动 | | `description` | 描述信息 | 单元格内容支持 MDX 渲染结果 | ``` | 字段 | 说明 | 备注 | | --- | --- | --- | | `name` | 用户名 | 支持较长文本自动换行 | | `status` | 状态 | 默认优先横向滚动 | | `description` | 描述信息 | 单元格内容支持 MDX 渲染结果 | ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `children` | `React.ReactNode` | - | Markdown 表格转换后的表头与表体内容。(必需) | | `bordered` | `boolean` | `true` | 是否展示表格边框。 | | `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | 表格尺寸。 | --- ## FriendLink 一个用于展示友情链接列表的组件，会自动请求已审核通过的友链数据，并以响应式卡片网格布局渲染。 ### 示例不传参数时会使用默认标题 `友情链接`，并在加载期间显示转圈占位。 ```js ``` 通过 `title` 可以覆盖组件顶部的标题文本。 ```js ``` ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `title` | `string` | `'友情链接'` | 卡片区域顶部标题。 | --- ## ReaderWall 一个用于展示读者互动排行的组件，会读取评论统计数据，并以头像墙的形式展示活跃读者。若读者填写了个人网站，点击后会在新窗口打开。 ### 示例不传参数时会使用默认标题 `读者墙`，并按评论数量从高到低展示用户。 ```js ``` 可以通过 `title` 调整卡片头部标题。 ```js ``` ### API | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `title` | `string` | `'读者墙'` | 卡片头部标题。 | ---

博客MDX组件文档