ShipAny TwoShipAny Two

你好，Cloudflare D1

2026/10/08

这篇文章来自本地 D1 数据库，用于预览文字排版、段落间距、图片、表格和目录导航。可以切换明暗主题，并缩小浏览器窗口检查移动端效果。

文字与排版

普通段落可以包含 粗体文字、斜体文字、加粗斜体、删除线 和 行内代码，用于比较同一段落中不同格式的字重、颜色与间距。

这是第二个段落，包含足够多的内容以便在窄屏下自动换行。阅读长文章时，合适的行高与内容宽度非常重要。中文、English 和数字 12345 混排时，也应当保持清晰的阅读节奏，不应撑破文章所在的列。

这一行后面有一个换行。
这句话应当从下一行开始。

特殊字符：© ™ → ← & < >。Markdown 转义：*原样显示星号* 和 `原样显示反引号`。

标题层级

三级标题

小节用于组织相关内容，在目录中应体现对应的缩进层级。

四级标题

较长的小节可以继续拆分。

五级标题

用于展示更细的内容层次。

六级标题

这是最小的标题级别，页面文章标题仍然是唯一的 H1。

列表

无序列表与嵌套列表

  • 页面设计
    • 字体与段落间距
    • 明亮主题与深色主题
  • 内容管理
    • 英文文章
    • 使用相同 slug 的中文文章
  • 发布流程
    • 先本地预览，再重新构建静态网站

有序列表

  1. 打开本地数据库可视化工具。
  2. 编辑文章内容。
    1. 保存修改。
    2. 同步内容快照。
  3. 刷新浏览器，检查渲染结果。

引用

引用内容应当与普通段落有明显的视觉区别。

引用中可以包含 强调文字、博客链接 和多个段落。

嵌套引用用于检查第二层缩进。

链接与图片

打开博客列表，或返回文字与排版。也可以使用引用式链接：博客归档。

后台管理界面示例

图片说明：检查桌面端与移动端的图片宽度和圆角效果。

小图片用于检查原始尺寸的展示效果：

网站标志

表格

格式 示例 数值
普通文字 预览内容 1
粗体 行内代码 20
链接 中文 / English 300

下面的宽表格用于检查窄屏横向滚动：

文章 语言 状态 分类 作者 发布时间
本地数据库预览与文章排版完整指南 中文 已发布 指南与教程 D1 Demo 2026-10-08T10:00:00.000Z
A practical guide to static content publishing English 草稿 产品更新 演示作者 尚未安排

代码块

TypeScript

interface Article {
  title: string;
  locale: 'en' | 'zh';
}

const article: Article = {
  title: '你好，Cloudflare D1',
  locale: 'zh',
};
console.log(article.title);

Shell

pnpm db:studio
D1_TARGET=local pnpm db:sync

JSON

{
  "slug": "rendering-preview",
  "locale": "zh",
  "status": "draft",
  "categories": ["guides"]
}

纯文本与长行

纯文本代码块保留缩进：
    子级
        孙级
用于检查横向滚动的长行：/articles/rendering-preview/sections/typography/tables/code-blocks/images/links/nested-lists/end

分隔线

下面的横线将两个部分分开。

分隔线之后继续显示正文。

重复标题

示例

第一个标题有自己的锚点。

示例

第二个同名标题应当使用不同的锚点。点击目录中的两个条目，检查它们是否分别定位到正确的位置。

支持的格式边界

D1 正文使用 Markdown，不是 MDX。当前支持表格和删除线，但尚未启用任务复选框、脚注、数学公式、Mermaid 图表和 JSX 组件。代码块保留格式，目前没有语法着色。

原始 HTML 会按文字展示，不会执行：<strong>HTML 示例</strong>。

本地开发

测试数据保存在本机。修改数据库后，执行 D1_TARGET=local pnpm db:sync 刷新开发预览；正式网站需要重新构建并发布才能更新。

D1 Demo