MDX 全组件演示帖（Mahiro-Blog）
一篇用于展示 Mahiro-Blog 当前 MDX 组件能力的示例文章，涵盖提示框、卡片、时间线、Diff 对比、GitHub 卡片等。
检测到本篇文章有变更，已为你高亮差异内容。
MDX 全组件演示
这篇文章是一个“功能样板间”。你可以直接复制其中任意组件片段到自己的 .mdx 文章里。
本页组件目录（移动端可折叠）
提示框 Alerts
这是一个信息提示框，适合放背景说明、注意事项、概念解释。
这是一个成功提示框，适合放“操作已完成”“配置成功”等内容。
这是一个警告提示框，适合提醒兼容性、风险项、前置条件。
这是一个错误提示框，适合放排错建议和失败原因。
自定义提示框 AlertBase
这是通过 AlertBase 自定义出来的提示框，你可以自由组合 type 和 icon。
在生产环境启用新功能前，建议先在预览环境回归测试。
折叠与键盘（Collapse + Kbd）
点击展开：常用快捷键
- Ctrl + K：打开搜索
- Ctrl + S：保存草稿
- Shift + Enter：换行
图片对比 Diff
时间线 TimeLine
链接与功能卡片
组件化内容
在 MDX 内直接使用组件，构建更丰富的图文内容。
站点导航与友链卡片
Mahiro 导航
收录优质开发与设计资源，持续更新。
Astro
Build faster websites with less client-side JavaScript.
项目与仓库卡片
Mahiro-Blog
Open Source一个偏内容创作体验的 Astro 博客模板，支持写作后台与丰富组件。
Loading repository information...
Expose your TCP/UDP port behind full-cone NAT to the Internet.
Astro：用于构建高性能内容网站的现代框架。
GitHub 统计卡片
MhYa123 / Mahiro-Blog
Loading...
Showcase（站点可达性小徽章）
卡片模板 Card / CardGroup
卡片 A
适合放简要结论、步骤摘要或模块说明。
卡片 B
可以和 FeatureCard、LinkCard 混用，统一视觉节奏。
卡片 C
支持响应式列数，移动端会自动堆叠。
数学公式（KaTeX：行内 + 块级）
行内公式示例：当学习率使用余弦退火时，常见写法是 。
块级公式示例（高斯分布概率密度）：
再来一个矩阵示例：
高亮代码块（行号 / 复制按钮）
下面两个代码块会走你当前站点的代码增强链路（语言标签、行号、复制按钮）。
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复制建议
如果你是第一次用 MDX，建议先从这三个组件开始：
Info / Warning（表达结构更清晰）LinkCard（外链更美观）GitHubRepoCard（技术文章里很实用）
等内容稳定后，再逐步加入 Diff、TimeLine 这类增强组件。
Comments