初月_Yuechu

外壳与内容的分工#

flowchart TB
  Shell[持久化外壳：导航、侧栏、页脚]
  Container[#swup-container：可替换页面内容]
  Shell --> Container
  Container --> PageA[页面 A]
  Container --> PageB[页面 B]

外壳只渲染一次，页面内容在每次导航时被替换。这样避免了重复渲染，但也带来一个关键问题：外壳里的代码不会因为路由变化而重新执行。

生命周期比事件名更重要#

如果一段逻辑依赖当前页面的数据，它就不能只在首次加载时运行。常见做法是监听 Swup 的生命周期：

1
document.addEventListener("astro:page-load", () => {
2
  initPageScopedFeatures();
3
});

我在处理筛选器、代码块增强和图表初始化时，都同时验证了这两种路径。测试时不能只刷新页面，还要从其他页面点进来。

事件委托比重新绑定更稳#

页面内容被替换后，之前绑定在旧 DOM 上的事件监听器也会一起消失。与其每次导航后重新绑定，不如把监听器放在持久化的父节点上，用事件委托处理：

1
document.addEventListener("click", (event) => {
2
  const target = event.target as HTMLElement;
3
  const button = target.closest("[data-copy]");
4
  if (!button) return;
5
  copyToClipboard(button.dataset.copy ?? "");
6
});

体验与复杂度的交换#

无刷新导航买到的是体验，付出的是对生命周期的理解。

小结#

Swup 不是「装上就变好」的插件。它要求开发者明确区分「一次性外壳」和「可替换页面」，并在正确的生命周期里做正确的事。

理解这一点之后，无刷新导航才真正成为体验优化，而不是隐藏的 bug 来源。