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 頁面構建博客