将大量小的HTML页面拼接在一起，配以用于交互的导航

Source: Hacker News

引言

我写过一篇关于使用 LLM 构建网站的文章——（L）ots of（L）ittle ht(M)l page(s)——我认为现在该对这种方法做一次事后分析了。

我很喜欢它。

我对原文做了一些小调整，但核心思路仍然相同，我会把它描述为：

避免需要 JavaScript 的页面内交互，而是采用依赖 HTML、并通过 CSS 视图过渡增强的多页面导航（在必要时适度使用少量 JS）。

示例：菜单导航

在我的博客里有一个“菜单”。它不像典型的 JavaScript 小部件那样“展开”“滑出”或“弹入”。相反，它会导航到一个专门展示菜单选项的全新页面。

导航仅仅是一个普通链接：

[…](/menu/)

在现代浏览器中，过渡会通过 CSS 视图过渡得到增强，呈现更平滑的效果。在旧版浏览器或禁用 JavaScript 时，链接仍然可以正常工作，因为它只是普通的导航。

工作原理

所有页面（除菜单页外）都包含指向菜单的链接。当你导航到菜单时，该链接会变成一个“X”，用于“关闭”菜单。关闭链接指向主页 (/)，并通过一小段 JavaScript 在可能的情况下执行 history.back()，以防止在浏览器历史中产生额外条目。

  

    …
  

  
    …
  

document.referrer 检查用于判断用户是通过导航（通常来自博客内部）还是直接输入 URL 访问的。如果存在有意义的历史记录条目，则使用 history.back()；否则页面会重定向到 /。

可视化概览

视频演示

下面是演示全部工作原理的视频（如果你喜欢看视频的话）：（视频链接已省略）

结论

虽然这个方案看起来很简洁，但实现它需要对导航的本质、交互如何跨页面以及如何保持页面体积小以实现快速、稳健的性能进行深思熟虑。当你把浏览器主要视为文档导航器，而不是任意代码的运行时，许多设计复杂性就会消失，从而带来更简洁、更易维护的 Web 体验。