S(GH)PA：GitHub 页面的单页应用程序破解

已发表: 2022-03-10
快速总结↬ lorem ipsum

一段时间以来，我一直希望能够将 GitHub Pages 网站的路径路由到其 index.html，以便作为单页应用程序 (SPA) 进行处理。 这是赌注，因为此类应用程序要求将所有请求路由到一个 HTML 文件，除非您每次对项目进行更改时都希望在所有路由中复制相同的文件。 目前，GitHub Pages 不提供路由处理解决方案； Pages 系统旨在成为提供基本项目内容的扁平、简单的机制。

如果您不知道，GitHub 确实为您的项目网站提供了一点自定义功能：添加404.html文件并将其用作您的自定义错误页面的能力。 只需复制我的index.html文件并将副本重命名为404.html ，我就首次尝试了 SPA hack。 事实证明，许多人在使用 GitHub Pages 时遇到过同样的问题，并且喜欢这个总体思路。 然而，推特上一些人正确提出的问题是404.html页面仍然以 404 的状态码提供服务，这对搜索引擎爬虫不利。 手套已经被扔掉了，我决定回答——并且充满活力地回答！

再来一次，有感觉

睡在上面之后，我心想：“我自己，我们在肮脏的黑客领域很深，所以我为什么不让这个黑客更肮脏呢？！” 为此，我开发了一个更好的 hack，它提供了相同的功能和简单性，同时还保留了您网站的爬虫汁——您甚至不需要浪费时间复制您的index.html文件并将其重命名为404.html ！ 以下解决方案应适用于所有现代桌面和移动浏览器（Edge、Chrome、Firefox、Safari）和 Internet Explorer 10+。

模板和演示：如果您想跳过解释并获得商品，这里有一个模板 repo，和一个测试 URL 以查看它的实际效果。

跳跃后更多！ 继续往下看↓

太元了

我做的第一件事是研究让浏览器重定向到index.html页面的其他选项。 那部分非常简单。 您基本上有三个选项：服务器配置、JavaScript location操作或refresh元标记。 第一个显然是 GitHub 页面的禁忌。 并且 JavaScript 与刷新基本相同，但对于爬虫索引来说可能更糟。 这给我们留下了元标记。 刷新值为0的元标记似乎被搜索引擎视为 301 重定向，这非常适合此用例。

您需要首先将404.html文件添加到gh-pages存储库，其中包含一个空的 HTML 文档。 该文档的总长度必须超过 512 个字节（如下所述）。 接下来，将以下标记放入404.html页面的head元素中：

 <script> sessionStorage.redirect = location.href; </script> <meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'">

此代码将尝试的入口 URL 设置为标准 sessionStorage 对象上的变量，并使用元刷新标记立即重定向到项目的index.html页面。 如果你在做一个 Github 组织站点，不要在内容属性替换文本中放置 repo 名称，只需这样做： content=“0;URL='/'”

自定义路由处理

如果您想要更精细的路由处理，只需在上面显示的script标记中包含一些额外的 JavaScript 逻辑。 您可以调整几件事：传递给index.html页面的href的组成； 哪些页面应该保留在 404 页面上（通过动态删除元标记）； 以及您想要实施的任何其他逻辑，以根据入站路线指示显示哪些内容。

512个神奇字节

毫无疑问，这是我在 Web 开发中遇到的最奇怪的怪癖之一。 您必须确保404.html页面的总大小大于 512 字节，因为如果不是，Internet Explorer 将忽略它并显示通用浏览器 404 页面。 当我终于弄清楚这一点时，我不得不打开一瓶啤酒来应对所花费的时间。

让我们创造历史

要捕获和恢复用户最初导航到的 URL，您需要在任何其他 JavaScript 作用于页面的当前状态之前将以下script标记添加到index.html页面的head ：

 <script> (function(){ var redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect != location.href) { history.replaceState(null, null, redirect); } })(); </script>

这段 JavaScript 检索我们在sessionStorage中缓存在404.html页面上的 URL，并用它替换当前的history条目。 你如何选择从这里处理事情取决于你，但如果我是你，我会使用popstate和hashchange 。

好吧，伙计们，就是这样。 现在通过在 GitHub Pages 上编写一些单页应用来庆祝吧！

本文是 Microsoft 技术传播者和工程师关于实用 JavaScript 学习、开源项目和互操作性最佳实践（包括 Microsoft Edge 浏览器）的 Web 开发系列的一部分。

我们鼓励您使用 dev.microsoftedge.com 上的免费工具（包括 F12 开发人员工具）跨浏览器和设备（包括 Microsoft Edge — Windows 10 的默认浏览器）进行测试：七种不同的、完整记录的工具可帮助您调试、测试和加速您的网页。 此外，请访问 Edge 博客以了解 Microsoft 开发人员和专家的最新信息。

关于 SmashingMag 的进一步阅读：

  • 从开发到部署的简单工作流程
  • 在 Foundation For Apps 中创建一个完整的 Web 应用程序
  • 使用 Jekyll 和 GitHub 页面构建博客