Netlify 有一個很棒的功能,稱為 rewrites,可以讓我創建許多重複的頁面。但是有個限制。
在 Netlify 中,我們可以通過將這些頁面添加到專案的公共根目錄下的 _redirects
文件(例如在 Hugo 中是 public/_redirects
)來進行重寫。
我將它用於一些網站。
假設我在 content/original
下有一堆頁面,我可以透過以下方法進行重寫:
/copy/\* /original/:splat 200
這樣,當我訪問網址 /copy
時,內容實際上是儲存在 https://mysite.com/original
,但網址並不會改變。雖然 _redirects
命名中有「導向」的意思,但實際上它是一個重寫,因為我使用的是 200
狀態碼。如果我使用了 301 狀態碼,那麼這就是一個 301 導向。
無論如何,我遇到的問題是:沒有辦法自動在網址末尾添加尾斜線。因此,如果你訪問 /copy
和 /copy/
,並且在圖片和連結中使用相對 URL,沒有尾斜線的 URL 會導致 404 錯誤和圖片無法正常顯示。
我在靜態網站生成器中尋找解決方案,看看是否可以以其他方式實現重寫,但最終我找到的解決方案在客戶端實現。
而且非常簡單。
我只需在頁面底部添加以下 JavaScript 代碼:
<script>
(function() {
if (!location.href.endsWith('/')) {
window.location = location.href + '/';
}
}());
</script>
這樣,如果網址末尾沒有尾斜線,頁面會立即重新載入,並在末尾添加尾斜線。
這個過程非常迅速,對使用者來說幾乎是不可見的。