コンテンツにスキップ
Astro Astro

再利用可能なナビゲーションコンポーネントを作成する

Astroサイトの複数のページに同じHTMLが書かれているので、重複したコンテンツを再利用可能なAstroコンポーネントに置き換えましょう！

ここで学ぶことは…

  • コンポーネント用の新しいフォルダを作成する
  • ナビゲーションリンクを表示するAstroコンポーネントを作成する
  • 既存のHTMLを再利用可能な新しいナビゲーションコンポーネントに置き換える

src/components/フォルダを作成する

HTMLを生成するものの新しいページにはならないような.astroファイルを保持するために、プロジェクトにsrc/components/という新しいフォルダが必要になります。

ナビゲーションコンポーネントを作成する

  1. src/components/Navigation.astroという新しいファイルを作成します。

  2. 各ページの上部にあるページ間を移動するためのリンクをコピーして、新しいファイルNavigation.astroに貼り付けます。

    src/components/Navigation.astro
    ---
    ---
    <a href="/">ホーム</a>
    <a href="/about/">概要</a>
    <a href="/blog/">ブログ</a>

  1. index.astroに戻り、コードフェンスの中で新しいコンポーネントをインポートします。

    src/pages/index.astro
    ---
    import Navigation from '../components/Navigation.astro';
    ---

  2. 続いて、下部にある既存のナビゲーション用HTMLリンク要素を、先ほどインポートした新しいナビゲーションコンポーネントに置き換えます。

    src/pages/index.astro
    <a href="/">ホーム</a>
    <a href="/about/">概要</a>
    <a href="/blog/">ブログ</a>
    <Navigation />

  3. ブラウザでプレビューを確認すると、以前とまったく同じに見えるはずです。それで問題ありません！

サイトには以前と同じHTMLが含まれています。しかし、この3行のコードは、現在は<Navigation />コンポーネントによって提供されているのです。

やってみよう - サイトの残りのページにナビゲーションを追加する

同じ方法により、サイトの他の2つのページ（about.astroとblog.astro）で<Navigation />コンポーネントをインポートして使用してみましょう。

以下を忘れないでください。

  • コードフェンスの中のコンポーネントスクリプト上部に、インポート文を追加します。
  • 既存のコードをナビゲーションコンポーネントに置き換えます。

確認テスト

  1. 複数のページで同じ要素が繰り返し使用されている場合、何が可能ですか？

  2. Astroコンポーネントに関する記述として正しいものはどれですか？

  3. Astroコンポーネントがサイトに新しいページを自動的に作成するのは、どのような場合ですか？

チェックリスト

参考