AI 摘要
这是一个 MDX 组件样板页，集中演示 Info、Warning、Collapse、Diff、TimeLine、LinkCard、GitHub 卡片、CardGroup、Steps、Tab、Quote、Badge、FileTree、VideoPlayer、ColorSwatch、TerminalWindow、Button 等组件用法，并展示表格、脚注、任务列表与动态 JSX 数据渲染。

ChatGPT-5.4-Mini

MDX 全组件演示

这篇文章是一个“功能样板间”。你可以直接复制其中任意组件片段到自己的 .mdx 文章里。

本页组件目录（移动端可折叠）

提示框 Alerts

这是一个信息提示框，适合放背景说明、注意事项、概念解释。

这是一个成功提示框，适合放“操作已完成”“配置成功”等内容。

这是一个警告提示框，适合提醒兼容性、风险项、前置条件。

这是一个错误提示框，适合放排错建议和失败原因。

自定义提示框 AlertBase

这是通过 AlertBase 自定义出来的提示框，你可以自由组合 type 和 icon。

在生产环境启用新功能前，建议先在预览环境回归测试。

折叠与键盘（Collapse + Kbd）

点击展开：常用快捷键

Ctrl + K：打开搜索
Ctrl + S：保存草稿
Shift + Enter：换行

图片对比 Diff

时间线 TimeLine

2024

项目初始化，完成基础页面结构与主题系统。
接入写作后台，支持文章创建、编辑、发布。

2025
2026

完善 MDX 组件生态，支持更强的内容表达。

链接与功能卡片

Astro 官网

Framework

FrontendSSG

现代内容站点框架，支持 Islands 架构与高性能静态输出。

Visit Astro 官网

组件化内容

在 MDX 内直接使用组件，构建更丰富的图文内容。

站点导航与友链卡片

Mahiro 导航

收录优质开发与设计资源，持续更新。

Astro

Build faster websites with less client-side JavaScript.

astro.build

项目与仓库卡片

Mahiro-Blog

Open Source

github.com

Astro TypeScript MDX

一个偏内容创作体验的 Astro 博客模板，支持写作后台与丰富组件。

mhya123

查看详情

Pinned

Loading repository information...

MikeWang000000 / Natter

Expose your TCP/UDP port behind full-cone NAT to the Internet.

2.2K 173 GPL-3.0 Python

withastro / astro

Astro：用于构建高性能内容网站的现代框架。

59.1K 3.4K NOASSERTION TypeScript

GitHub 统计卡片

MhYa123 / Mahiro-Blog

License

Stars

Forks

Watchers

Created:

Updated:

Default:

View on GitHub

Showcase（站点可达性小徽章）

GitHub

Astro

Mahiro

卡片模板 Card / CardGroup

卡片 A

适合放简要结论、步骤摘要或模块说明。

卡片 B

可以和 FeatureCard、LinkCard 混用，统一视觉节奏。

卡片 C

支持响应式列数，移动端会自动堆叠。

数学公式（KaTeX：行内 + 块级）

行内公式示例：当学习率使用余弦退火时，常见写法是 $\eta_t = \eta_{\min} + \frac{1}{2}(\eta_{\max}-\eta_{\min})(1+\cos(\frac{t\pi}{T}))$ 。

块级公式示例（高斯分布概率密度）：

f(x) = \frac{1}{\sigma\sqrt{2\pi}}\exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right)

再来一个矩阵示例：

A = \begin{bmatrix} 1 & 2 & 3 \\ 0 & 1 & 4 \\ 5 & 6 & 0 \end{bmatrix}

高亮代码块（行号 / 复制按钮）

下面两个代码块会走你当前站点的代码增强链路（语言标签、行号、复制按钮）。

type PostMeta = {
  title: string;
  slug: string;
  tags: string[];
  updatedAt?: string;
};

export function normalizeSlug(input: string): string {
  return input
    .trim()
    .toLowerCase()
    .replace(/\s+/g, "-")
    .replace(/[^a-z0-9\-]/g, "");
}

export function toPostMeta(title: string, tags: string[]): PostMeta {
  return {
    title,
    slug: normalizeSlug(title),
    tags: [...new Set(tags.map(t => t.trim()).filter(Boolean))],
    updatedAt: new Date().toISOString(),
  };
}

# install dependencies
pnpm install

# run dev server
pnpm dev

# type/lint checks
pnpm check

步骤条 Steps

非常适合教程类文章的流程引导，自动编号，带连接线。

安装依赖

使用你喜欢的包管理器安装项目依赖。推荐使用 pnpm。

配置环境变量

复制 .env.example 为 .env 并填入必要的 API 密钥。

启动开发服务器

运行 pnpm dev，然后打开 http://localhost:4321 查看效果。

部署上线

运行 pnpm build 构建，将 dist/ 目录推送到你的服务器或 CDN 平台。

选项卡 Tab

适合多平台配置对比、多语言代码示例等场景，点击切换无需跳转：

pnpm create astro@latest
pnpm install
pnpm dev

npm create astro@latest
npm install
npm run dev

yarn create astro
yarn
yarn dev

bun create astro@latest
bun install
bun dev

引用卡片 Quote

用于展示名人名言、重要引用或标注性文本：

Talk is cheap. Show me the code.

Linus Torvalds · Just for Fun

愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话。能做事的做事，能发声的发声。有一分热，发一分光，就令萧之光火一般，也可以在黑暗里发一点光，不必等候炬火。

鲁迅 · 《热风》

徽章 Badge

行内的状态标签，支持多种色彩、尺寸和图标。你可以把它清清爬爬地嵌入在任何文字里：

v4.2.0 稳定版实验性已废弃新功能进阶推荐

文件树 FileTree

用于展示项目目录结构，支持高亮和备注：

Mahiro-Blog 项目结构

src/
- components/
  - mdx/ // 所有 MDX 组件
  - widgets/ // 全局交互小组件
  - MainCard.astro
- content/
  - blog/
- layouts/
  - BaseLayout.astro
  - PostLayout.astro
- styles/
  - global.scss // 全局样式设计系统
public/
- images/
- favicon.png
astro.config.mjs
package.json
tsconfig.json

视频播放器 VideoPlayer

支持本地视频、Bilibili 和 YouTube 嵌入。下方是嵌入 B 站视频的示例：

Bilibili 嵌入视频演示

YouTube 嵌入视频演示

VideoPlayer 组件支持三种模式：src（本地视频）、bilibili（BV 号）、youtube（视频 ID）。

色板展示 ColorSwatch

用于设计类文章展示配色方案：

Primary

#6366f1

Secondary

#a855f7

Accent

#f472b6

Success

#22c55e

Warning

#eab308

Error

#ef4444

Sky

#0ea5e9

Teal

#14b8a6

作者卡片 AuthorCard

适用于文章末尾或者嘉宾栏，做一张优雅的作者名片：

Mahiro

站长 / 魔法使

Ciallo～(∠・ω<)⌒★。喜欢折腾各种有趣的前端技术，开源爱好者，梦想是写出能让人感到温暖的代码。

网格布局 Grid

打破 Markdown 枯燥的单列排版，你可以将内容、图片或其他的 MDX 组件放入网格容器中。移动端会自动塌陷为单列响应式。

极速响应

完美排版

终端窗口 TerminalWindow

对于开发者来说，代码块套上一个带有 macOS 小圆点的仿真终端容器，极客氛围拉满：

bash

# 一键部署你的个人博客
git clone https://github.com/mahiro/blog.git
cd blog
pnpm install
pnpm build

交互按钮 Button

不仅仅是文字链接，当需要一个重分量的 Call-To-Action (CTA) 时，你可以丢一个好看的按钮进去：

前往开源

框架名称	首推架构	渲染模式	适合搭配的宿主环境
Astro	Islands	SSG / SSR	极强的内容站点、博客
Next.js	App Router	SSR / RSC	复杂的面板、全栈交互应用
Nuxt	Vue 3	SSR / SSG	偏爱 Vue 生态的高交互站点

复制建议

如果你是第一次用 MDX，建议先从这三个组件开始：

Info / Warning（表达结构更清晰）
LinkCard（外链更美观）
GitHubRepoCard（技术文章里很实用）

如果你想挑战进阶，就可以像上文演示的一样，使用 export const 来结合局部 JSX 数据生成图表与复杂的动态排版！

OKLCH: 基于人眼感知的现代极品色彩空间模型，可以生成非常丝滑的渐变色谱，完爆传统 HSL。 ↩
rem: CSS 原生单位，意为 root em，会根据系统缩放按比例响应。 ↩

Thanks for reading!