创建社交媒体 footer

Get ready to…

创建一个页脚组件
创建并传递参数到一个社交媒体组件

现在你已经在页面上使用了 Astro 组件，是时候在一个组件中使用另一个组件！

创建一个页脚组件

创建一个新文件：src/components/Footer.astro。

将以下代码复制到你的新文件 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`

在每个 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 中。

---
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

在你的页脚中导入并使用 `Social.astro`

修改 src/components/Footer.astro 中的代码，导入并使用这个新组件三次，每次传递不同的组件参数作为 props：

---
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> 标签，自定义链接的外观。

---
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> 标签，以改善其内容的布局。

---
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 接收？
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />
如何将值作为 props 传递给 Astro 组件？
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />

任务清单

我可以在 src/components/ 中创建新的 .astro 组件
我可以在其他 Astro 组件内部导入和使用 Astro 组件。
我可以将参数传递给 Astro 组件。

创建社交媒体 footer

创建一个页脚组件

导入并使用 `Footer.astro`

自己试一试 - 个性化你的页脚

代码检查

创建一个社交媒体组件

在你的页脚中导入并使用 `Social.astro`

给你的社交媒体组件添加样式

自测

任务清单

相关资源

What’s on your mind?

Create GitHub Issue

Send us feedback

Send us feedback

创建社交媒体 footer

创建一个页脚组件

导入并使用 Footer.astro

自己试一试 - 个性化你的页脚

代码检查

创建一个社交媒体组件

在你的页脚中导入并使用 Social.astro

给你的社交媒体组件添加样式

自测

任务清单

相关资源

导入并使用 `Footer.astro`

在你的页脚中导入并使用 `Social.astro`