编写你的第一个布局
准备好…
- 将常见元素重构为页面布局
- 使用 Astro 的
<slot />
元素将页面内容放置在布局中 - 将页面特定的值作为 props 传递给布局
你现在仍然在每个页面上重复渲染一些 Astro 组件。是时候再次重构,创建一个共享的页面布局!
编写你的第一个布局组件
段落标题 编写你的第一个布局组件-
创建一个新文件:
src/layouts/BaseLayout.astro
(你需要首先创建一个layouts
文件夹)。 -
将
index.astro
的全部内容复制到你的新文件BaseLayout.astro
中。
在页面上使用你的布局
段落标题 在页面上使用你的布局-
使用以下代码替换
src/pages/index.astro
中的代码: -
再次查看浏览器预览,注意到发生了什么变化(剧透警告:没有 变化!)。
-
在
src/layouts/BaseLayout.astro
的页脚组件上方添加一个<slot />
元素,然后查看你的首页在浏览器的预览中 真正 发生了什么变化!
<slot />
允许你将写在开放和闭合 <Component></Component>
标签之间的子内容注入(或者说是「插入」)到任何 Component.astro
文件中。
通过 props 传递页面特定的值
段落标题 通过 props 传递页面特定的值-
使用组件属性将页面标题从
index.astro
传递给你的布局组件: -
将
BaseLayout.astro
布局组件的脚本更改为通过Astro.props
接收页面标题,而不是将其定义为常量。 -
检查你的浏览器预览,确认页面标题是否有变动。它应该和之前一样,但现在是动态渲染的。现在,每个独立的页面都可以指定自己的标题给布局。
试一试 - 在任何地方使用你的布局
段落标题 试一试 - 在任何地方使用你的布局重构你的其他页面(blog.astro
和 about.astro
),使它们使用你的新的 <BaseLayout>
组件来渲染共同的页面元素。(注意:使用 BaseLayout 渲染 about.astro
页面意味着你将丢失添加到该页面 <head>
的 <style>
标签。如果你想保留 <h1>
的自定义样式,需要将 style 标签移动到页面组件的 body 部分。)
不要忘记:
-
通过组件属性将页面标题作为 props 传递。
-
让布局负责渲染任何共同的 HTML。
-
将页面
<head>
中任何现有的<style>
标签以及你希望保留的样式移动到页面 HTML 模板中。 -
删除由布局正在处理的每个单独页面中的内容,包括:
- HTML 元素
- 组件及其导入语句
<style>
标签中的 CSS 样式(例如,你的 About 页面中的<h1>
)<script>
标签
检验你的知识
段落标题 检验你的知识-
Astro 组件(
.astro
文件)可以用作: -
要在页面上显示页面标题,你可以
-
可以通过以下什么方式将信息从一个组件传递到另一个组件: