Astroにパンくずリスト(breadcrumb list)を追加する
初稿:
更新:
- 5 min read -
![img of Astroにパンくずリスト(breadcrumb list)を追加する](/_astro/astro-breadcrumb-list.D0k64_dP_Z2lYTi3.webp)
記事概要
- 先日のBloggerからAstroへ移行した記事の別途詳細
※参考 - Blog移行記事
10年以上の期間お世話になったGoogle Bloggerに別れを告げ、この度AstroでBlogサイトを構築し移行した。Astroは静的サイトを手軽に開発できる軽量フレームワーク。無料のテンプレートをベースにカスタマイズを行った。それなりの作業ボリュームとなったので、詳細は別記事に分け、今回は移行作業全体をまとめる。
目的
- 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をインストールする
- astro-breadcrumbsについて
$ pnpm add -D astro-breadcrumbs
レイアウトにパンくずリストを追加する
- astro-breadcrumbsをインポートしタグを追加するだけで設置できる
- Header componentに追加する例を示す
---
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の設定を以下に示す
---
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エンコード対策
2024/08/16 astro-breadcrumbsの開発者からversion 3.0.1でこの問題は解決したと連絡がありました。よって以降の作業はForkしたパッケージの使用例として参照してください。
- astro-breadcrumbsは、URLパスの値をパンくずリストに表示している
- URLに日本語が含まれる場合、そのパスはURLエンコードした値で表示される
- 例えば日本語のタグやカテゴリを使用している場合
![URLエンコードされた日本語タグ](/_astro/url-encoded-breadcrumbs.j3r_NNj1_Z4Iehv.webp)
- 対処方法としてastro-breadcrumbsのリポジトリをForkし、修正したパッケージを使用する(Githubアカウントが必要)
- astru-breadcrumbsのリポジトリにアクセスする
- 画面右上の「Fork」をクリックし、「Create new Fork」を選択する
- src/Breadcrumbs.astroを次のとおりに修正する(ここ1か所なのでGithub上で修正した)
<!-- 省略 -->
<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>
<!-- 省略 -->
- 修正をコミットし、リポジトリのURL(HTTPS)をコピーする
- package.jsonを以下のとおり修正する(バージョン番号をgit+コピーしたURLに修正)
{
"devDependencies": {
"astro-breadcrumbs": "^2.3.1",
"astro-breadcrumbs": "git+https://github.com/neputa/astro-breadcrumbs-fork.git"
}
}
- pnpm install(npm install)を実行し、package.jsonの修正を反映
以上