Hexo

多级标题测试：从一级标题到六级标题

2026-05-16T03:40:00.000Z

这篇文章用于测试 Markdown 多级标题在主题中的显示效果，包括标题字号、间距、锚点、目录生成和标题之间的层级关系。

FlatPaper 的正文标题样式是刻意收敛的：主题只为正文中的 h2、h3、h4 提供专门视觉层级；h1 保留给文章主标题语义，正文里的 h5、h6 则按更轻量的默认层级呈现，避免长文结构过度复杂。

一级标题：文章内部的大章节

虽然文章页通常已经有一个页面标题，但正文里仍然可能出现一级标题。主题需要确保它不会和文章主标题混淆。

FlatPaper 主题中的 TOC 不会显示一级标题

二级标题：主要内容分区

二级标题通常是正文中最常见的结构层级。它适合用来划分文章的主要部分，也经常出现在文章目录中。

三级标题：分区下的小节

三级标题用来继续拆分内容。它的视觉层级应该明显低于二级标题，但仍然比普通段落更容易被扫描到。

四级标题：细节说明

四级标题适合放在技术文章或教程中，用来解释某个步骤的细节。

五级标题：补充层级

五级标题不常用，但主题仍然应该给它一个稳定样式，避免它看起来像普通加粗文本。

六级标题：最小标题层级

六级标题是 Markdown 标题层级的最后一级。它适合测试字号、字重和段落间距的下限。

连续标题测试

下面故意放置一组连续标题，用来观察标题之间没有正文时的垂直间距。

连续三级标题

连续四级标题

连续五级标题

连续六级标题

连续标题不应该挤在一起，也不应该产生过大的空白。

标题后接列表

检查项

标题左侧装饰是否和文本对齐。
标题换行后是否仍然保持自然行高。
目录锚点是否能正确跳转。
移动端标题是否会溢出容器。

长标题测试：这是一个故意写得很长的二级标题，用来观察标题在文章正文中换行后的行高、间距和装饰元素位置是否仍然合理

长标题经常出现在教程、复盘和问题记录中。如果标题换行后行距过紧，阅读会变得很累；如果装饰元素位置固定得不合理，也会显得突兀。

长三级标题测试：当标题继续变长时，主题需要保证内容不会覆盖正文、目录或侧边栏区域

这段正文用来观察长标题之后的段落起始位置。标题和正文之间应该有清晰但不过度的距离。

标题后接代码块

示例代码

function headingLevel(markdownLine) {
  const match = markdownLine.match(/^(#{1,6})\s+/);
  return match ? match[1].length : 0;
}

标题后接引用

引用示例

标题负责组织结构，段落负责承载内容。好的主题应该让这两者各自清楚。

结尾

这篇文章适合用来检查文章页目录、标题锚点、正文层级和移动端换行。如果这些层级都清晰，长文阅读体验会更可靠。

外链与脚注测试：链接样式、长 URL 与引用来源

2026-05-16T03:05:00.000Z

这篇文章用于测试外部链接、长链接换行、脚注、引用来源和链接密集段落的排版效果。真实博客里经常会引用文档、工具、文章和规范，主题需要让这些链接清晰可见，但不能打断阅读节奏。

普通外链

Hexo 的官方文档可以从 Hexo Documentation 开始阅读。Markdown 基础语法可以参考 CommonMark Spec，前端兼容性问题常常会查阅 MDN Web Docs。

这些链接都在正文段落内，适合观察链接颜色、下划线、悬停状态和外链打开行为。

长 URL 换行

下面是一条故意保留完整显示的长链接，用于检查正文容器是否会被撑破：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text#breaking_long_words

还有一条更接近真实搜索和追踪参数的链接：

https://example.com/articles/theme-preview-checklist?utm_source=demo-blog&utm_medium=markdown&utm_campaign=external-link-test§ion=long-url-wrapping-behavior

如果主题设置了合适的 overflow-wrap 或 word-break，这些 URL 应该能在窄屏中自然换行。

链接密集段落

构建一个 Hexo 主题时，可能会同时参考 Hexo 变量、辅助函数、主题文档和 Front Matter。链接密集段落适合测试文字颜色是否过重，以及多个链接相邻时是否容易识别。

脚注

脚注适合放补充说明，而不是打断正文的解释。比如，文章摘要通常由 excerpt 或控制¹；代码高亮则取决于站点配置和渲染器支持²。

在中文文章中，脚注标记应该不会让行高变得突兀³。如果脚注列表出现在文章底部，它需要和正文、上一篇下一篇导航保持清晰间距。

引用来源

链接本身也是内容的一部分。它提供上下文、来源和继续阅读的路径。

这段引用后面接一个来源链接：阅读更多关于网页可访问性的内容。

混合列表

官方文档：Hexo
Markdown 规范：CommonMark
CSS 换行参考：Wrapping and breaking text
示例长域名：https://very-long-subdomain-name.example.com/path/to/a/very/deep/article/with/many/segments

结尾

如果这篇文章在桌面端和移动端都没有横向滚动，并且脚注区域清晰可读，说明主题对外部引用型文章的支持已经比较稳定。

Hexo 可以通过文章摘要控制首页卡片显示内容，常见做法是在正文中插入。↩
当前站点配置使用 highlight.js。不同渲染器会生成不同的代码块 HTML 结构。↩
脚注标记通常会使用上标样式，行高过紧时容易影响正文阅读。↩

用 VitePress 风格的 note 容器语法

2026-05-16T03:00:00.000Z

如果你写过 VitePress 或者 Docusaurus，应该对 ::: warning 这种容器语法很熟。FlatPaper 主题现在同时支持这种写法 —— 你不再需要 note 标签和对应的 endnote 两端围起来，直接用 ::: 开合即可。两种语法可以在同一篇文章里混用，老文章不受影响。

1. 基本写法

1
2
3

::: success
一个 Success 提示
:::

效果：

一个 Success 提示

可以理解为 ::: 是 note 标签的语法糖，两者完全等价 —— 渲染出来的 DOM、折叠行为、样式都一模一样，只是更轻、更接近通用 markdown 习惯。

2. 折叠提示

只要在类型后跟标题，就会自动渲染为可折叠的

：

1
2
3

::: warning 点我展开
这里是被折叠的内容。
:::

点我展开

图片排版预览：多图、图注与长图测试

2026-05-16T02:10:00.000Z

这篇文章用于测试主题在多张图片场景下的展示效果，包括单图、连续图片、图注、横向排布和图片之间的段落间距。

单张大图

图 1：用于观察正文区域中的单张大图宽度、圆角、边距和上下留白。

连续图片

下面两张图片连续出现，适合检查图片之间的垂直间距是否过密，或者是否和普通段落之间产生不自然的断层。

连续图片在移动端尤其容易暴露问题：如果图片宽度、容器边距和正文行宽不一致，页面会显得很松散。

图文混排

图 2：HTML figure 写法，用于测试主题是否给 figcaption 留出合适的文字样式。

图片之后的正文应该自然回到文章节奏中。图注颜色可以更轻，但不能低到难以阅读。

双图预览

河岸散步

晨间书桌

如果主题没有专门处理 .gallery-preview-row，这段 HTML 仍然可以作为普通块级内容显示；后续也可以给它添加响应式双列样式。

长段落后的图片

为了模拟真实写作，这里放一段较长的文字。很多文章不会只连续放图，而是在说明、观察和图片之间来回切换。主题需要保证图片不会抢占全部视觉重心，也不能被正文压得像附件。图片是内容的一部分，它和文字应该保持同一套排版秩序。

这张图放在长段落之后，用于检查段落结束到图片开始之间的距离是否自然。

多语言代码示例：用于测试代码高亮

2026-05-16T01:20:00.000Z

这篇文章用于测试主题在不同代码语言下的高亮、行距、横向滚动和暗色背景表现。它包含前端、后端、配置文件、命令行和数据库查询等常见代码块。

JavaScript

const posts = [
  { title: '主题开发记录', category: '开发日志' },
  { title: 'Markdown 元素展示', category: '写作示例' },
  { title: '周末散步记录', category: '生活' }
];

const grouped = posts.reduce((result, post) => {
  result[post.category] ||= [];
  result[post.category].push(post);
  return result;
}, {});

console.log(grouped);

TypeScript

type PostMeta = {
  title: string;
  date: string;
  tags: string[];
  draft?: boolean;
};

function isPublished(post: PostMeta): boolean {
  return post.draft !== true && Boolean(post.title.trim());
}

Python

from pathlib import Path

posts_dir = Path("source/_posts")

for path in posts_dir.glob("*.md"):
    title = path.stem.replace("-", " ").title()
    print(f"{title}: {path.stat().st_size} bytes")

HTML

<article class="post-card">
  <h2><a href="/posts/theme-layout-checklist/">FlatPaper 主题页面检查清单a>h2>
  <p>用于检查首页卡片、文章详情、归档、分类和标签页的基础展示效果。p>
article>

CSS

.post-card {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 24px;
  padding: 24px;
  border-radius: 8px;
  background: #fffdf7;
}

.post-card h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

Shell

#!/bin/sh

set -eu

POST_DIR="source/_posts"

for file in "$POST_DIR"/*.md; do
  printf 'Checking %s\n' "$file"
done

Bash

#!/usr/bin/env bash

set -euo pipefail

posts_dir="source/_posts"
latest_post="$(find "$posts_dir" -name '*.md' -print | sort | tail -n 1)"

echo "Latest post file: ${latest_post}"
pnpm build

C

#include 
#include 

int main(void) {
    const char *title = "FlatPaper theme test";
    size_t length = strlen(title);

    printf("Post title: %s\n", title);
    printf("Title length: %zu\n", length);

    return 0;
}

PowerShell

1
2
3

Get-ChildItem source\_posts -Filter *.md |
  Sort-Object LastWriteTime -Descending |
  Select-Object Name, Length, LastWriteTime

JSON

{
  "name": "flatpaper",
  "version": "1.0.0",
  "features": ["archives", "categories", "tags", "code-highlight"],
  "theme": {
    "excerpt_length": 96,
    "recent_posts": 3
  }
}

YAML

title: 多语言代码示例
date: 2026-05-16 10:20:00
categories:
  - 写作示例
tags:
  - 代码块
  - 高亮

SQL

select
  category,
  count(*) as post_count,
  max(published_at) as latest_post
from posts
where draft = false
group by category
order by latest_post desc;

EJS

<% posts.forEach(function(post) { %>
  
    <%= date(post.date, 'YYYY-MM-DD') %>
    <%= post.title %>
  
<% }) %>

长行测试

1	这是一行很长的文本，用来检查代码块在窄屏下是否会正确横向滚动，而不是撑破文章容器或者覆盖侧边栏内容。

如果这些代码块在文章详情页里都能保持可读，说明主题的代码高亮基础样式已经比较稳定。

在 Hexo 中使用 NOTE 提示块

2026-05-15T17:17:28.000Z

在 Hexo 中可以插入一些很酷的提示块，效果如下：

1. 基本语法

1
2
3

{% note success %}
一个 Success 提示
{% endnote %}

一个 Success 提示

提示块可以实现折叠

1
2
3

{% note success 一个折叠的提示 %}
一个折叠的 Success 提示
{% endnote %}

一个折叠的提示

Hello World

2026-05-15T11:23:56.804Z

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1	$ hexo new "My New Post"

More info: Writing

Run server

1	$ hexo server

More info: Server

Generate static files

1	$ hexo generate

More info: Generating

Deploy to remote sites

1	$ hexo deploy

More info: Deployment

FlatPaper 主题页面检查清单

2026-05-10T00:30:00.000Z

这篇文章用于快速检查首页卡片、文章详情、归档、分类和标签页的基础展示效果。它刻意包含较短段落、清单和多个二级标题，方便观察排版节奏。

首页卡片

首页最容易暴露间距问题。卡片标题需要在一行、两行和三行之间保持稳定，摘要截断后也不应该挤压元信息区域。

测试重点：

标题字号是否清晰。
摘要是否在不同长度下自然截断。
日期、分类和评论数字是否对齐。
缩略图与正文区域是否有稳定比例。

文章详情

详情页需要关注正文可读性。行高、段落间距、标题层级和代码块宽度会直接影响阅读体验。

一个主题的精致感，通常来自大量不显眼的小距离。

分类与标签

这篇文章归入“主题开发”，并带有多个标签。它适合用来检查分类页、标签页、归档页之间的跳转是否正确。

结论

如果这篇文章在首页、文章页和归档页都表现稳定，主题的主要内容流已经具备基本可用性。

Markdown 元素展示：表格、代码与引用

2026-05-09T05:15:00.000Z

这篇文章集中展示 Markdown 常用元素，适合检查主题对正文内容的默认样式支持。

文本样式

普通段落应该保持轻松的阅读节奏。这里包含 加粗文字、强调文字、行内代码 和一个普通链接：Hexo 官网。

表格

模块	检查内容	期望效果
文章标题	字号、行高、换行	清晰且不拥挤
元信息	日期、分类、标签	层级低于标题
正文段落	行宽、行高、颜色	长时间阅读不疲劳
代码块	横向滚动、背景色	不破坏页面宽度

代码块

function createExcerpt(content, limit = 96) {
  const plainText = content.replace(/<[^>]+>/g, '').trim();
  return plainText.length > limit
    ? `${plainText.slice(0, limit)}...`
    : plainText;
}

.article-content {
  line-height: 1.82;
  word-break: break-word;
}

引用

好的内容样式不需要抢走注意力。它只需要让作者的表达更容易被读完。

有序步骤

准备几篇不同长度的文章。
运行 Hexo 本地服务。
在桌面和移动宽度下检查列表与详情页。
根据真实内容调整间距，而不是只看空白模板。

FlatPaper 设计札记：纸感、留白与轻量界面

2026-05-07T11:40:00.000Z

FlatPaper 的视觉方向适合内容型博客：它不依赖复杂装饰，而是通过纸张、标签、阴影和简化插画营造温和的阅读氛围。

纸感不是拟物

纸感并不意味着把页面做得像真实纸张。更有效的做法是保留轻微的层次、明确的边界和足够的呼吸空间。

可观察的细节包括：

卡片阴影是否足够克制。
背景色与内容纸面的对比是否柔和。
边框和胶带元素是否服务于层级，而不是成为噪音。

留白的作用

留白不是空出来的地方，而是内容之间的秩序。列表页需要紧凑，文章页需要舒展，侧边栏则需要让信息可以被快速扫读。

字体层级

主题测试时可以重点观察三种文字：

标题：承担识别和导航。
摘要：帮助判断是否继续阅读。
元信息：提供辅助信息，不能比正文更抢眼。

小结

当页面里同时有短标题、长标题、长摘要、代码块和表格时，主题的真实质量会比静态预览图更容易暴露出来。

周末散步记录：从街角咖啡店到河岸

2026-05-04T08:20:00.000Z

周末下午没有安排具体计划，只是沿着熟悉的街区慢慢走。天气很轻，云层把阳光过滤得刚好，路边的玻璃窗反射出一点淡金色。

街角

咖啡店门口摆着两把折叠椅，旁边的小黑板写着今日甜点。有人在窗边看书，也有人只是把杯子握在手里发呆。

这类生活文章适合测试主题对轻量内容的呈现：正文不长，标题偏生活化，段落也更松散。

河岸

傍晚走到河边时，风从桥下穿过来。慢跑的人、推婴儿车的人和停下来拍照的人都在同一条路上，只是节奏不同。

有些日子并不需要被总结，只需要被记下来。

回程

回家路上顺手买了一束小花。它不是什么重要事件，但放在桌上之后，房间确实变得明亮了一点。

开发日志：导航、归档与空状态

2026-05-02T02:00:00.000Z

这篇开发日志用于测试内容较长时的阅读体验，也记录一个 Hexo 主题从基础结构到页面完善的常见过程。

导航入口

主题的导航通常包括首页、归档、分类、标签和关于页。它们看起来只是几个链接，但实际会影响站点的主要信息架构。

在实现时需要确认：

当前页面是否有明确的可识别状态。
移动端导航是否容易点击。
链接路径是否经过 url_for 处理。
主题配置缺省时是否仍能正常渲染。

归档页

归档页通常按时间聚合文章。它需要支持文章较少和文章较多两种状态。

当文章数量较少时，页面不能显得破碎；当文章数量较多时，年份、日期和标题之间要有清晰的扫描路径。

空状态

空状态经常被忽略，但它会出现在新站点、测试站点和刚切换主题的时候。合理的空状态应该说明当前没有内容，并给用户一个明确的下一步。

<% if (site.posts.length) { %>
  <%- partial('_partial/archive-list') %>
<% } else { %>
  暂时还没有文章。
<% } %>

元数据

文章卡片上的评论数、阅读量和阅读时间都属于辅助信息。它们能增加真实感，但不应该成为阅读路径的中心。

复盘

这篇文章包含较多小节和一个模板代码块，适合检查详情页在滚动过程中是否保持稳定，以及底部上一篇、下一篇链接是否正常显示。