他那条是怎么做的#

扒了一遍他的页面。这个站用的不是 Firefly，是 Ethereal（资源路径是 /themes/Ethereal/assets/*.css，页面里还留着 Thymeleaf 的痕迹 —— .home-moments-track 那块 JS 里写着 th:if）。

代码抄不了，机制可以搬。拆开看只有四件事：

无缝的原理就是那个「两份」：第二份的开头和第一份的内容完全一样，所以平移到 -50%（正好是一份的宽度）时，第二份的开头刚好落在起点，肉眼接不上接缝。

还有个很容易漏的点：内容不足一屏时必须先把内容重复到够宽。不然一份还没跑道长，0 到 -50% 这段里后面是空的，整条看起来就是在原地不动。

我的落法：只动两个文件#

主题的 MainGridLayout.astro 是上游文件，改它以后合并上游必冲突。所以还是走老路子 —— 页脚 HTML 注入 + 客户端脚本。

FooterConfig.html 是本站已经在用的注入点（页脚的运行时间和访问统计都在里面），<style> 和 <script> 都能正常生效。

脚本只在首页 / 才拉取，其他页面只多十几行判断。

数据没什么好说的：/dynamic/ 已经在用 Memos，直接连同一个接口拿最近的 12 条就行。响应里的 creator 字段得在客户端再过滤一次 —— Memos 的 ListMemos 带不带 parent 返回结果都一样，这个坑主题自己的 memos-adapter.ts 里也标注了。

条子该插在哪#

这个是折腾最久的地方，前后改了两版。

第一版插在 #main-grid 之前，横跨全宽，看着没问题 —— 直到点了首页那个下滑箭头，滚动条整个不见了。

查了半天才反应过来。那个箭头的 onclick 长这样：

1
onclick="document.getElementById('main-grid')?.scrollIntoView({ behavior: 'smooth' })"

它滚的是 #main-grid，不是页面往下翻一屏。而 #main-grid 自己还带着 scroll-margin-top: 5.5rem（怕被吸顶导航栏盖住），所以点完之后它正好停在视口往下 88px 的位置 —— 条子在它前面，自然被甩到视口上方去了。

最终解法：让条子变成 #main-grid 的 grid item，靠 grid-column: 1 / -1 横跨全部列。

1
.ff-dyn {
2
  grid-column: 1 / -1;
3
  display: none;   /* 默认不显示，数据到位才放开 */
4
  margin: 0;       /* 行间距交给 #main-grid 自己的 gap-4 */
5
}

一举两得：既在 #main-grid 内部（箭头滚过来时它就在视野里），又拿到了横跨左右侧栏的全宽。

能这么改的前提是 #main-grid 用的是自动放置。它自己的样式注释写得很清楚：

1
/* #main-grid 列几何全部来自 --cols-* / --*-display-*；
2
   子元素不做定位：侧栏包裹层是 display:contents，真正的 grid item 是内层元素 */

没有写死列位置，所以插一个跨列 item 不会打乱左右侧栏的排布，其余 item 自动顺延到下一行。

另外 margin 必须清零 —— #main-grid 自带 gap-4，再叠一层 margin 就是双倍间距。

两个不显眼但会咬人的坑#

1. hidden 属性在这儿是失效的

一开始想用 hidden 控制「数据没来就别显示」，结果发现条子一直在页脚位置上挂着。

原因是作者样式的 .ff-dyn { display: flex } 和浏览器默认的 [hidden] { display: none } 特异性完全一样（都是 0,1,0），同分时后定义的赢 —— 作者样式胜出，hidden 直接被吃掉。

要么显式写一条：

1
.ff-dyn[hidden] { display: none; }

要么干脆别用 hidden。本站最后改成了加 .ff-dyn--ready 类来控制。

2. Vercel 给 /assets/* 配了 30 天强缓存

vercel.json 里这条会让改过的 js 在老访客那里一直是旧的：

1
{
2
  "source": "/assets/(.*)",
3
  "headers": [
4
    {
5
      "key": "Cache-Control",
6
      "value": "public, max-age=2592000, stale-while-revalidate=604800, must-revalidate"
7
    }
8
  ]
9
}

所以加载脚本时挂了个版本号，以后改脚本记得把 v= 往上加：

1
script.src = "/assets/js/home-dynamic-bar.js?v=1";

顺手测了下会不会拖慢首页#

这个是上线前最担心的：条子要等 Memos 数据回来才显示，会不会变成首页的阻塞项？

用无头浏览器跑了一组对照 —— 把 memos.49o.pw 的请求全部 abort，模拟接口整段挂掉：

FCP 两组一模一样，说明条子根本不在首屏的关键路径上。三个原因：

1. DOM 默认 display: none，不占布局也不参与渲染；
2. 那个 js 是动态创建插入的 async 脚本，不阻塞解析，也不阻塞 DOMContentLoaded；
3. 数据是页面渲染完之后才发起的客户端请求，拉不到就永远不显示。

它比首屏内容晚约 400ms 出现，而且是从无到有插进去的。因为首页横幅占满整屏、#main-grid 那一刻还在视口外，实测 CLS 是 0，没有可见的跳动。数据本身还带了 10 分钟的本地缓存，第二次访问基本是瞬时出现。

暗色模式直接跟着主题变量走，没额外写一套色：

上手步骤#

想照搬的话大概是这几步：

1. 在 FooterConfig.html 里追加条子的 DOM、样式和按需加载脚本（只在首页拉）
2. 新建 public/assets/js/home-dynamic-bar.js，数据源改成你自己的 Memos 实例和用户名
3. 脚本里 mount() 用 host.insertBefore(bar, host.firstChild) 把 DOM 插到 #main-grid 首位
4. 样式里给 .ff-dyn 加 grid-column: 1 / -1 拿全宽，margin 清零
5. 拉不到数据时不要加 .ff-dyn--ready，让它彻底不显示
6. 本地 astro build 验一次，确认图片都走了 _astro 管线

脚本里的几个参数集中在这几行，想调直接改：

1
var MAX_ITEMS = 12;        // 最多放几条
2
var SPEED = 48;            // 滚动速度 px/s，越小越慢
3
var MIN_DURATION = 20;     // 一轮最短几秒，内容太少时兜底

写在最后#

整个过程最贵的不是写代码，是想明白条子该插在哪。前后改了三版，最后一版其实是反过来利用了主题自己的 grid 布局 —— 要是 #main-grid 当初写死了列位置，这条路就走不通。

还有一件事得说清楚：现在首页横幅是全屏模式（mode: "fullscreen"），占满整个视口，所以条子在首屏之下，要点那个下滑箭头才看得到。