コンテンツにスキップ

ソーシャルメディアフッターを作成する

ここで学ぶことは…

  • フッターコンポーネントを作成する
  • ソーシャルメディアコンポーネントを作成し、propsを渡す

ページでAstroコンポーネントを使用したので、次にコンポーネントの中で別のコンポーネントを使用してみましょう!

  1. src/components/Footer.astroに新しいファイルを作成します。

  2. 新しいファイル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>
  1. index.astroabout.astroblog.astroの各Astroページのフロントマターに以下のインポート文を追加します。

    import Footer from '../components/Footer.astro';
  2. 各ページのAstroテンプレートに<Footer />コンポーネントを追加します。ページの一番下にフッターを表示するために、</body>閉じタグの直前に置いてください。

    <Footer />
    </body>
    </html>
  3. ブラウザのプレビューで、各ページに新しくフッターのテキストが表示されていることを確認してください。

複数のソーシャルネットワーク(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="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)を渡します。

  1. src/components/Social.astroに新しいファイルを作成します。

  2. 新しいファイルSocial.astroに以下のコードをコピーします。

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

Social.astroをフッターにインポートして使用する

セクションタイトル: Social.astroをフッターにインポートして使用する
  1. 上の新しいコンポーネントをインポートして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>
  2. ブラウザのプレビューを確認してください。3つのプラットフォームへのリンクを含んだ新しいフッターが各ページに表示されているはずです。

ソーシャルメディアコンポーネントにスタイルを適用する

セクションタイトル: ソーシャルメディアコンポーネントにスタイルを適用する
  1. <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>
  2. 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>
  3. ブラウザのプレビューを再度開き、各ページに新しいフッターが表示されていることを確認します。

  1. titleauthordateの各値をpropsとして受け取るために、Astroコンポーネントのフロントマターに書く必要があるコードはどれですか?

  2. Astroコンポーネントに値をpropsとして渡すにはどうすればよいですか?

貢献する

どんなことを?

GitHub Issueを作成

チームに素早く問題を報告できます。

コミュニティ