Create a social media footer
Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Mach dich bereit, …
- Create a Footer component
- Create and pass props to a Social Media component
Now that you have used Astro components on a page, it’s time to use a component within another component!
Create a Footer Component
Section titled 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
.
Import and use Footer.astro
Section titled 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
): -
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. -
In your browser preview, check that you can see your new footer text on each page.
Try it yourself - Personalize your footer
Section titled Try it yourself - Personalize your footerCustomize 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
Section titled Code Check-InIf you’ve been following along with each step in the tutorial, your index.astro
file should look like this:
Create a Social Media component
Section titled Create a Social Media componentSince 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
.
Import and use Social.astro
in your Footer
Section titled 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: -
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
Section titled Style your Social Media Component-
Customize the appearance of your links by adding a
<style>
tag tosrc/components/Social.astro
. -
Add a
<style>
tag tosrc/components/Footer.astro
to improve the layout of its contents. -
Check your browser preview again and confirm that each page shows an updated footer.
Test Yourself
Section titled Test Yourself-
What line of code do you need to write in an Astro component’s frontmatter to receive values of
title
,author
, anddate
as props? -
How do you pass values as props to an Astro component?