创建社交媒体页脚

Get ready to…

创建页脚组件
创建属性并将其传递给社交媒体组件

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

¥Now that you have used Astro components on a page, it’s time to use a component within another component!

创建页脚组件

¥Create a Footer Component

Create a new file at the location src/components/Footer.astro.

Copy the following code into your new file, 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`

¥Import and use Footer.astro

Add the following import statement to the frontmatter in each of your three Astro pages (index.astro, about.astro, and blog.astro):
```
import Footer from '../components/Footer.astro';
```
Add a new <Footer /> component in your Astro template on each page, just before the closing </body> tag to display your footer at the bottom of the page.
```
    <Footer />
  </body>
</html>
```
In your browser preview, check that you can see your new footer text on each page.

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

¥Try it yourself - Personalize your footer

自定义页脚以显示多个社交网络（例如 Instagram、Twitter、LinkedIn），并包含你的用户名以直接链接到你自己的个人资料。

¥Customize your footer to display multiple social networks (e.g. Instagram, Twitter, LinkedIn) and include your username to link directly to your own profile.

代码签入

¥Code Check-In

如果你一直遵循本教程中的每个步骤，你的 index.astro 文件应如下所示：

¥If you’ve been following along with each step in the tutorial, your index.astro file should look like this:

---
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>

创建社交媒体组件

¥Create a Social Media component

由于你可能有多个可以链接到的在线账户，因此你可以制作一个可重复使用的组件并多次显示它。每次，你都会向其传递不同的属性（props）以供使用：在线平台和你的用户名。

¥Since you might have multiple online accounts you can link to, you can make a single, reusable component and display it multiple times. Each time, you will pass it different properties (props) to use: the online platform and your username there.

Create a new file at the location src/components/Social.astro.

Copy the following code into your new file, Social.astro.

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

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

¥Import and use Social.astro in your Footer

Change the code in src/components/Footer.astro to import, then use this new component three times, passing different component attributes as props each time:

---
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>

Check your browser preview, and you should see your new footer displaying links to these three platforms on each page.

设计你的社交媒体组件

¥Style your Social Media Component

Customize the appearance of your links by adding a <style> tag to 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>

Add a <style> tag to src/components/Footer.astro to improve the layout of its contents.

---
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>

Check your browser preview again and confirm that each page shows an updated footer.

测试自己

¥Test Yourself

你需要在 Astro 组件的 frontmatter 中编写哪行代码才能接收 title、author 和 date 的值作为 props？

如何将值作为 props 传递给 Astro 组件？

清单

¥Checklist

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

资源

¥Resources

Astro 中的组件 Props