示例 MDX组件

时间轴与图片展示示例

| 3 分钟阅读 | --

这是一篇 .mdx 示例文章，演示三个能力：封面图、正文插图（点击放大）、时间轴组件。验证完成后可以删除本文，或把 frontmatter 中的 draft 改为 true。

一、封面图

在 frontmatter 中添加 cover 字段即可，图片放在 public/images/ 目录下：

cover: /images/demo/cover.svg

封面图会自动显示在文章列表卡片顶部和文章页标题下方，并作为分享时的 og:image。

二、正文插图

使用标准 Markdown 语法插入图片，点击图片可以全屏放大，按 Esc 或点击遮罩关闭：

正文插图示例

三、时间轴

在 .mdx 文章顶部 import 组件后即可使用：

项目启动

完成需求调研和技术选型，确定使用 Astro 搭建博客。

功能完善

陆续接入了搜索、浏览计数、点赞等功能，支持 Markdown 加粗、行内代码 等语法。

  • 列表项也可以正常使用
  • 支持暗色模式
组件化升级

引入 MDX，支持在任意文章中插入时间轴等通用组件。

时间轴使用方法

新建 .mdx 文章（注意扩展名是 .mdx 不是 .md），在 frontmatter 之后 import 组件：

import Timeline from "../../components/Timeline.astro";
import TimelineItem from "../../components/TimelineItem.astro";

<Timeline>
  <TimelineItem date="2026-01" title="阶段一">
    这里写说明文字，支持 Markdown 语法。
  </TimelineItem>
  <TimelineItem date="2026-03" title="阶段二">
    `title` 属性可以省略，只显示时间。
  </TimelineItem>
</Timeline>