在 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 '....