/

在 Astro 中構建可組合的布局

在 Astro 中構建可組合的布局

在建立網站時，我喜歡將所有的布局分散在不同的文件中。

假如我想建立一個登陸頁面。

我之前做的是一個純HTML的頁面。這非常好，沒有比這更簡單和更簡約的了。

但是後來我意識到我還想在網站上創建另一個類似的頁面，但具有相同的樣式和結構。

開始出現重複代碼的問題。然後我想要另一個頁面，最後我決定對所有頁面的標題進行更改，而這變得讓人沮喪。

這就是靜態網站生成器發揮作用的時候了。

在許多工具中，比如 Hugo，你可以使用 partials（局部文件）。

在 Astro 中，這全部基於組件，因此我們可以導入和嵌入 JSX 中的組件：

1
2
3
4
5
6
7
8
9
10
11
---
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 文件夾中創建佈局：

1
2
3
4
5
6
7
8
9
10
11
---
import Header from ../components/Header.astro
import Footer from ../components/Footer.astro
---
<html>
 <body>
 <Header />
 <slot />
 <Footer />
 </body>
</html>

注意 <slot /> 的使用方式。

這是我們可以在其中嵌入任何來自其他組件的內容的方法。

我們可以這樣使用佈局：

1
2
3
4
5
6
---
import MyLayout from '../layouts/MyLayout.astro'
---
<MyLayout>
 <h1>Homepage!</h1>
</MyLayout>

tags: [“Astro”, “靜態網站生成器”, “JSX”, “布局”, “組件”]