neputa note

Astroにパンくずリスト（breadcrumb list）を追加する

初稿:

更新:

- 5 min read -

#Astro #dev
img of Astroにパンくずリスト（breadcrumb list）を追加する

記事概要

  • 先日のBloggerからAstroへ移行した記事の別途詳細

※参考 - Blog移行記事

BlogをBloggerからAstroへ移行した

10年以上の期間お世話になったGoogle Bloggerに別れを告げ、この度AstroでBlogサイトを構築し移行した。Astroは静的サイトを手軽に開発できる軽量フレームワーク。無料のテンプレートをベースにカスタマイズを行った。それなりの作業ボリュームとなったので、詳細は別記事に分け、今回は移行作業全体をまとめる。

favicon for blog card www.neputa-note.net

目的

  • Astroで構築したWebサイトにパンくずリストを追加する
  • astro-breadcrumbsというパッケージを使用して実装する
  • URLに日本語が含まれる場合、URLエンコードした値がパンくずリストに表示される
  • パッケージをForkし、この問題に対処する例についてもまとめる

用語説明

Astro とは？

Astroは、ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。Astroは、新しいフロントエンドアーキテクチャを開拓し、他のフレームワークと比較してJavaScriptのオーバーヘッドと複雑さを低減することで知られています。高速でSEOに優れたウェブサイトが必要なら、Astroが最適です。 — Astro公式Docs より引用をDeepLで翻訳

作業環境

  • OS - Ubuntu-22.04LTS on WSL2
  • Node.js - v20.14.0
  • pnpm - v9.4.0
  • Astro - v4.11.3

作業詳細

astro-breadcrumbsをインストールする

install
$ pnpm add -D astro-breadcrumbs

レイアウトにパンくずリストを追加する

  • astro-breadcrumbsをインポートしタグを追加するだけで設置できる
  • Header componentに追加する例を示す
Header.astro
---
import HeaderLink from './HeaderLink.astro'
import { SITE_TITLE } from '../consts'
import { Breadcrumbs } from 'astro-breadcrumbs'
import 'astro-breadcrumbs/breadcrumbs.css'
---

<header>
  <nav>
    <h2><a href='/'>{SITE_TITLE}</a></h2>
    <div class='internal-links'>
      <HeaderLink href='/'>Home</HeaderLink>
      <HeaderLink href='/blog'>Blog</HeaderLink>
      <HeaderLink href='/about'>About</HeaderLink>
    </div>
  </nav>
  <Breadcrumbs />
</header>

パンくずリストをカスタマイズする

  • このBlogのastro-breadcrumbsの設定を以下に示す
Header.astro
---
import { Breadcrumbs } from 'astro-breadcrumbs'
---

<Breadcrumbs linkTextFormat='lower' ariaLabel='Breadcrumbs' truncated='true'>
  <svg
    slot='index'
    aria-label='Home Page'
    xmlns='http://www.w3.org/2000/svg'
    width='24'
    height='24'
    viewBox='0 0 24 24'
    fill='none'
    stroke='currentColor'
    stroke-width='2'
    stroke-linecap='round'
    stroke-linejoin='round'
    ><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'> </path><polyline
      points='9 22 9 12 15 12 15 22'></polyline>
  </svg>
  <svg
    slot='separator'
    xmlns='http://www.w3.org/2000/svg'
    width='24'
    height='24'
    viewBox='0 0 24 24'
    fill='none'
    stroke='currentColor'
    stroke-width='2'
    stroke-linecap='round'
    stroke-linejoin='round'
    ><polyline points='9 18 15 12 9 6'></polyline>
  </svg>
</Breadcrumbs>
  • linkTextFormatでアルファベットを小文字に変換
  • truncatedの説明は以下のとおり

trueを設定すると、1行に収まらなくなったパンくずは切り捨てられ、省略記号ボタンが表示されます。最初の要素と最後の要素だけが表示され、その間に省略記号ボタンが表示されます。省略記号ボタンをクリックすると、切り捨てられたすべての要素が表示されます。 — Properties | Astro Breadcrumbs より引用をDeepLで翻訳

  • 1つ目のsvgは、ルートをHomeアイコン表示にするため
  • 2つ目のsvgは、セパレータを山カッコにするため
  • この他、色の変更などはドキュメントを参照

URLエンコード対策

  • astro-breadcrumbsは、URLパスの値をパンくずリストに表示している
  • URLに日本語が含まれる場合、そのパスはURLエンコードした値で表示される
    • 例えば日本語のタグやカテゴリを使用している場合

URLエンコードされた日本語タグ
URLエンコードされた日本語タグ

  • 対処方法としてastro-breadcrumbsのリポジトリをForkし、修正したパッケージを使用する（Githubアカウントが必要）
  1. astru-breadcrumbsのリポジトリにアクセスする
  2. 画面右上の「Fork」をクリックし、「Create new Fork」を選択する
  3. src/Breadcrumbs.astroを次のとおりに修正する（ここ1か所なのでGithub上で修正した）
src/Breadcrumbs.astro
<!-- 省略 -->

<BreadcrumbLink
  attrs={attrs}
  mainBemClass={mainBemClass}
  isIndex={index === 0}
  isCurrent={lastElement}
>
  {Astro.slots.has("index") && index === 0 ? (
    <slot name="index" slot="index" />
  ) : (
    text
    decodeURI(text)
  )}
</BreadcrumbLink>

<!-- 省略 -->
  1. 修正をコミットし、リポジトリのURL（HTTPS）をコピーする
  2. package.jsonを以下のとおり修正する（バージョン番号をgit+コピーしたURLに修正）
package.json
{
  "devDependencies": {
    "astro-breadcrumbs": "^2.3.1", 
    "astro-breadcrumbs": "git+https://github.com/neputa/astro-breadcrumbs-fork.git"
  }
}
  1. pnpm install（npm install）を実行し、package.jsonの修正を反映

以上

参考サイト

#Astro #dev

目次