创建社交媒体页脚
准备好……
-
创建页脚组件
-
创建属性并将其传递给社交媒体组件
现在你已经在页面上使用了 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
.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¥Import and use Footer.astro
-
Add the following import statement to the frontmatter in each of your three Astro pages (
index.astro
,about.astro
, andblog.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
.src/components/Social.astro ---const { platform, username } = Astro.props;---<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
在页脚中导入并使用 Social.astro
标题部分 在页脚中导入并使用 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: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> -
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 tosrc/components/Social.astro
.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 tosrc/components/Footer.astro
to improve the layout of its contents.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> -
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
资源
标题部分 资源¥Resources
Tutorials