创建社交媒体 footer
准备好…
- 创建一个页脚组件
- 创建并传递参数到一个社交媒体组件
现在你已经在页面上使用了 Astro 组件，是时候在一个组件中使用另一个组件！
创建一个页脚组件
段落标题 创建一个页脚组件-
创建一个新文件：
src/components/Footer.astro。 -
将以下代码复制到你的新文件
Footer.astro中。src/components/Footer.astro ---const platform = "github";const username = "withastro";---<footer><p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p></footer>
导入并使用 Footer.astro
段落标题 导入并使用 Footer.astro-
在每个 Astro 页面（
index.astro、about.astro和blog.astro）的前置元数据中添加以下导入语句：import Footer from '../components/Footer.astro'; -
在每个页面的 Astro 模板中，在
</body>标签之前添加一个新的<Footer />组件，以在页面底部显示页脚。<Footer /></body></html> -
在浏览器预览中，检查每个页面是否都能看到新的页脚文本。
自己试一试 - 个性化你的页脚
段落标题 自己试一试 - 个性化你的页脚自定义你的页脚，展示多个社交网络（如 Instagram、Twitter、LinkedIn）并包括你的用户名以直接链接到你自己的个人资料。
代码检查
段落标题 代码检查如果你一步一步按照教程进行操作，你的 index.astro 文件应该如下所示：
---import Navigation from '../components/Navigation.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> <Navigation /> <h1>{pageTitle}</h1> <Footer /> </body></html>创建一个社交媒体组件
段落标题 创建一个社交媒体组件由于你可能有多个可以展示的社交媒体账号，你可以创建一个单独的、可重用的组件，并在多个位置显示它。每次显示时，你将传递不同的参数（props）给它，即社交媒体名称和你在该社交媒体上的用户名。
-
创建一个新文件：
src/components/Social.astro。 -
将以下代码复制到你的新文件
Social.astro中。src/components/Social.astro ---const { platform, username } = Astro.props;---<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
在你的页脚中导入并使用 Social.astro
段落标题 在你的页脚中导入并使用 Social.astro-
修改
src/components/Footer.astro中的代码，导入并使用这个新组件三次，每次传递不同的组件参数作为 props：src/components/Footer.astro ---const platform = "github";const username = "withastro";import Social from './Social.astro';---<footer><p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p><Social platform="twitter" username="astrodotbuild" /><Social platform="github" username="withastro" /><Social platform="youtube" username="astrodotbuild" /></footer> -
检查浏览器上的预览，你应该在每个页面上看到新的页脚，显示链接到这三个平台的链接。
给你的社交媒体组件添加样式
段落标题 给你的社交媒体组件添加样式-
通过在
src/components/Social.astro中添加一个<style>标签，自定义链接的外观。src/components/Social.astro ---const { platform, username } = Astro.props;---<a href={`https://www.${platform}.com/${username}`}>{platform}</a><style>a {padding: 0.5rem 1rem;color: white;background-color: #4c1d95;text-decoration: none;}</style> -
同样，在
src/components/Footer.astro中添加一个<style>标签，以改善其内容的布局。src/components/Footer.astro ---import Social from './Social.astro';---<style>footer {display: flex;gap: 1rem;margin-top: 2rem;}</style><footer><Social platform="twitter" username="astrodotbuild" /><Social platform="github" username="withastro" /><Social platform="youtube" username="astrodotbuild" /></footer> -
再次检查浏览器上的预览，确认每个页面都显示更新后的页脚。
自测
段落标题 自测-
你需要在 Astro 组件的前置元数据中写入什么代码来将
title、author和date的值作为 props 接收？ -
如何将值作为 props 传递给 Astro 组件？