【Astro】パンくずリストを実装する方法

ASTROは、静的サイトジェネレーターの一つで、高速でSEOに優れたWebサイトを構築することができます。この記事では、ASTROを使ってパンくずリスト（breadcrumb）を実装する方法について解説します。

パンくずリストとは

パンくずリストは、Webサイトのナビゲーション要素の一つで、現在のページの階層構造を示すリンクのリストです。一般的に、トップページから現在のページまでの階層が表示され、ユーザーがサイト内を移動しやすくなります。

ASTROでパンくずリストを実装する手順

1. src/components ディレクトリに Breadcrumb.astro ファイルを作成します。
2. Breadcrumb.astro ファイルに以下のコードを追加します。

   ---
   const { currentPage } = Astro.props;
   const pages = [
     { name: 'Home', href: '/' },
     { name: 'Category', href: '/category' },
     { name: currentPage, href: '#' },
   ];
   ---
   
   <nav>
     <ol>
       {pages.map((page, index) => (
         <li>
           {index === pages.length - 1 ? (
             <span>{page.name}</span>
           ) : (
             <a href={page.href}>{page.name}</a>
           )}
         </li>
       ))}
     </ol>
   </nav>

3. パンくずリストを表示したいページの Astro ファイルで、Breadcrumb コンポーネントをインポートし、currentPage プロパティに現在のページ名を渡します。

   ---
   import Breadcrumb from '../components/Breadcrumb.astro';
   ---
   
   <Breadcrumb currentPage="Current Page" />

4. CSSでパンくずリストのスタイルを調整します。

   nav ol {
     display: flex;
     list-style: none;
     padding: 0;
   }
   
   nav li:not(:last-child)::after {
     content: '>';
     margin: 0 0.5rem;
   }

以上の手順で、ASTROを使ってパンくずリストを実装することができます。

解説

• Breadcrumb.astro ファイルでは、Astro.props から currentPage を取得し、pages 配列でパンくずリストの階層構造を定義しています。
• pages 配列をマッピングして、リンクとページ名を表示します。最後の要素は現在のページなので、リンクではなく span タグで表示されます。
• パンくずリストを表示したいページでは、Breadcrumb コンポーネントをインポートし、currentPage プロパティに現在のページ名を渡します。
• CSSでは、display: flex を使ってリスト要素を横並びにし、::after 擬似要素で区切り文字（>）を追加しています。

パンくずリストを導入することで、ユーザーがサイト内の現在位置を把握しやすくなり、ナビゲーションの利便性が向上します。ASTROを使えば、シンプルなコンポーネントとして実装できるため、サイト全体で一貫したデザインを維持しながら、パンくずリストを簡単に追加することができます。