博客上线
你好#
这是第一篇正式文章。如果你能在浏览器里看到这段内容，说明 markdown 流水线在 Cloudflare Workers 上跑通了。
这是一个 Alert 组件
通过 safe-mdx 直接在 markdown 里渲染——0 运行时 eval、0 new Function、
可稳定部署到 workerd。
按钮和徽章#
普通 markdown 加粗、斜体、列表、代码块都正常。
你可以在任何位置放 shadcn 组件：
新v1.0Beta
文章里嵌 Card#
Markdown + JSX 混排卡片
Card 本身是 React 组件，里面的正文还是 markdown。
用 Card 高亮 某个功能或行动呼吁，不会打断文章节奏。
Accordion 做内联 FAQ#
Callout 提示框变体#
5 种语义颜色对应不同的提示类型：
说明
Info — 中性的上下文信息，提醒读者注意。
小贴士
Tip — 简短可执行的建议，能提升读者效果。
注意
Warning — 忽略可能引发问题。
完成
Success — 确认读者想要的结果已达成。
禁止
Danger — 这是破坏性或不可逆操作，谨慎。
文章里的 Tabs#
bash
bun add safe-mdx @content-collections/core
bun add safe-mdx @content-collections/coreReddit 嵌入#
嵌入外部内容#
YouTube 视频：
X 上的推文：
带说明的图片：
代码块也支持#
行内 code 用反引号包起来。代码块用三个反引号 + 语言标识：
src/lib/recent-posts.ts
import { allBlogPosts } from "content-collections";
const recent = allBlogPosts
.filter((p) => p.locale === "zh" && !p.draft)
.sort((a, b) => b.publishedAt.localeCompare(a.publishedAt))
.slice(0, 5);
console.log(`最近 ${recent.length} 篇文章`);
import { allBlogPosts } from "content-collections";
const recent = allBlogPosts
.filter((p) => p.locale === "zh" && !p.draft)
.sort((a, b) => b.publishedAt.localeCompare(a.publishedAt))
.slice(0, 5);
console.log(`最近 ${recent.length} 篇文章`);deploy.sh
# 部署到 Cloudflare Workers
pnpm build
pnpm run deploy
# 部署到 Cloudflare Workers
pnpm build
pnpm run deployLinkCard 看更多#
相关
我们 vs Competitor Example 对比
并排对比页，内嵌真实 PricingTable。
外部
去 GitHub 看源码
外链示例 — 新标签打开，rel=noopener。
CodeTabs — 多语言切换#
server.ts
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);
await resend.emails.send({
from: "hi@example.com",
to: "you@example.com",
subject: "你好",
html: "<p>来自 TS 的问候</p>",
});
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);
await resend.emails.send({
from: "hi@example.com",
to: "you@example.com",
subject: "你好",
html: "<p>来自 TS 的问候</p>",
});订阅产品更新#
订阅产品更新
新功能、深度文章、不定期的小贴士。无广告，随时退订。
接下来#
更多文章
/vs下的真实对比/use-cases下的场景实战
标签#meta
对你有用吗？