コンテンツにスキップ

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

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

ここで学ぶことは…

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

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

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

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

src/components/Navigation.astroという新しいファイルを作成します。
各ページの上部にあるページ間を移動するためのリンクをコピーして、新しいファイルNavigation.astroに貼り付けます。
src/components/Navigation.astro
```
---
---
<a href="/">ホーム</a>
<a href="/about/">概要</a>
<a href="/blog/">ブログ</a>
```
.astroファイルのフロントマターの中身がない場合は、コードフェンスを書かなくても構いません。必要になってからいつでも追加できます。

Navigation.astroをインポートして使用する

index.astroに戻り、コードフェンスの中で新しいコンポーネントをインポートします。
src/pages/index.astro
```
---
import Navigation from '../components/Navigation.astro';
---
```
続いて、下部にある既存のナビゲーション用HTMLリンク要素を、先ほどインポートした新しいナビゲーションコンポーネントに置き換えます。
src/pages/index.astro
```
<a href="/">ホーム</a>
<a href="/about/">概要</a>
<a href="/blog/">ブログ</a>
<Navigation />
```
ブラウザでプレビューを確認すると、以前とまったく同じに見えるはずです。それで問題ありません！

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

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

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

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

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

確認テスト

複数のページで同じ要素が繰り返し使用されている場合、何が可能ですか？
1. 開発サーバーを再起動する
2. 再利用可能なコンポーネントを使用するようにリファクタリングする
3. 新しいページを作成する
Astroコンポーネントに関する記述として正しいものはどれですか？
1. 再利用できる
2. HTMLの断片である
3. 上の両方とも正しい！
Astroコンポーネントがサイトに新しいページを自動的に作成するのは、どのような場合ですか？
1. <html></html>を含んでいる場合
2. リファクタリングした場合
3. .astroファイルをsrc/pages/内に配置した場合

チェックリスト

コンテンツを再利用可能なコンポーネントにリファクタリングできる。
.astroページに新しいコンポーネントを追加できる。

参考

Astroコンポーネントの概要
Refactoring 外部サイト

ページを編集 Translate

前へ
ユニット3の導入 - コンポーネント次へ
ソーシャルメディアフッターを作成する