将大量小的HTML页面通过导航拼接以实现交互

Source: Hacker News

为什么我喜欢它

我写过一篇关于使用 LLM 构建网站的文章——（L）ots of（L）ittle ht(M)l page(s)——我觉得现在是对这种方法进行事后分析的时候了。

我对原文做了一些小调整，但核心思想仍然相同：

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

一个真实案例

在我的博客里有一个 菜单。它不会通过 JavaScript “展开”、 “滑出” 或 “弹出”。相反，它 导航 到一个全新的页面，该页面只专注于站点的菜单选项。

导航仅仅是一个链接：

[…](/menu/)

而交互则通过 CSS 视图过渡得到增强。

• 现代浏览器？ 你会看到更好的效果。
• 旧浏览器、禁用 JS 等情况？ 仍然可以工作，因为链接是浏览器能执行的最基本操作。

工作原理

所有页面（除菜单页外）都包含指向菜单的链接。当你导航到菜单时，该链接会变成一个 “X”，关闭 菜单。关闭链接仍然只是一个指向 / 的链接，但它通过少量 JavaScript 在可能的情况下执行 history.back()，从而避免在浏览器历史中产生额外条目。

…

document.referrer 检查用于判断用户是通过导航（很可能是从博客内部）还是直接访问（例如手动输入 URL）进入页面。如果有有意义的历史记录条目，则使用 history.back()；否则页面会重定向到首页 URL。

可视化概览

视频演示

(如有需要，可在此插入视频嵌入或链接。)

反思

虽然这个方案看起来很简洁，但实现它需要对导航的本质、交互如何跨多个页面以及如何保持页面体积小以实现快速、稳健且直观的使用进行深入思考。换句话说，这种方法 塑造了设计。

当你把浏览器主要视为文档导航器，而不是任意代码的运行时，得到的架构往往比许多现代工具让我们相信的要简单得多。