在Astro中构建可组合的布局当我在一个网站上工作时，我喜欢的事情之一是能够在不同的文件中分割所有的布局。比方说，我想

当我在一个网站上工作时，我喜欢的事情之一是能够在不同的文件中分割所有的布局。

比方说，我想创建一个登陆页面。

我做的最后一个页面是纯HTML的。这很好，没有比这更简单、更简单的了。

但后来我开始意识到，我也想在网站上创建一个不同的页面，它看起来很相似，但有相同的风格和结构。

复制开始发生了。然后我想要另一个页面，最后我决定改变所有页面的标题，这很令人沮丧。

这时，静态网站建设者就会帮忙。

在许多工具中，如Hugo，你使用参数。

在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 文件夹中创建布局。

src/layouts/MyLayout.astro

---
import Header from ../components/Header.astro
import Footer from ../components/Footer.astro
---
<html>
  <body>
    <Header /> 
    <slot />
    <Footer />
  </body>
</html>

注意使用<slot /> 。

这就是我们可以在里面嵌入任何东西的方式，从另一个组件。

我们以这种方式使用布局。

src/pages/index.astro

---
import MyLayout from '../layouts/MyLayout.astro'
---
<MyLayout>
  <h1>Homepage!</h1>
</MyLayout>