本博客内置了一套 Astro UI 组件，用于在 MDX 文章中丰富排版和表达。以下逐一展示它们的用法。
Badge — 标签徽章
可渲染为 <span> 或可点击的 <a> 链接。
纯文本标签
Astro TypeScript Tailwind可点击标签
GitHub 官方网站Props:
| Prop | 类型 | 说明 |
|---|---|---|
content | string | 必填 — 标签文字 |
href | string? | 可选 — 设为链接标签 |
Callout — 提示块
四种类型：note（默认）、warning、tip、danger。
Note
温馨提示
这是默认的 Note 类型。适合用作一般性说明或补充信息。
Tip
小技巧
使用 type="tip" 来突出有用的建议或最佳实践。
Warning
注意
当心！Warning 类型用于提醒潜在的问题。
Danger
危险操作
这个操作不可逆，执行前请三思。
不传 title（使用默认标题）
Note
不传 title 时会根据 type 自动显示默认标题（Note / Warning / Tip / Danger）。
Tip
比如这个 Tip 就没有传 title，自动显示为 “Tip”。
Props:
| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | "note" | "warning" | "tip" | "danger" | "note" | 提示类型，决定图标与配色 |
title | string? | 各类型的默认标题 | 可选的自定义标题 |
Divider — 装饰分隔线
一朵小 ✦ 配合渐隐线的视觉分隔，无需任何 props。
用法：
<Divider />Figure — 图片
带圆角、阴影和可选说明的图片容器。
Props:
| Prop | 类型 | 说明 |
|---|---|---|
src | string | 必填 — 图片 URL |
alt | string | 必填 — 替代文本 |
caption | string? | 可选 — 图注文字 |
LinkCard — 链接卡片
以卡片形式展示外部链接，自动提取域名。
Astro — 全能 Web 框架
Astro 是一个现代化的静态站点生成器，支持 Islands 架构、Markdown/MDX、多种 UI 框架集成。
astro.build
手动指定域名
Astro GitHub
Astro 的源代码仓库
github.com/withastro
Props:
| Prop | 类型 | 说明 |
|---|---|---|
href | string | 必填 — 链接 URL |
title | string | 必填 — 卡片标题 |
description | string? | 可选 — 描述文字 |
domain | string? | 可选 — 自定义域名显示 |
ProsCons — 优缺点对比
双栏布局，左侧绿色 Pros、右侧红色 Cons。
Pros
- • 静态生成，速度极快
- • 支持 Islands 架构
- • Markdown/MDX 原生支持
- • 丰富的集成生态
Cons
- • 动态路由功能有限
- • 插件生态不如 Next.js
- • SSR 场景仍需成熟
Props:
| Prop | 类型 | 说明 |
|---|---|---|
pros | string[] | 必填 — 优点列表 |
cons | string[] | 必填 — 缺点列表 |
Quote — 引用块
带图标和可选的作者 / 作品名标注。
想象力比知识更重要。因为知识是有限的，而想象力概括世界上的一切，推动着进步，并且是知识进化的源泉。
仅作者
不必太纠结于当下，也不必太忧虑未来，当你经历过一些事情的时候，眼前的风景已经和从前不一样了。
仅作品名
死并非生的对立面，而是作为生的一部分永存。
Props:
| Prop | 类型 | 说明 |
|---|---|---|
author | string? | 可选 — 作者名 |
title | string? | 可选 — 作品名（显示在作者右侧） |
Separator — 章节分隔线
带标题的分隔线，适合用作长文中的章节标头。
// 第一章
// 核心思想
Props:
| Prop | 类型 | 说明 |
|---|---|---|
title | string | 必填 — 分隔线上的标题文字 |
Steps — 步骤列表
带左侧竖线的步骤容器，适合教程/指南类内容。
第一步：安装依赖
运行 pnpm install 安装所有依赖。
第二步：启动开发服务器
运行 pnpm dev 启动本地开发环境。
第三步：编写内容
在 src/posts/ 目录下创建 MDX 文件。
第四步：构建部署
运行 pnpm build 生成静态文件并部署。
Note: Steps 是一个容器组件，每个子元素自动成为一步。无需额外 props。
Tabs — 标签页
配合 TabItem 使用，tabs 数组控制标签名，TabItem 按顺序对应内容面板。
MDX 让你在 Markdown 中直接使用 JSX 组件，兼具内容可读性与组件灵活性。
Astro 是一个一体化的 Web 框架，以零 JS 默认输出和 Islands 架构著称。
React 是一个用于构建用户界面的 JavaScript 库，由 Meta 维护。
在标签内使用其他组件
<Badge content="Demo" href="/" />标签页内可以嵌入任何 MDX 内容，包括代码块、图片、甚至嵌套其他组件。
Props (Tabs):
| Prop | 类型 | 说明 |
|---|---|---|
tabs | string[] | 必填 — 标签名称数组 |
TabItem 无 props，直接在默认插槽中填充内容。
YouTube — 嵌入式视频
响应式 YouTube iframe，支持设置开始播放时间。
指定开始时间
Props:
| Prop | 类型 | 说明 |
|---|---|---|
id | string | 必填 — YouTube 视频 ID |
start | string | number? | 可选 — 从第几秒开始播放 |
组合示例
将多个组件组合在一个页面布局中：
组合使用
这些组件可以自由嵌套和组合，让你的博客文章更生动。
好的工具让你事半功倍。
Pros
- • 组件化写作，逻辑清晰
- • 视觉统一，专注内容
- • 无需离开 Markdown
Cons
- • 需要记住各组件 Props
- • 复杂布局需搭配原始 HTML
完 感谢阅读！如有新的组件需求，欢迎提出。