一共六项：堆叠相册、渐进式开屏大图、窄屏独立背景图、打字机、滚动渐入、页脚图标链接与署名位置。其中两项可以直接在文章里演示，剩下四项是站点级的——这个页面本身就在跑，往下翻的时候留意一下页脚和回到首页的开屏。

堆叠相册

引入了 {% stackalbum 480,480 %} 标签：

一叠像扑克牌一样码在一起的照片。点最上面那张，它会被抽起来，然后滑到牌堆最底下。

写法就是一个标签包一组普通的 markdown 图片：

1
2
3
4
5
6

{% stackalbum 480,480 %}
![见滝原的黄昏](https://img.nep.me/bg/bg-madoka-1.webp "h")
![晓美焰](https://img.nep.me/bg/bg-homura.webp "v")
![叛逆的物语](https://img.nep.me/bg/devil-homura.webp "h")
![圆环之理](https://img.nep.me/bg/bg-madoka-2.webp)
{% endstackalbum %}

几个细节：

• 参数 宽,高 可选，默认 480,480。
• markdown 的 title 位置填 "h" 是横卡（480×320），"v" 是竖卡（320×480）。不填的按图片自己的宽高比在浏览器端判断——上面第四张就没填。
• 容器高度按卡片实际占位算，取「高 参数」和「卡片真正需要的空间」里较大的那个。所以竖图多、张数多的时候不会溢出到下面的正文里。
• 窄屏会整体缩放到放得下为止。缩放看的是牌堆实际有多少地方可用，不是某个像素断点——所以窄侧栏、平板分栏和手机是同一套逻辑。
• 键盘可用：牌堆本身可以聚焦，Enter 或 → 翻到下一张。堆叠状态下只有最上层是清晰的，不给键盘路径的话其余照片对不用鼠标的人就是不存在的。Space 有意没绑——它是翻页键。

悬停翻牌

引入了 {% stackalbumnav %} 标签：

小一号的变体，一个牌堆配一列名字。鼠标移到名字上（或者用 Tab 键聚焦），对应的封面会翻到最上层；移开就恢复原来的顺序。

• 魔法少女小圆
• 叛逆的物语
• 晓美焰
• 见滝原的午后
• 圆环之理

标签的参数是一条数据路径：

1

{% stackalbumnav collections.anime %}

第一段是 source/_data/ 下的文件名，后面按点号往下钻，最终指到一个列表。这个例子读的是 source/_data/collections.yml：

1
2
3
4

anime:
  - title: 魔法少女小圆
    link: https://www.bilibili.com/bangumi/media/md1177
    image: https://img.nep.me/bg/bg-madoka.webp

文件名和键名都是你自己定的。

字段接别名：名字用 name 或 title，链接用 href / link / url，封面用 cover / image / src。

渐进式开屏大图

这项要回首页看。开启后开屏背景是这样加载的：先铺一张高斯模糊的小图占位，等背景大图解码完成再淡出交接；同时往下滚的时候图片会轻微放大、整个开屏渐隐。

1
2
3
4
5
6

home_hero:
  enable: true
  image: https://example.com/hero.jpg
  image_progressive: true
  # 可选：模糊层用的小图，省略时用纸面底色，仍然有淡入
  image_placeholder: /images/hero-lqip.jpg

关键在于图源仍然只有 image 一个。image_progressive 改变的是它怎么加载，不是换一个图源进来，所以 image_overlay、mobile_image、多图随机轮播全部照常生效。加载失败、脚本没跑、或者浏览器禁用 JS，都会直接显示 image 本身——模糊层带着 hidden 属性出场，由脚本揭开，两秒内没人接手就自己藏回去。

原 PR 那版滚动时还会逐帧加 blur()。 目前主题只保留了 opacity 和 transform。

窄屏可以单独指定一张

mobile_image 从开关变成了「开关或图源」：

1
2
3
4

home_hero:
  mobile_image: true                                  # 默认，沿用上面的 image
  # mobile_image: false                               # 窄屏回退到纸张背景
  # mobile_image: /images/hero-mobile.jpg             # 窄屏用这张

填链接的时候，窄屏（≤760px）单独用那张图，适合另外准备一版竖版裁切。这时候开屏仍然是照片模式，文字和按钮配色不变——只有背景图那一条声明变了。

打字机

页脚版权行右边那一句，还有首页开屏 bio 的位置——这个站两处都开着，翻到本页最底下就能看到。

1
2
3
4
5
6
7
8
9

footer:
  typed:
    enable: true
    effect: true          # false 就直接显示 sub 第一行，不做动画
    loop: true
    type_speed: 150
    source: 1             # false 仅 sub | 1 一言 | 2 一句网 | 3 今日诗词
    sub:
      - 桃李春风一杯酒，江湖夜雨十年灯

home_hero.typed 是同一套字段。两处同时开启也只会请求一次 Typed.js。

CDN 不可达的时候不会转圈：onerror 和 6 秒超时走同一个出口，退回纯文本显示 sub 第一行。hero 那一侧 sub 为空时会回退到 hero.bio / profile.bio，不会渲染出一个空段落。

滚动渐入

也是回首页看：精选轮播、章节标题、文章卡和侧栏卡进入视口时逐个上浮渐显，文章卡按位置交错出场。

值得说的是没有 JS 的时候会怎样。.reveal 的初始状态是 opacity: 0，如果就这么发出去，禁用 JS 的读者会看到一个空首页。所以隐藏这件事由 <head> 里的内联脚本决定：只有在 IntersectionObserver 存在时才给根元素加 reveal-ready，并且挂一个两秒的看门狗——main.js 没接上观察器的话就把这个类摘掉。没有 JS，就没有任何东西被隐藏过。

交错延迟走的是自定义属性 --reveal-delay 加 animation-delay，而不是内联 transition-delay。后者会顺带延迟卡片自己的 hover 抬升，每行靠后的卡片鼠标移上去要等最多 300ms 才有反应。

页脚图标链接与署名位置

看本页页脚右侧那一行：归档 · 分类 · 标签 · [CC 图标组] · Powered by Theme FlatPaper。

条目可以只有图标、没有文字：

1
2
3
4
5
6
7
8
9
10
11
12
13

footer:
  links:
    -
      - name: 归档
        link: /archives
      - link: /copyright
        title: 版权协议
        aria-label: 版权协议
        icons:
          - fa-regular:copyright
          - fa-brands:creative-commons-by
          - fa-brands:creative-commons-nc
          - fa-brands:creative-commons-nd

icons 是数组，一个链接里可以并排几个图标。主题的图标按需打包机制同步认这个字段，所以只有真正用到的 SVG 才会进产物。纯图标链接没有可读的名字，aria-label 会补上。

主题署名的位置换了配置面：

1
2
3
4
5

footer:
  powered:
    prefix: Powered by Theme
    name: FlatPaper
    row: first        # first（默认）| last | own

• first —— 并入第一组链接行的末尾，也就是这个站现在的样子
• last —— 并入最后一行末尾
• own —— 独占一行

为什么默认从「独占一行」改成「并入」：.site-footer__right 是一行一个 row 的 grid，配了备案信息的站点会得到

1
2

Powered by Theme FlatPaper
蜀ICP备XXXXXXXX号-X · 版权协议

主次颠倒了——备案信息才是主体，主题署名压在它头上。

赞赏名单

在关于页一类的独立页面正文里写一段结构化 HTML，就能得到手账便签风格的赞赏卡片。没有新增配置项。

共 5 人 · 最新更新时间：2026-08-14

金额徽章的颜色不用自己写：脚本扫 .reward-list__amount 的文本，解析出数字后按人民币纸币面额自动上色——≥100 红、≥50 绿、≥20 棕黄、≥10 蓝、≥5 紫、≥1 橄榄绿。markup 里已经写了 reward-list__amount--50 这类档位类的话，以你写的为准。

纸色档位 --p1 到 --p5 循环使用，胶带颜色跟着纸色走。头像可以放 <img class="reward-list__avatar no-zoom"> 贴在右上角，也可以像上面这样用 .reward-list__avatar--text 显示名字首字。

1
2
3
4
5
6
7
8
9
10
11

<div class="reward-list">
  <div class="reward-list__item reward-list__item--p1">
    <img class="reward-list__avatar no-zoom" src="/images/donor.jpg" alt="昵称"
         loading="lazy" referrerpolicy="no-referrer">
    <span class="reward-list__name">昵称</span>
    <div class="reward-list__bottom">
      <span class="reward-list__amount">¥100</span>
      <time class="reward-list__date">2026-08-14</time>
    </div>
  </div>
</div>

配置速查

细节见仓库里的 配置说明 与 自定义标签与页面。

原 PR 里还有一项侧边栏定位欢迎卡片（按访客 IP 显示归属地和距离），最后决定不合并进主题。它需要把每个访客的 IP 发给第三方接口，可以通过外挂 JS 实现。

该功功能默认开启，影响的字符：

1. Em dash: --- → —

2. En dash: -- → –

3. Single quotation marks:

   • Opening single quote: ' → ‘
   • Closing single quote and apostrophe: ' → ’

4. Double quotation marks:

   • Opening double quote: " → “
   • Closing double quote: " → ”

5. Ellipsis: ... → …

转换演示

源码字符

1
2
3
4
5

---
--
'文本'
"文本"
...

转换效果

–
‘文本’
“文本”
…

引号部分

其中对于最常用的引号内容，会进行下面的转换，显示效果会受到字体的影响：

1

"This is a quote."

会被渲染为：

“This is a quote.”

这个字符与看起来中文的引号一致，在一些字体下不美观，尤其是进行英文写作时。如果不希望进行转换，除了直接禁用 smartypants 功能之外，还可以通过 quotes 配置自定义引号字符：

1
2
3

marked:
  smartypants: true
  quotes: '""'''''

quotes 是什么？

quotes 用于指定四种引号字符，顺序分别为：

1. 左双引号
2. 右双引号
3. 左单引号
4. 右单引号

例如：

1

quotes: '“”‘’'

表示使用中文排版常见的弯引号。

而：

1

quotes: '""'''''

则表示继续使用英文直引号：

• 左双引号："
• 右双引号："
• 左单引号：'
• 右单引号：'

这样即使启用了 smartypants，引号也不会被转换成弯引号。

为什么看起来有这么多 '？

很多人第一次看到：

1

quotes: '""'''''

都会疑惑：

为什么后面有这么多单引号？

原因在于 YAML 的单引号字符串语法。

在 YAML 中：

• 字符串可以使用 '...' 包裹；
• 如果字符串内部需要表示一个真正的单引号 '，必须写成两个单引号 ''。

例如：

1

value: 'I''m'

实际表示的是：

1

I'm

因此：

1

quotes: '""'''''

可以拆解为：

1
2
3
4
5

'    ← 字符串开始
""   ← 两个双引号
''   ← 一个单引号
''   ← 一个单引号
'    ← 字符串结束

最终字符串实际上就是：

1

""''

即：

• "
• "
• '
• '

正好对应 quotes 所要求的四个字符。

常见配置示例

使用英文直引号（默认效果）

1
2
3

marked:
  smartypants: true
  quotes: '""'''''

输出：

1

"This is a quote."

使用英文弯引号（Typography）

1
2
3

marked:
  smartypants: true
  quotes: '“”‘’'

输出：

1

“This is a quote.”

使用法文引号

1
2
3

marked:
  smartypants: true
  quotes: '«»‹›'

输出：

1

« Bonjour »

总结

smartypants 用于提升 Markdown 的排版质量，而 quotes 则允许你自定义四种引号字符。

需要注意的是，quotes 的值只有 四个字符，分别对应：

1

左双引号 右双引号 左单引号 右单引号

像 quotes: '""''''' 这样的写法，并不是有五个或六个单引号，而只是 YAML 为了表示两个普通单引号所采用的转义方式。

这个功能适合用来给长文增加一点视觉识别度。比如教程类文章可以放配置截图，游记和摄影记录可以放照片，主题更新日志可以放功能预览图。它不会强迫所有文章都显示图片，也不会改变没有配置图片的文章。

全局配置

主题配置项是 post_top_img.mode。mode 留空时等于禁用。

1
2

post_top_img:
  mode:

需要启用时，可以在两种模式之间选择：

1
2

post_top_img:
  mode: top_img

top_img 模式只接收文章 front-matter 里显式写出的 top_img。如果某篇文章没有写 top_img，就不会渲染顶部图。

1
2

post_top_img:
  mode: fallback

fallback 模式会先读取文章 front-matter 的 top_img。如果没有配置 top_img，再回退到主题已有的封面图解析顺序：cover、thumbnail、image、banner，最后尝试正文第一张图片。

单篇文章写法

在文章 front-matter 中直接写 top_img：

1
2
3
4
5
6

---
title: 周末散步记录
date: 2026-06-26 15:30:00
cover: /images/walk-card.jpg
top_img: /images/walk-wide.jpg
---

top_img 可以是站内路径，也可以是完整 URL。站内图片建议放在 Hexo 的 source/images/ 目录下，然后用 /images/example.jpg 引用。

如果某篇文章不想显示顶部图，可以写：

1
2
3
4

---
title: 一篇保持普通纸面的文章
top_img: false
---

即使全局 mode 是 fallback，top_img: false 也会关闭当前文章的顶部图。

比如这个 DEMO 站点的 Cover 就都写了标题，其实不太适合直接 Fallback。

三种模式怎么选

如果站点里的 cover 大多是横向封面，推荐使用 fallback。如果 cover 主要是小卡片图、图标图或不适合铺满文章顶部，推荐使用 top_img，只给适合的文章单独配置。

和 cover 的区别

cover 主要用于首页文章卡片、精选卡片和相关文章卡片；top_img 只用于文章详情页顶部。

你可以让它们使用同一张图片：

1
2

cover: /images/post.jpg
top_img: /images/post.jpg

也可以分开使用：

1
2

cover: /images/post-card.jpg
top_img: /images/post-wide.jpg

第二种方式更适合视觉要求高的站点：卡片图可以裁得紧一点，文章顶部图则使用更宽、更安静、能承载标题文字的图片。

阅读体验

顶部图会保留 FlatPaper 的纸面感。图片不会直接硬切到正文，而是通过半透明遮罩和渐变融入文章背景。标题区域叠在图片上，但文字仍使用主题的墨色系统，并通过轻微的纸面色光晕保证可读。

顶部图片也被设置为不可拖动，避免阅读时不小心拖出浏览器的图片预览。

一个推荐配置

如果你想先在演示站或个人站里快速试用，可以从 fallback 开始：

1
2

post_top_img:
  mode: fallback

之后遇到不适合铺成顶部图的文章，再单篇关闭：

1

top_img: false

如果你更喜欢手动控制每一篇文章的视觉效果，就改用：

1
2

post_top_img:
  mode: top_img

这样只有认真配置过 top_img 的文章才会显示顶部图，站点整体会更克制。

页面的顶部图片

在文章也支持了顶部图片后，其他类型页面也光速获得了支持。

但是其他页面只接收 top_image: 手动指定，毕竟页面部分不需要频繁更新，还是值得精挑细选准备一下的。

预览效果可以查看：

• Homulilly - 朋友圈

这个功能默认关闭，不会影响已有站点。开启后，主题会在页面 <head> 里注入 Google Fonts 样式表，并用 CSS 变量把字体应用到正文或代码块。

支持代码字体与中文字体分别设置，支持字体字重（Font Weight），也支持 text 限定请求字体，从大字体文件中仅下载需要的部分。

演示站使用配置

当前演示站使用了这组配置，设置了英文字体 Sniglet 与 代码字体 Source Code Pro：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Google Fonts。默认关闭；开启后会在 <head> 注入 Google Fonts CSS。
# cdn 可填写镜像域名，用于覆盖 https://fonts.googleapis.com，例如 https://fonts.loli.net。
google_fonts:
  enable: true
  cdn: https://fonts.loli.net
  # text_font: New Tegomin
  # text: |-
  #   ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~
  # 按顺序填写字体名称即可；第一个字体会优先用于正文。
  fonts:
    # - Caveat
    - Sniglet
  # 等宽字体单独配置；也可以只填写 mono，不改变正文字体。
  mono:
    - Source Code Pro

fonts 用于正文，按顺序填写字体名称即可；mono 用于代码块，也按顺序填写等宽字体名称。如果只想改代码字体，可以只配置 mono，不写 fonts。

默认情况下只写字体名称就够了。如果某个字体确实需要指定字重，可以使用 Google Fonts 的写法，例如 Noto Sans SC:wght@400;700；主题会用完整配置请求字体，同时在本地 CSS 字体栈里自动保留正确的字体名。

字段说明

字体加载固定使用 display=swap，所以即使远程字体加载较慢，页面也会先用本地 fallback 字体显示，不会长时间空白。

text= 特性介绍

text= 参数用于只请求指定文本中需要的字形，从而减少字体文件体积。适合比如单独喜欢某个中文、日文字符集的英文部分，但是又不希望请求整个字体的情况，又或是只想让某个 Google Fonts 字体覆盖固定英文标题、logo 或按钮，可以用 text_font 搭配 text 来减少字体文件体积。

比如只使用 New Tegomin 的英文数字部分，效果可以参考 Aores’s Blog | Homulilly：

1
2
3
4
5
6
7
8
9

google_fonts:
  enable: true
  text_font: New Tegomin
  # 只覆盖英文数字与标点符号
  text: |-
    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~
  # 可以同时再指定正文字体，不指定时则使用系统字体
  # fonts:
  #   - Noto Sans SC 

生成后的字体栈顺序会是：裁剪后的 text_font、完整的 fonts、系统 fallback。没有包含在 text 字符集里的正文内容会回退到完整正文字体，因此它更适合固定文案，不适合用户生成内容或频繁变化的正文。

如果只需要请求英文数字，使用一行即可

1
2
3

google_fonts:
  text_font: New Tegomin
  text: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

如果想要包含标点符号，由于字符里包含双引号、单引号、反斜杠这类容易触发 YAML 转义的字符，推荐写成 literal block：

1
2
3
4

google_fonts:
  text_font: New Tegomin
  text: |-
    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~

小提示

• 字体名称直接写 Google Fonts 里的名称即可，不需要写复杂的 family= 查询参数。
• 有特殊字重需求时再追加 :wght@...，普通使用保持字体名称即可。
• text 会自动 URL encode，配置里直接写需要保留的字符即可。
• cdn 只负责替换 Google Fonts CSS 的域名；实际字体文件地址由返回的 CSS 决定。
• 中文字体通常体积较大，建议只加载确实需要的字体。
• 像 Caveat 这样的字体主要覆盖拉丁字符，中文仍会回退到主题默认中文字体栈。

这个功能适合想让首页第一屏更有识别度的站点：个人博客可以放一张代表近期状态的照片，摄影站可以放作品封面，作品集可以用视觉图建立风格，轻量手账站也可以继续使用默认纸张背景和便签贴纸。

Sticker 贴纸 可以拖动。

带背景的 预览 ：

开启 Hero

Hero 默认关闭，不影响已有站点。要启用它，在主题配置里设置：

1
2

home_hero:
  enable: true

开启后，Hero 只会在首页第一页显示。继续翻页或进入文章页时，页面会回到原本的列表和阅读布局。

文案与头像

Hero 默认会复用 profile 里的头像、简介、社交链接与 RSS。如果你想让首页开屏使用独立内容，可以在 home_hero 里覆盖：

1
2
3
4
5
6
7

home_hero:
  enable: true
  title: 我的手账
  subtitle: 今日份记录
  bio: 写给路过此处的你。
  avatar: /images/avatar.jpg
  avatar_shape: circle

这些字段的作用分别是：

• title：Hero 主标题，默认使用站点标题。
• subtitle：标题上方的小标签文字，默认可复用 profile role。
• bio：标题下方的简介文字，默认可复用 profile bio。
• avatar：头像图片路径。
• avatar_shape：头像形状，支持 circle 或默认方形。

如果没有配置头像，Hero 会显示一个主题内置的简化头像块，保证布局不会空掉。

背景图

Hero 可以保持默认纸张背景，也可以设置图片背景。最简单的配置是一张图：

1
2
3

home_hero:
  enable: true
  image: /images/hero.jpg

image 支持站内相对路径，也支持完整 URL。站内图片可以放在 Hexo 的 source/images/ 目录下，然后用 /images/hero.jpg 引用。

建议选择横向图，画面主体不要过于贴边。Hero 中央会叠加标题、简介、头像和社交链接，右上角还可能有工具按钮，所以图片需要给内容层留出空间。

随机背景图

如果想让首页每次打开都有一点变化，可以把 image 写成数组：

1
2
3
4
5
6

home_hero:
  enable: true
  image:
    - /images/hero-1.jpg
    - /images/hero-2.jpg
    - /images/hero-3.jpg

浏览器载入时会从数组里随机挑选一张。这个方式适合一组同风格图片，比如同一套摄影、同一个角色主题、同一个颜色主题，或者一组季节感封面。

图片遮罩

主题在使用壁纸后会添加阴影遮罩降低亮度，Hero 提供 image_overlay 来控制图片上方的暗色渐变遮罩，主题的默认是 0.2 - 0.2 的均匀遮罩：

可以根据图片效果调整

1
2

home_hero:
  image_overlay: [0.2, 0.2]

数组里第一个值是顶部透明度，第二个值是底部透明度，范围是 0 到 1。数值越高，遮罩越深。

常见调整思路：

• 图片偏亮时，增大数字，例如 [0.25, 0.35]。 可以形成上浅下深的渐变遮罩。
• 图片本身已经很暗时，降低数字，例如 [0.1, 0.1]。

当然你无需每次重启服务器，可以在这里提前预览调整 ：FlatPaper Tools - Hero

跳转箭头

Hero 底部有一个向下的箭头，用来进入首页内容区。默认目标是首页文章列表区域，也可以自定义：

1
2

home_hero:
  cta_link: "#flatpaper-home-content"

如果你在首页放了自定义锚点，也可以把 cta_link 指向那个位置。

工具按钮与社交链接

Hero 右上角会显示主题工具按钮，例如明暗模式切换；如果启用了可拖动 sticker，还会显示重排 sticker 的按钮。社交链接区域则复用 profile.social 或主题全局 social 配置。

这样 Hero 不只是静态封面，也保留了进入站点内容、切换阅读模式和访问外部主页的入口。

Sticker 贴纸

Hero 仍然保留 FlatPaper 的手账感贴纸。内置便签和自定义图片 sticker 可以同时使用：

1
2
3
4
5
6
7
8
9
10

home_hero:
  stickers:
    enable: true
    draggable: true
    note_text: 今日
    items:
      - image: /images/stickers/github.png
        alt: GitHub
        size: 96
        link: https://github.com/yourname

stickers 的几个常用字段：

• enable：是否显示贴纸。
• draggable：是否允许拖动贴纸。
• note_text：内置便签贴纸的文字。
• items：自定义图片贴纸列表。
• size：单个图片贴纸尺寸。
• link：可选链接，配置后贴纸可以作为入口跳转；不配置时贴纸只是装饰。

配置了 link 的 sticker 不会在点击时立刻跳转，而是先弹出访问确认。这样在拖动贴纸、整理位置或误点时，不会直接离开当前页面；确认后才会打开对应链接。

自定义图片 sticker 最多渲染 5 张。加上内置便签后，Hero 最多显示 6 个 sticker。

完整示例

下面是一段较完整的 Hero 配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

home_hero:
  enable: true
  title: 我的手账
  subtitle: 今日份记录
  bio: 生活不是每天都精彩，但总有值得收藏的片段。
  avatar: /images/avatar.jpg
  avatar_shape: circle
  image:
    - /images/hero-1.jpg
    - /images/hero-2.jpg
  image_overlay: [0.22, 0.58]
  cta_link: "#flatpaper-home-content"
  stickers:
    enable: true
    draggable: true
    note_text: 今日
    items:
      - image: /images/stickers/github.png
        alt: GitHub
        size: 96
        link: https://github.com/yourname

移动端表现

在窄屏上，Hero 会优先保证文字、头像和操作入口的稳定性。图片背景不会强行压缩所有内容，也不会让正文入口被视觉元素遮住。这样桌面端可以更有开屏感，移动端仍然保持 FlatPaper 一贯的阅读节奏。

用工具生成配置

如果不想手写 YAML，可以使用 FlatPaper Tools 的 Hero 工具。它现在提供两个独立片段：

• 遮罩配置：生成 image_overlay，并用示例图预览遮罩效果。
• Sticker 配置：生成 stickers，填写图片地址后可以在底部预览贴纸图像。

复制出来的片段会带有 # home_hero: 注释作为定位提示。粘贴到已有 home_hero: 下方时，只需要保留子项缩进即可。

小结

新的首页 Hero 让 FlatPaper 有了更完整的第一屏表达：可以保持纸张与便签的默认气质，也可以用背景图、头像、简介、社交链接和贴纸组成更个人化的入口。它不会改变文章页的阅读体验，但会让首页更像一个有主题、有状态的站点门面。

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

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

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

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

二级标题：主要内容分区

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

三级标题：分区下的小节

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

四级标题：细节说明

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

五级标题：补充层级

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

六级标题：最小标题层级

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

连续标题测试

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

连续三级标题

连续四级标题

连续五级标题

连续六级标题

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

标题后接列表

检查项

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

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

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

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

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

标题后接代码块

示例代码

1
2
3
4

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

标题后接引用

引用示例

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

结尾

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

普通外链

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&section=long-url-wrapping-behavior

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

链接密集段落

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

脚注

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

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

引用来源

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

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

混合列表

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

结尾

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