【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を使えば、シンプルなコンポーネントとして実装できるため、サイト全体で一貫したデザインを維持しながら、パンくずリストを簡単に追加することができます。