问题
我最近试用了HUGO，与我以前接触过的静态网站构建器Gatsby和NextJS相比，它的简单和快速让我感到非常惊讶。
在我看来最重要的缺点是盖茨比产生了
- 传统静态网站，其中每个站点内部导航重新请求所有公共依赖并丢失所有状态，而其他两个使
- spa，站点内部导航不会导致普通Javascript被重新处理。
虽然spa的优点很多，但我只关注关于页内导航的要点:
- 这是更快。保持站点导航快速以避免向用户暴露公共页面元素的重新呈现是很重要的(体验恼人的菜单闪烁甚至页面背景)。静态网站页面可以在50毫秒左右的时间内完成，但如果浏览器需要再次评估脚本，则通常无法足够快地完成其余工作。例如，用HUGO构建的bootstrap文档，响应非常快，但仍然不够快:它经常在导航上闪烁——即使主要内容在不到100毫秒的时间内加载。
- 状态可以持久化。这一点很重要，因为传统的非spa网站上使用的许多Javascript标签都可以利用这一点:例如，一个聊天窗口在动画中进入屏幕，但是只是第一次-然后它就停留在内部导航的位置。
我在这里问我如何在继续使用快速和简单的HUGO的同时，仍然至少获得这两个优点。
一个可能的解决方案?
我能想到的一种有点粗糙但很通用的方法是编写一段通用的Javascript，就像spa一样，
- 拦截浏览器导航，
- 修改所有
a标签来拦截点击， - 用AJAX加载新页面，而不是允许浏览器处理，
- 修改内容并修复历史记录
在我的情况下，我非常高兴有限制，有相同的head元素和不可变的外部布局(菜单应该在其中，仍然每次加载)，除了选择几个项目，如页面标题。
我的问题是
- 有更简单的方法吗?
- 这个方法有我没有看到的问题吗?
- 我必须自己写这个还是已经有我可以建立的东西?
你可以在你的hugo项目中使用turbo by hotwired，你只需要通过npm/yarn安装它
npm i @hotwired/turbo
，然后导入到你的JavaScript配置中，像这样:
import * as Turbo from "@hotwired/turbo"
现在你的雨果网站看起来像一个SPA网站。也许这个网站对你来说是一个例子:https://www.petanikode.com/