Home » Tags

靜態網站生成器

在 Astro 中構建可組合的布局

在建立網站時，我喜歡將所有的布局分散在不同的文件中。 假如我想建立一個登陸頁面。 我之前做的是一個純HTML的頁面。這非常好，沒有比這更簡單和更簡約的了。 但是後來我意識到我還想在網站上創建另一個類似的頁面，但具有相同的樣式和結構。 開始出現重複代碼的問題。然後我想要另一個頁面，最後我決定對所有頁面的標題進行更改，而這變得讓人沮喪。 這就是靜態網站生成器發揮作用的時候了。 在許多工具中，比如 Hugo，你可以使用 partials（局部文件）。 在 Astro 中，這全部基於組件，因此我們可以導入和嵌入 JSX 中的組件： --- import Header from ../components/Header.astro import Footer from ../components/Footer.astro --- <html> <body> <Header /> <h1>A page</h1> <Footer /> </body> </html> 然後我們可以在組件中複製/粘貼這個結構。 請注意，其中仍然有一些我們可以提取的 HTML 內容，以避免複製/粘貼代碼。 我們使用佈局來實現這一點。 您可以在 src/layouts 文件夾中創建佈局： --- import Header from ../components/Header.astro import Footer from ../components/Footer.astro --- <html> <body> <Header /> <slot /> <Footer /> </body> </html> 注意 <slot /> 的使用方式。 這是我們可以在其中嵌入任何來自其他組件的內容的方法。 我們可以這樣使用佈局： --- import MyLayout from '....

如何在 Netlify 重寫中處理尾斜線問題

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> 這樣，如果網址末尾沒有尾斜線，頁面會立即重新載入，並在末尾添加尾斜線。 這個過程非常迅速，對使用者來說幾乎是不可見的。