4 • 通过可复用的页面布局节省时间和精力

编写你的第一个布局

准备好…

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

你现在仍然在每个页面上重复渲染一些 Astro 组件。让我们再次重构，创建一个共享的页面布局！

编写你的第一个布局组件

标题部分 编写你的第一个布局组件

  1. 创建一个新文件：src/layouts/BaseLayout.astro（你需要首先创建一个 layouts 文件夹）。

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

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "首页";
    ---
    <html lang="zh-cn">
      <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>

在页面上使用你的布局

标题部分 在页面上使用你的布局

  1. 使用以下代码替换 src/pages/index.astro 中的代码：

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    const pageTitle = "首页";
    ---
    <BaseLayout>
      <h2>My awesome blog subtitle</h2>
    </BaseLayout>

  2. 再次查看浏览器预览，注意到发生了什么变化（或者直接剧透：没有变化！）。

  3. 在 src/layouts/BaseLayout.astro 的页脚组件上方添加一个 <slot /> 元素，然后查看你的首页在浏览器的预览中真正发生了什么变化！

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "首页";
    ---
    <html lang="zh-cn">
      <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 传递页面特定的值

标题部分 通过 props 传递页面特定的值

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

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    const pageTitle = "首页";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>My awesome blog subtitle</h2>
    </BaseLayout>

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

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "首页";
    const { pageTitle } = Astro.props;
    ---

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

试一试 - 在任何地方使用你的布局

标题部分 试一试 - 在任何地方使用你的布局

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

  • 通过组件属性将页面标题作为 props 传递。

  • 让布局负责渲染任何共同的 HTML。

  • 删除每个页面中不再负责渲染的任何内容，因为布局会来处理它，包括：

    • HTML 元素
    • 组件及其导入语句
    • <style> 标签中的 CSS 样式（例如，你的 About 页面中的 <h1>）
    • <script> 标签

检验你的知识

标题部分 检验你的知识

  1. Astro 组件（.astro 文件）可以用作：

  2. 要在页面上显示页面，你可以

  3. 可以通过以下什么方式将信息从一个组件传递到另一个组件：

任务清单

标题部分 任务清单

相关资源

标题部分 相关资源