欢迎 👋

这个博客平台基于广泛采用、可跨环境使用的工具构建：

react-markdown：React 标准 Markdown 解析器
react-syntax-highlighter：适配主题的代码高亮
Mermaid.js：交互图表渲染
remark-gfm：GitHub Flavored Markdown 支持

为什么选择这套技术？

✅ 兼容 Cloudflare Workers：无需 eval、new Function 或 WebAssembly ✅ 适配主题：代码块与图表跟随明暗模式 ✅ SEO 友好：服务端渲染 HTML，客户端完成水合 ✅ 标准语法：使用标准 Markdown，无需自定义格式

使用方法

在 content/blog/*.mdx 中创建或编辑文件
使用标准 Markdown frontmatter：title、date、summary、tags
运行 npm run dev 开始热重载开发，MDX 修改自动更新
按 Cloudflare Workers 部署指南部署模板支持的运行环境

丰富内容示例

带语法高亮的代码块

代码块自动适配明暗主题：

// TypeScript example with full syntax highlighting
import { notFound } from "next/navigation";
import { getPost } from "~/server/blog";
import { BlogContentWrapper } from "~/components/blog";

export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
  const post = await getPost((await params).slug, "zh-CN");

  if (!post) {
    notFound();
  }

  return <BlogContentWrapper content={post.content} />;
}

不同主题下的 JavaScript

// This will show in light or dark theme depending on your preference
const fetchData = async () => {
  const response = await fetch("/api/posts");
  const data = await response.json();
  return data;
};

fetchData()
  .then((posts) => console.log(posts))
  .catch((error) => console.error(error));

JSON 数据结构

{ "platform": "Modern Blog", "features": ["Theme-aware highlighting", "Mermaid diagrams", "GitHub Flavored Markdown"], "compatibility": { "cloudflare": true, "vercel": true, "nodejs": true } }

Python 代码

# Python syntax highlighting
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate first 10 Fibonacci numbers
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Mermaid 图表

图表在客户端渲染并适配当前主题：

流程图

正在加载图表…

时序图

正在加载图表…

类图

正在加载图表…

状态图

正在加载图表…

GitHub Flavored Markdown

表格

功能	状态	描述
语法高亮	✅	适配主题的代码块
Mermaid 图表	✅	客户端渲染
表格	✅	GitHub Flavored Markdown
任务列表	✅	渲染复选框
自动链接	✅	自动检测 URL

任务列表

删除线与格式

可以使用~~删除线~~、粗体、_斜体_与行内代码。

自动链接

URL 会自动转为链接：https://github.com/remarkjs/react-markdown

行内代码

在段落中使用 npm run dev 或 const theme = "dark" 这样的行内代码。

引用

开发提示：运行 npm run dev 而非 npm run dev:fast 可为 MDX 文件启用热重载，内容变化自动更新，无需手动重新构建。

说明：所有代码块与图表都自动适配主题偏好。切换明暗模式即可查看效果。

下一步

定制样式：编辑 src/styles/globals.css 与 tailwind.config.ts
添加文章：在 content/blog/ 创建新的 .mdx 文件
扩展功能：在 src/components/blog/ 添加自定义组件
部署：推送到所选托管平台

阅读功能演示查看更多示例。