博客功能测试：R2、MDX 与进阶语法

这篇文章测试什么#

这是一篇用于验收博客渲染和部署链路的测试文章。它会把常见的内容类型尽量放在同一页里，方便一次性检查样式、脚本和远程资源。

R2 远程图片#

下面是一张直接引用 R2 的单图，点击后应能打开灯箱：

图片网格#

下面四张图来自同一个 R2 相册，用来测试 [grid] 语法和不同宽高比的排版：

文本与列表#

这段包含 粗体、斜体、删除线、行内代码 和一个外部链接。

• 无序列表第一项
• 无序列表第二项
  • 嵌套列表项
  • 另一个嵌套列表项

1. 有序列表第一项
2. 有序列表第二项
3. 有序列表第三项

• 已验证 R2 自定义域名
• 已验证相册远程图片
• 已验证 Cloudflare Pages 自动部署
• 待验证移动端灯箱手势

引用与表格#

把服务跑在自己手里，把内容留在自己的域名下。

—— 阿杰

Wiki Link 内部链接#

Firefly 支持 Obsidian 风格的 Wiki Link。单独成段时，会读取目标文章的信息并渲染为卡片：

把博客搭到 Cloudflare：从 Firefly 模板到 R2、Twikoo 和自动部署

记录这个博客从 Firefly 模板起步，接入 Cloudflare Pages、R2、Twikoo、Pagefind 与 Web Analytics 的全过程，并整理实际踩过的缓存、域名、统计、构建和内容测试坑。

2026-10-29站点维护#博客搭建#Cloudflare#Astro#R2#Twikoo#踩坑记录

正文中也可以使用：请参阅 加密文章测试，或者在页面内跳转到 数学公式。

剧透文本#

剧透内容默认隐藏，点击后展开：这是一段被隐藏的 测试文本。

MDX 内置组件#

数学公式#

行内公式：$E = mc^2$。

块级公式：

再来一个矩阵：

化学方程式：

Mermaid 图表#

代码与代码组#

带标题、行号和行标记的 TypeScript 代码块：

1
type TestResult = "pass" | "fail";
2

3
function checkImage(status: number): TestResult {
4
  return status === 200 ? "pass" : "fail";
5
}
6

7
console.log(checkImage(200));

带标签页的 Markdown 代码组：

1
npm install

1
pnpm install

1
npm install

1
pnpm install

视频嵌入示例#

视频通过 iframe 嵌入，以下只展示语法，不实际加载外部播放器：

1
<iframe
2
  width="100%"
3
  height="468"
4
  src="https://www.youtube.com/embed/VIDEO_ID"
5
  title="视频播放器"
6
  frameborder="0"
7
  allowfullscreen
8
></iframe>

提醒框#

GitHub 卡片#

验收清单#

• 页面无控制台报错
• R2 图片能加载并打开灯箱
• 图片网格在手机端不溢出
• Wiki Link 卡片正常
• MDX 组件正常渲染
• 数学公式、Mermaid 和代码组正常渲染
• GitHub 卡片能显示仓库信息
• 评论区和访问量统计正常

小结#

如果这些内容都能正常显示，说明首页、文章页、R2 图片、相册、项目、MDX、Wiki Link、Markdown 扩展和代码高亮的主链路基本跑通了。