文江博客开发文档 Astro 中文文档 v20240605 文章详情

文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

创建社交媒体 footer

发布于 2024-06-05 21:19:57 字数 7049 浏览 0 评论 0 收藏 0

准备好…

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

现在你已经在页面上使用了 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`

在每个 Astro 页面（index.astro、about.astro 和 blog.astro）的前置元数据中添加以下导入语句：
```
import Footer from '../components/Footer.astro';
```
在每个页面的 Astro 模板中，在 </body> 标签之前添加一个新的 <Footer /> 组件，以在页面底部显示页脚。
```
   <Footer />
  </body>
</html>
```
在浏览器预览中，检查每个页面是否都能看到新的页脚文本。

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

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

代码检查

如果你一步一步按照教程进行操作，你的 index.astro 文件应该如下所示：

src/pages/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`

修改 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 接收？
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 组件。

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

创建社交媒体 footer

创建一个页脚组件

导入并使用 Footer.astro

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

代码检查

创建一个社交媒体组件

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

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

自测

任务清单

相关资源

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

导入并使用 `Footer.astro`

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。