作者：WuSi（wusitech@qq.com）

（本文整理自本站背景与视觉效果的实现过程，留作备查）

0xFF 感谢大佬

开工之前，先感谢大佬：

• D-SKETON：主题 reimu 的作者。本站的整体框架和大量视觉效果原型都来自这个主题，本文提到的许多改造，也是在他的主题基础上完成的。
• CialloKing：背景图池取自他的站点，页脚那些随机背景图就来自这里，图池引用链的思路也参考了他的做法。

0x00 想要什么效果

想法很简单：页面背景是一张随机番剧图，固定不动，内容像一张半透明的卡片浮在上面。暗色模式下文字和卡片也要能看清。

听起来不难，但主题自带的背景是纯色，直接加背景图会被盖住。中间改了好几轮才对。

0x10 第一个坑：主题的底色

改之前先看了下主题的 CSS，发现有两层不透明底色：

body { background: var(--color-background); }
#wrap {
  position: absolute;
  z-index: 1;
  background: var(--color-background);
}

#wrap 这层是绝对定位 + z-index:1，也就是内容容器本身不透明。不管把背景垫在它下面多少层，都会被挡住。

一开始只改了 body 的背景，页面上什么都看不见——因为真正挡住的不是 body，是 #wrap。

解决办法是把这两层的底色都放开：

body, #container, #wrap { background: transparent !important; }

然后单独建一个固定层放背景图。

0x20 背景层怎么搭

结构是这样的：

  flowchart TB
    L1["#wusi-bg（固定背景层 z-index:-1）"]
    L2["占位图 img（33KB，先到）"]
    L3["大图 img（257KB，后到，淡入覆盖）"]
    L4["#wrap（内容，z-index:1）"]
    L1 --> L2 --> L3 --> L4

两层图叠在一起：占位图先出来，大图加载完再淡入盖住。这样不管大图多慢，首屏都不会空着。

代码里用 JS 动态建层，不写死在 HTML 里：

var layer = document.createElement('div');
layer.style.cssText = 'position:fixed;inset:0;z-index:-1;background-size:cover;';

0x30 固定不滚动

固定这一点靠 position: fixed，不是 background-attachment: fixed。

本文2026-10-15首发于吾思 梦阁，最后修改于2026-10-15

作者：WuSi（wusitech@qq.com）

0x00 背景

静态博客没有后端，评论基本只有两条路：挂第三方，或者自己想办法。

第三方用着省事，但问题也不少：有的开始收费，有的停止维护，有的国内访问时快时慢。最主要的是数据不在自己手里，服务一关评论就没了。

所以这次换了个做法：评论文件放自己的仓库，写评论交给一个 Serverless 函数去提交。

0x10 整体结构

  flowchart LR
    A[浏览器] -->|读评论| B[静态 JSON 文件]
    A -->|写评论| C[Cloudflare Pages Function]
    C -->|服务端提交| D[GitHub 仓库]
    D -->|触发构建| E[静态站点更新]

四个环节

1. 读：评论就是一个 JSON 文件，浏览器当静态资源取
2. 写：表单提交到 /api/comment，这是 Cloudflare Pages 的 Function
3. 存：函数拿 GitHub 令牌调用 Contents API，改文件并提交
4. 生效：仓库变更触发站点重新构建

没有数据库，没有常驻服务器。

0x20 评论存在哪

按页面拆文件：

static/comments/
├── posts/
│   ├── stm32f4-interrupt.json
│   └── ubuntu_install.json
├── about.json
└── friend.json

文件里是个数组，一条评论长这样：

{
  "id": "c_xxxxx",
  "name": "test",
  "body": "test123456",
  "ts": 1792304863141,
  "hidden": false,
  "author": false,
  "replyTo": ""
}

两个设计

扁平存储。 不管回复多深，全部平铺在一个数组里，靠 replyTo 记父评论的 id。加评论就是往数组末尾追加，不用改结构。

本文2026-10-15首发于吾思 梦阁，最后修改于2026-10-15