Jekyll 静态页面的骨干路由/历史问题

Question

我正在使用 Jekyll 构建一个简单的营销网站，并在后台使用 Backbone 的路由和历史来处理导航。我网站的每个页面都是它自己的 HTML 文件，我的策略是在页面之间的链接上使用 preventDefault()，触发 jQuery.get() 以获取新的 HTML，并用新页面中的信息替换我的 div.content。

我知道这个设置有点不寻常，但我有我的理由：单页结构更可取，因为我希望精确控制页面转换，并且我希望避免每次用户导航时都请求我的 webfonts到一个新的页面。保持 HTML 文件静态和独立也是搜索引擎的一个胜利。

问题是：当我从根 URL 开始时一切正常，但当我从不同页面开始时，例如mydomain.com/page1，历史打破。在初始化期间，我的路由器尝试将我路由到我已经打开的页面，导致 404：Could not GET mydomain.com/page1/page1。我可以用一个 hacky isFirstLoad boolean 来防止这种情况，但这显然很糟糕，当我开始点击并使用后退按钮返回 /page1 时它不会中断。

我认识到一种解决方案是编写一些服务于我的index.html 的服务器端逻辑，而不管命中了什么 URL。但是，我不确定如何执行此操作，尤其是对于本地环境。是关于 PHP 还是 .htaccess？这甚至是我必须做的吗？我是不是走错了路？

谢谢！

Answer 1

是的，一种解决方案是使用index.html 处理每个请求。但这有一个很大的缺点：搜索引擎不再可以访问您的网站。为了保持拥有静态网站的 SEO 优势，我建议您避免使用该选项。

我认为 Backbone 已经提供了最佳解决方案。来自their documentation：

如果服务器已经渲染了整个页面，并且您不希望在启动 History 时触发初始路由，请传递 silent: true。

所以，首先确保您的路由器配置正确并且所有路由都与您的静态页面匹配，然后实例化路由器。

然后，像这样开始历史记录：

Backbone.history.start({ pushState: true, silent: true, root: '/' });

推送状态将有助于保持 URL 友好。 Silent 标志告诉 Backbone 您的静态服务器已经为该页面提供服务，并且它只是在事后加载（您想要的）。并且 Root 配置确保 Backbone 知道您网站的真正根是什么（因此您不会得到 page1/page1 的废话。

根据我的经验，正确设置路由可能有点变幻莫测...祝你好运！