动手前先扒两边#

参考站也是 Firefly 的 fork，但它那套动态是自己写的组件（MomentCard.astro 加一个独立页面）。按这个路子走，得新开一个页面、把数据管线重接一遍 —— 动静不小。

所以先把我们的动态页 DOM dump 出来看了一眼：

1
dynamic-entry.page-entry.card-base > article
2
  ├ page-entry-header → page-avatar / page-identity(page-author + page-meta)
3
  │                     / page-pinned-badge / page-entry-decoration
4
  ├ page-content
5
  ├ dynamic-gallery → page-gallery-grid
6
  └ dynamic-inline-comments → page-comment-toggle + page-comment-panel

头像、作者、时间、地点、置顶徽章、图片网格、评论按钮 —— 一个不缺。参考站那套 card-header / card-avatar / card-tags 跟它几乎是逐项对应的。

差的只是样式。那就不用新开页面了：纯样式覆盖，加一点脚本补它没有的东西。

约束还是老一套：src/pages/、src/components/、src/styles/ 这些红线一根不碰。做法是——

卡片：先从竖条开始#

参考站卡片最显眼的是左边一根主题色竖条。上游的 .page-entry 是 overflow: visible，竖条贴边会被裁掉，所以先把它裁住：

1
dynamic-entry.page-entry {
2
  position: relative;
3
  overflow: hidden;
4
  padding: 1rem;
5
}
6

7
dynamic-entry.page-entry::before {
8
  position: absolute;
9
  inset: 0 auto 0 0;
10
  width: 4px;
11
  border-radius: 0 2px 2px 0;
12
  background: var(--primary);
13
  opacity: 0.35;
14
  content: "";
15
}

其余都是对着参考站抄：头像从 48px 收到 40px 并加一圈 2px 主题色描边、昵称改成主题色、时间与地点之间补一个 ·（上游只靠 gap 分隔）、正文取消那个跟头像对齐的 3.75rem 缩进、右上角那枚纯装饰的引号撤掉。

所有选择器都挂 dynamic-entry 前缀。上游的 .page-* 在友链页、书签导航那批自建页里也在用，不加前缀会误伤一片。

1
dynamic-entry .page-gallery > .page-gallery-grid {
2
  width: fit-content;
3
  grid-auto-rows: 100px;
4
  grid-template-columns: repeat(3, 100px);
5
}

封面区：上游没有的东西#

参考站顶部那一整块——封面大图、右下角浮出的头像、压在封面上的昵称、右对齐的签名，下面一排按钮——上游完全没有。

补它的路子是「页脚注入外壳 + 脚本搬运」：DOM 连同全部文案、链接先写在页脚的 FooterConfig.html 里，由 dynamic-hero.js 在动态页把它搬进正文顶部。

搬的时候有个要点：用 cloneNode，原壳留在页脚。因为正文整个在 swup 的替换范围里，直接把节点搬过去，切一次页就没了；原壳留着，下次切回来再克隆一份。

1
if (host.querySelector(":scope > .ff-wx-cover")) return;

1
if (anchor.dataset.ffHeroMounted === "1") return;
2
anchor.dataset.ffHeroMounted = "1";

页面头部：拆掉那层壳#

封面区下面紧跟着上游的页面头部（图标 + 「站长动态」+ 描述 + RSS + 计数 + 搜索 + 年份筛选）。它自己是一张卡片，叠在封面卡片下面就是两层壳。

功能全留，壳拆了：背景、边框、圆角、阴影全撤，那个大图标也隐藏，两块的间距收到 4px —— 视觉上变成封面卡片的下半截。

「写说说」按钮本来在封面区下面单独占一行，只有一个按钮，又空又白吃一行高度。挪进了标题行右侧，跟「订阅RSS」「17 动态」排成一排（那格本来就是页面级操作区），尺寸收小到跟旁边两个小字协调。

评论区：三个小改动#

① 按钮上标评论数。 之前只有「评论」两个字，不点开不知道有没有人聊过。做法是进页面时批量问一次 Waline 的计数接口：

1
GET /api/comment?type=count&url=/dynamic/xxx/&url=/dynamic/yyy/…
2
→ {"data":[2,0,5,…]}

一次请求拿回全部，按传入顺序返回 ✓。有评论就显示「评论 2」，0 条不带数字 —— 有数字本身就是在说有人聊过。

② 只自动展开真有评论的。 一版之前做过「全部自动展开」，自己回看一遍又推翻了 —— 那时一进页面每条动态下面都摊着评论区，而其中大部分是空的。现在只展开 count > 0 的，空面板保持收起；懒展开照旧走 IntersectionObserver（离视口 400px 才展开），一页十几条全展开会把首屏拖垮。自动展开只做一次，用户手动收起后不会再被弹开。

③ 编辑器压成一行。 展开之后，Waline 那个「昵称 / 邮箱 / 网址 + 大输入框 + 表情栏」顶在最上面太挡视野。现在默认收成一个 35px 的输入框（整块 77px），点进去自动还原成完整表单（227px）：

1
editor.classList.add("ff-compact");          // 默认压缩
2
editor.addEventListener("focusin", () => editor.classList.remove("ff-compact"));

用「加类 / 摘类」而不是 :not(:focus-within) 反转，是因为后者得去猜 Waline 原本的 display 到底是 flex 还是 block —— 摘类让规则干脆不生效，它自己什么样就什么样。

输入框的类名不是猜的那个#

第一版我按 .wl-textarea 写选择器，压缩样式一声不响地没生效：编辑器该多高还多高。

dump 出来才知道，Waline v3 的输入框是：

1
<div class="wl-comment">
2
  <div class="wl-panel">
3
    <div class="wl-header item3">…昵称 / 邮箱 / 网址…</div>
4
    <textarea class="wl-editor">          ← 是它
5
    <div class="wl-preview">…
6
    <div class="wl-footer">…表情 / 字数 / 提交…

.wl-textarea 压根不存在。改成 .wl-editor 才对。

顺带还藏掉了「评论区 / 分享你的想法，与大家交流讨论」那行标题 —— 动态页一条动态配一个评论区，标题只是白占地方。那块来自全站共用的 src/components/comment/index.astro（上游文件），文章页里它是正文与评论的分界、有用，所以只在动态这个 iframe 里藏，没全站删。

写在最后#

这一轮从头到尾没改一个主题源文件。红线自检（src/pages、src/components、src/styles 等目录）始终是空的。

三个坑有个共同点：都不报错。特异性不够只是样式被压过去、:scope 选择器不生效、类名写错只是匹配不到 —— 没有一个会给你红字提示。所以这类改造真正花时间的不是写样式，是验证「它到底有没有生效」：算一遍特异性、dump 真实 DOM 看类名、给每个改动配一条实测。