构建你的第一个布局

Get ready to…

将常见元素重构为页面布局
使用 Astro <slot /> 元素将页面内容放置在布局中
将特定于页面的值作为其布局的属性传递

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

¥You still have some Astro components repeatedly rendered on every page. It’s time to refactor again to create a shared page layout!

创建你的第一个布局组件

¥Create your first layout component

Create a new file at the location src/layouts/BaseLayout.astro. (You will need to create a new layouts folder first.)

Copy the entire contents of index.astro into your new file, 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>

在页面上使用你的布局

¥Use your layout on a page

Replace the code at src/pages/index.astro with the following:

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

Check the browser preview again to notice what did (or, spoiler alert: did not!) change.

Add a <slot /> element to src/layouts/BaseLayout.astro just above the footer component, then check the browser preview of your Home page and notice what really did change this time!

---
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 文件。

¥The <slot /> allows you to inject (or “slot in”) child content written between opening and closing <Component></Component> tags to any Component.astro file.

将特定于页面的值作为属性传递

¥Pass page-specific values as props

Pass the page title to your layout component from index.astro using a component attribute:

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

Change the script of your BaseLayout.astro layout component to receive a page title via Astro.props instead of defining it as a constant.

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

Check your browser preview to verify that your page title has not changed. It has the same value, but is now being rendered dynamically. And now, each individual page can specify its own title to the layout.

自己尝试一下 - 随处使用你的布局

¥Try it yourself - Use your layout everywhere

重构其他页面（blog.astro 和 about.astro），以便它们使用你的新 <BaseLayout> 组件来渲染通用页面元素。（注意：使用 BaseLayout 呈现你的 about.astro 页面意味着你将丢失添加到此页面 <head> 的 <style> 标记。如果你想保留自定义 <h1> 样式，请将样式标记移动到页面组件的主体。）

¥Refactor your other pages (blog.astro and about.astro) so that they use your new <BaseLayout> component to render the common page elements. (Note: using the BaseLayout to render your about.astro page means you will lose the <style> tag added to the <head> of this page. If you want to keep the custom <h1> style, move the style tag to the body of the page component.)

不要忘记：

¥Don’t forget to:

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

清单

¥Checklist

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

资源

¥Resources

构建你的第一个布局

创建你的第一个布局组件

在页面上使用你的布局

将特定于页面的值作为属性传递

自己尝试一下 - 随处使用你的布局

测试你的知识

清单

资源