跳转到内容

创建一个可重复使用的导航组件

现在你的 Astro 站点的多个页面上都有相同的 HTML 代码，是时候用一个可复用的 Astro 组件替换这些重复的内容！

Get ready to…

为组件创建一个新的文件夹
构建一个 Astro 组件来显示导航链接
用这个导航组件替换现有的 HTML 代码

创建 `src/components/` 文件夹

你需要在项目中创建一个新的文件夹 src/components/ 来容纳 .astro 文件，它们会被用来生成 HTML 代码，但不会成为网站上的新页面。

创建一个导航组件

创建一个新文件：src/components/Navigation.astro。
将任意页面顶部的导航链接复制并粘贴到你的新文件 Navigation.astro 中：
src/components/Navigation.astro
```
---
---
<a href="/">首页</a>
<a href="/about/">关于</a>
<a href="/blog/">博客</a>
```
如果你的 .astro 文件的 frontmatter 中没有任何内容，你可以不写代码块标记。当你需要时，再加上即可。

导入并使用 Navigation.astro

回到 index.astro，在代码块中导入你的新组件：

---
import Navigation from '../components/Navigation.astro';
import "../styles/global.css";

const pageTitle = "首页";
---

然后，在下方用你刚刚导入的新导航组件替换现有的导航 HTML 链接元素：
src/pages/index.astro
```
<a href="/">首页</a>
<a href="/about/">关于</a>
<a href="/blog/">博客</a>
<Navigation />
```
在浏览器中预览，它应该看起来完全相同……这就是你想要的！

你的站点生成了与之前完全相同的 HTML 代码。但现在，这三行代码由你的 <Navigation /> 组件提供。

自己试一试 - 在网站的其余页面上添加导航

使用相同的方法在你的网站的另外两个页面（about.astro 和 blog.astro）中导入并使用 <Navigation /> 组件。

不要忘记：

在组件脚本的顶部，也就是代码块内添加一个导入语句。
用导航组件替换现有的代码。

检验你的知识

当元素在多个页面上重复出现时，你可以：
1. 重新启动开发服务器
2. 重构以让组件可以复用
3. 创建一个新页面
Astro 组件是：
1. 可重复使用的
2. HTML 片段
3. 以上两者都是！
当你……的时候 Astro 组件会自动在你的站点中创建一个新的页面：
1. 引入 <html></html>
2. 重构
3. 将 .astro 文件放在 src/pages/ 中

任务清单

我可以将内容重构为可重复使用的组件。
我可以在 .astro 页面中添加一个新的组件。

相关资源

Astro 组件概述
重构外部链接