ソーシャルメディアフッターを作成する
ここで学ぶことは…
- フッターコンポーネントを作成する
- ソーシャルメディアコンポーネントを作成し、propsを渡す
ページでAstroコンポーネントを使用したので、次にコンポーネントの中で別のコンポーネントを使用してみましょう！
フッターコンポーネントを作成する
セクションタイトル： フッターコンポーネントを作成する-
src/components/Footer.astroに新しいファイルを作成します。 -
新しいファイル
Footer.astroに以下のコードをコピーします。src/components/Footer.astro ---const platform = "github";const username = "withastro";---<footer><p>私のプロジェクトについて詳しくは<a href={`https://www.${platform}.com/${username}`}>{platform}</a>をご確認ください！</p></footer>
Footer.astroをインポートして使用する
セクションタイトル： Footer.astroをインポートして使用する-
index.astro、about.astro、blog.astroの各Astroページのフロントマターに以下のインポート文を追加します。import Footer from '../components/Footer.astro'; -
各ページのAstroテンプレートに
<Footer />コンポーネントを追加します。ページの一番下にフッターを表示するために、</body>閉じタグの直前に置いてください。<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 = 'ホームページ';---
<html lang="ja"> <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>ソーシャルメディアコンポーネントを作成する
セクションタイトル： ソーシャルメディアコンポーネントを作成するリンクしたいオンラインアカウントが複数ある場合のために、再利用可能なコンポーネントを1つ作成し、それを何度も表示するようにしましょう。これを使う際、オンラインプラットフォームとユーザー名という2つのプロパティ（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をフッターにインポートして使用する
セクションタイトル： Social.astroをフッターにインポートして使用する-
上の新しいコンポーネントをインポートして3回使用するように、
src/components/Footer.astroのコードを変更します。その際、毎回異なるコンポーネント属性をpropsとして渡します。src/components/Footer.astro ---const platform = "github";const username = "withastro";import Social from './Social.astro';---<footer><p>私のプロジェクトについて詳しくは<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> -
ブラウザのプレビューを確認してください。3つのプラットフォームへのリンクを含んだ新しいフッターが各ページに表示されているはずです。
ソーシャルメディアコンポーネントにスタイルを適用する
セクションタイトル： ソーシャルメディアコンポーネントにスタイルを適用する-
<style>タグをsrc/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> -
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> -
ブラウザのプレビューを再度開き、各ページに新しいフッターが表示されていることを確認します。
確認テスト
セクションタイトル： 確認テスト-
title、author、dateの各値をpropsとして受け取るために、Astroコンポーネントのフロントマターに書く必要があるコードはどれですか？ -
Astroコンポーネントに値をpropsとして渡すにはどうすればよいですか？