构建你的第一个布局

准备好……

将通用元素重构为页面布局
使用 Astro 的 <slot /> 元素将页面内容放置在布局中
将页面特定值作为 props 传递给其布局

你仍然有一些 Astro 组件在每个页面上重复渲染。是时候再次重构以创建一个共享的页面布局了！

创建你的第一个布局组件

在 src/layouts/BaseLayout.astro 位置创建一个新文件。（你需要先创建一个新的 layouts 文件夹。）

将 index.astro 的 全部内容 复制到你的新文件 BaseLayout.astro 中。

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

在页面上使用你的布局

用以下内容替换 src/pages/index.astro 中的代码

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout>
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

再次检查浏览器预览，注意有什么变化（或者，剧透一下：什么都没有变！）。

在 src/layouts/BaseLayout.astro 的页脚组件正上方添加一个 <slot /> 元素，然后检查你的主页的浏览器预览，看看这次真正有什么变化！

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <slot />
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

<slot /> 允许你将写在 <Component></Component> 开始和结束标签之间的 子内容 注入（或“插入”）到任何 Component.astro 文件中。

将页面特定值作为 props 传递

使用组件属性将页面标题从 index.astro 传递给你的布局组件

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

更改 BaseLayout.astro 布局组件的脚本，以通过 Astro.props 接收页面标题，而不是将其定义为常量。

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
const { pageTitle } = Astro.props;
---

检查你的浏览器预览，验证页面标题没有改变。它的值相同，但现在是动态渲染的。现在，每个单独的页面都可以为布局指定自己的标题。

亲自动手 - 在所有地方使用你的布局

重构你的其他页面（blog.astro 和 about.astro），使它们使用你新的 <BaseLayout> 组件来渲染公共页面元素。

别忘了

通过组件属性将页面标题作为 props 传递。
让布局负责渲染任何通用元素的 HTML。
将页面 <head> 中任何你希望保留的现有 <style> 标签移动到页面的 HTML 模板中。
从每个单独的页面中删除现在由布局处理的任何内容，包括
- HTML 元素
- 组件及其导入
- <style> 标签中的 CSS 规则（例如，你的“关于”页面中的 <h1>）
- <script> 标签

清单

我可以使用 <slot /> 创建一个 Astro 布局组件。
我可以将页面特定的属性发送到布局。