创建一个社交媒体页脚

准备好去……

创建一个页脚组件
创建社交媒体组件并向其传递 props

现在你已经在一个页面上使用过 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）的 frontmatter 中
```
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 = 'Home Page';
---

<html lang="en">
  <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 组件的 frontmatter 中编写哪一行代码来接收 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" />
你如何向 Astro 组件传递值作为 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" />

清单

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

创建一个社交媒体页脚

创建一个页脚组件

导入并使用 `Footer.astro`

亲自动手 - 个性化你的页脚

代码检查点

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

自我测试

清单

相关资源

创建一个社交媒体页脚

创建一个页脚组件

导入并使用 Footer.astro

亲自动手 - 个性化你的页脚

代码检查点

创建一个社交媒体组件

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

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

自我测试

清单

相关资源

导入并使用 `Footer.astro`

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