MDX 组件使用指南
345 字
2 分钟
MDX 组件使用指南
✨ AI 概括
点击按钮，AI 将为你生成这篇文章的摘要
本指南介绍博客中可用的自定义 MDX 组件。在 .mdx 文件中通过 import 导入后即可使用。
Timeline 时间轴
用于展示更新日志，左侧竖线 + 圆点 + 标签徽章。
参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
date | string | 是 | 日期文本，如 "2026-05-28" |
type | string | 否 | feature / improvement / fix / removal，默认 feature |
version | string | 否 | 版本号，如 "v1.2.0" |
示例
import Timeline from "../../components/mdx/Timeline.astro";
<Timeline date="2026-05-28" type="feature" version="v1.2.0">新增音乐页面，支持本地播放列表。</Timeline>
<Timeline date="2026-05-27" type="fix">修复移动端导航栏显示问题。</Timeline>MusicCard 音乐卡片
展示单首歌曲信息，包含封面、歌名、歌手和播放链接。
参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
title | string | 是 | 歌曲名称 |
artist | string | 是 | 歌手名称 |
cover | string | 否 | 封面图片 URL |
url | string | 否 | 播放链接 |
示例
import MusicCard from "../../components/mdx/MusicCard.astro";
<MusicCard title="知我" artist="国风堂" /><MusicCard title="女孩" artist="韦礼安" cover="/images/cover.jpg" url="https://music.163.com" />TagBadge 标签徽章
通用类型标签，用于标记内容类别。
参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
type | string | 是 | feature / improvement / fix / removal |
text | string | 否 | 自定义文本，不填则使用默认中文标签 |
示例
import TagBadge from "../../components/mdx/TagBadge.astro";
<TagBadge type="feature" /><TagBadge type="fix" text="Bug Fix" />使用须知
- 这些组件只能在
.mdx文件中使用，普通.md文件不支持import语法 - 导入路径根据组件所在位置确定，一般为
../../components/mdx/组件名.astro - 组件样式已内置，无需额外配置
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！
相关文章 智能推荐
1
音乐页面搭建指南
博客导航 博客音乐页面的完整搭建流程，包括本地歌曲配置、封面设置和云端音乐获取。
2
导航栏配置完全指南
博客导航 Firefly 博客导航栏配置教程，包含目录结构、两种添加方式、完整操作流程和注意事项
3
FireflyBlog AI 功能完整指南
博客导航 FireflyBlog 博客 AI 问答与文章概括功能的完整技术文档，包含架构设计、实现细节、配置说明和注意事项
4
网站导航页面自定义指南
博客导航 详细介绍如何自定义网站导航页面，包括分类管理、网站添加、颜色配置等
5
FireflyBlog + blogspring 前后端联调完整指南
博客导航 FireflyBlog 与 Spring Boot 后端联调的完整技术文档，包含架构设计、阿里云服务器配置、部署流程、前后端对接和常见问题排查
随机文章 随机推荐
评论区
欢迎来到一飞的博客！。
音乐
暂未播放
0:00 0:00
14
5
16
48,064
0 天
0 天前