这是一篇用于检查 BlankTime 桌面主题的排版样本。你可以拖动窗口、调整大小、切换最大化,并点击右侧目录,观察不同宽度下的阅读效果。

文中包含基础 Markdown、常见 HTML 和现有 Volantis 标签的兼容示例。数学公式与 Mermaid 图表均已启用渲染。

01 · 段落与文字

午后的桌面安静下来,窗外的树影慢慢挪动。打开一篇文章,就像从抽屉里拿出一本写了一半的笔记:有认真记录的步骤,也有暂时没想明白的问题。文字应该有呼吸的空间,段落之间保持适当距离,阅读时不必刻意寻找下一行。

这是第二个自然段,用于检查段间距。中文与 English 混排、数字 0123456789、版本 v1.2.3、时间 20:30,以及标点「引号」、(括号)、破折号——与省略号……都应该清晰可辨。

粗体文字用于强调。 斜体文字用于补充。 粗斜体同时出现。 这段文字已经被划掉。

行内代码:npm run dev、source/_posts/、const message = "你好";。

以下使用 HTML 扩展:下划线、高亮标记、H2O、x2、小号补充文字。

第一行,末尾有两个空格。
第二行应紧接上一行换行,而不是成为新的段落。

特殊字符应按原样显示:&、<article>、>、©、→、✓。Emoji:🌿 🎧 📁 📝。

02 · 六级标题与目录

下面故意展示全部标题层级,用来检查字号、上下间距和右侧目录缩进。实际写文章时,通常从二级标题开始组织章节即可。

一级标题示例

一级标题下的正文。它应明显大于普通段落。

二级标题示例

二级标题下的正文。常用于文章的主要章节。

三级标题示例

三级标题下的正文。常用于章节内部的小节。

四级标题示例

四级标题下的正文。

五级标题示例

五级标题下的正文。

六级标题示例

六级标题下的正文。即使层级较深,也应与普通文本有所区别。

一个比较长的章节标题:检查右侧目录在狭窄空间中的换行与缩进

点击右侧这个长标题,检查正文定位与目录高亮。目录文字应保持在面板内部。

03 · 列表与嵌套

无序列表

  • 一杯水、一段音乐、一个空白的下午。
  • 一条比较长的列表项,用来测试文字换行之后是否与本条内容对齐,而不是贴到项目符号下面;调整窗口宽度时,这一点尤其容易观察。
  • 分类笔记
    • 生活记录
    • 技术折腾
      • 系统与工具
      • 博客与主题
  • 写完之后记得保存。

有序列表

  1. 打开欢迎窗口。
  2. 选择一篇文章。
    1. 阅读文章简介。
    2. 通过目录定位章节。
  3. 调整窗口到舒适的大小。

带多个段落的列表

  • 第一条笔记。

    这是属于第一条的补充段落,应继续保持缩进。

    这是列表内部的一段引用。

  • 第二条笔记,检查列表在复杂内容之后能否正常继续。

任务列表

  • 准备一篇用于排版检查的文章
  • 提供不同长度的文字与代码
  • 检查电脑上的阅读效果
  • 检查手机上的目录展开效果
    • 竖屏
    • 较窄的窗口

这些复选框表示文章里的任务状态,不是会自动保存的待办应用。

04 · 引用与分隔线

静默沉淀,向内而生。

这是一段跨越多个段落的引用。观察背景、左侧边线,以及引用内部的行距。

引用内部也可以强调内容,还可以放置 行内代码。

第一层引用。

第二层引用,用于检查嵌套时的缩进和背景。

下面是一条分隔线。


分隔线之后的普通段落,应与上面的内容保持适当距离。

05 · 链接与长文本

返回博客桌面 · 查看本地样式示例文章

外部链接示例:Hexo 官方网站。

自动链接:https://example.com/notes/markdown。

长链接换行测试:https://example.com/articles/this-is-a-deliberately-long-path-for-testing-line-wrapping-in-a-small-reading-window?theme=blanktime-desktop&view=markdown-preview。

连续字符换行测试:ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789。

06 · 代码块

JavaScript

// 中文注释、字符串、数字与关键字应有清晰的层次。
const notebook = {
title: "空白时间",
published: true,
articles: 4,
};

function greet(name = "朋友") {
return `你好,${name}。欢迎来到 ${notebook.title}。`;
}

console.log(greet());

CSS

.reading-window {
display: grid;
grid-template-columns: minmax(0, 1fr) 215px;
border: 1px solid #eaecef;
border-radius: 12px;
background: #fff;
}

YAML

title: Markdown 样式测试
tags:
- Markdown
- 主题开发
comments: false

纯文本与超长代码行

BlankTime Desktop
├── 欢迎窗口
├── 文章阅读器
└── 音乐播放器(后续)

This_is_a_deliberately_long_unbroken_code_line_0123456789_ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz_0123456789_ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz_END

上面的超长代码行用于检查代码块内部的横向滚动;它不应把整个文章窗口撑宽。

07 · 表格

对齐方式

左对齐 居中对齐 右对齐
欢迎窗口 已完成 1
文章阅读器 已完成 12
音乐播放器 后续 123

混合内容

元素 示例 观察重点
粗体 重点内容 字重
代码 npm run build 背景与字体
链接 返回桌面 颜色与点击区域
换行 第一行
第二行
单元格高度

宽表格

文章文件 所属分类 创建日期 更新日期 内容格式 阅读状态 示例备注
markdown-style-test.md 主题开发 2026-09-26 2026-09-26 Markdown 正在阅读 用于检查窄屏横向滚动
desktop-window-notes.md 设计记录 2026-09-25 2026-09-26 Markdown 尚未阅读 这是一个虚构的示例文件名

08 · 图片

图片使用项目已有的本地壁纸,不依赖外部图床。观察图片是否保持原始比例,以及在窗口缩放后是否超出正文区域。

桌面壁纸:绿色枝叶与人物插画

图注示例:将桌面的风景,放进一篇文章。

下面是指定宽度的小图,检查它是否仍然受正文宽度限制:

桌面壁纸的小尺寸预览

09 · 折叠与键盘按键

点击展开一段补充说明

这里是原生 HTML 折叠内容。展开后,文章长度和底部阅读进度应该随之变化。

加粗文本与 行内代码也应正常显示。

键盘组合示例:Ctrl + C,以及 Ctrl + V。

10 · Volantis 标签兼容

这部分专门检查旧文章迁移后的显示效果。

这是一条提示框测试。重点信息与 行内代码 应正常渲染。

点击展开:旧主题的折叠标签

这段内容来自 Volantis 折叠标签。

  • 折叠内部的列表
  • 第二条内容
const folded = true;
console.log("折叠内的代码仍保留换行", folded);
  1. 列表中的折叠块。

    列表内部的补充内容

    这段话应该留在折叠块内,初始状态不可见。

  2. 折叠结束后,有序列表应该继续。

键帽标签:Ctrl + Enter。

遮盖文字:这是一段隐藏的小秘密,鼠标悬停或键盘聚焦后可以查看。

Hexo 官方网站https://hexo.io/

11 · 数学公式与图表

数学公式在构建时自动渲染。 支持行内、独立公式、矩阵和分段函数;Mermaid 图表会自动渲染,并可切换查看源码。

行内公式:E=mc2E = mc^2。

∑i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}

行内公式与分隔符

带下标的行内公式:xi+yi=zix_i + y_i = z_i,以及 a2+b2=c2a^2 + b^2 = c^2。

∫01x2 dx=13\int_0^1 x^2\,dx = \frac{1}{3}

矩阵与分段函数

A=[1234]A = \begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix} f(x)={x2当 x≥0−x当 x<0f(x) = \begin{cases} x^2 & \text{当 } x \ge 0 \\ -x & \text{当 } x < 0 \end{cases}

多行对齐

(a+b)2=a2+2ab+b2∑i=1ni=n(n+1)2\begin{aligned} (a+b)^2 &= a^2 + 2ab + b^2 \\ \sum_{i=1}^{n} i &= \frac{n(n+1)}{2} \end{aligned}

代码和普通金额

行内代码应原样保留:$E=mc^2$。普通金额 $5 和 $10 不应被识别为公式。

Mermaid 图表

flowchart LR
A[桌面] --> B[欢迎窗口]
B --> C[文章阅读器]
C --> D[右侧目录]
A -. 后续 .-> E[音乐播放器]

12 · 阅读检查清单

  • 文章标题、日期和标签显示正确,原始配置没有出现在正文中。
  • 各级标题的字号与间距清晰,右侧目录层级正确。
  • 点击目录可以定位,滚动后当前章节会高亮。
  • 超长链接能换行,代码和宽表格可以在内部横向滚动。
  • 图片保持比例,没有超出文章区域。
  • 原生折叠块和旧主题折叠块均可展开,内容没有泄漏到折叠块外。
  • 顶部工具栏右侧可切换明暗模式和目录显示,刷新后保留选择。
  • 底部字数与阅读进度正常显示。
  • 手机端可以展开目录,正文没有被侧栏挤出窗口。

读到这里,样式测试就结束了。 这段文字用于检查文末留白与阅读进度是否能够到达 100%。