コンテンツにスキップ

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

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

ここで学ぶことは…

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

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.astroblog.astro)で<Navigation />コンポーネントをインポートして使用してみましょう。

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

  • コードフェンスの中のコンポーネントスクリプト上部に、インポート文を追加します。
  • 既存のコードをナビゲーションコンポーネントに置き換えます。
  1. 複数のページで同じ要素が繰り返し使用されている場合、何が可能ですか?

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

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

Contribute

どんなことを?

GitHub Issueを作成

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

Community