Stackbitブログ（Next.js）にパンくずリストを追加する

Stackbitブログにパンくずリストを追加する

Stackbit ブログに「パンくずリスト」を追加しました！

こんにちは、junwatanabe72 です。
パンくずリスト、web サイトには欠かせない機能ですよね。
Stackbit ブログのデフォルトにはない機能なので、今回も自分で実装してみました。

「パンくずリスト」が必要とされている２つのポイント！
  1. サイト内のどこにいるかをユーザーが一眼で理解でき、サイト内の回遊率が高まることで他の記事もついでに読んでもらえる確率が上がる。
  2. 検索エンジンが効率的にクローリングでき、ページの詳細を正確に把握することに寄与するため、ページの検索結果の順位の向上にもつながる可能性がある。

詳しくは、「こちら」のページをご覧ください。

「パンくずリスト」の要件

  • すべてのページ（トップページ除く）において、ページ上部にパンくずリストが表示される。
  • 現ページまでの階層毎のリンクが表示され、クリックすると該当ページに遷移する。
  • 現ページは文字が赤く表示される。

「パンくずリスト」の実装

1.ライブラリのインストール
npm install @material-ui/core @material-ui/icons @material-ui/styles

既に material-ui をインストール済の場合は必要ありません。

2.ファイルの編集及び新規作成

編集するファイル：「src/components/Layout.js」
新規作成ファイル：「Breadcrumbs.js」「_breadcrumbs.scss」

2.1 layout.js の編集

Breadcrumbs に渡す props を抽出します。
必要な props は「title」(記事のタイトル)と「__metadata.urlPath」(記事の URL)です。
SNS シェアボタンを導入した際と一緒ですね。(詳しくはこちら)
なお、トップページでパンくずリストを非表示するための分岐を入れています。
またブログ記事と max-width を揃えるために class に inner-sm を指定しています。

2.2 Breadcrumbs.js の新規作成

便利ツール Material-UI の「Breadcrumbs」を使います。
パンくずリストの区切り文字は、Breadcrumbs の separator で設定できます。
utils に定義されている「Link」と「withPrefix 」を使います。これで、外部リンクと内部リンクを判別し、よしなに遷移させてくれます。(今回は内部リンクオンリーですが。。)

urlPath は、一度分解して、パンくずリスト用の path に変換します。

const slicedPath = urlPath.split('/');
const convertWord = 'posts';
const blog = '/blog';
let tmp = '/';
const breadCrumbsList = slicedPath.map((path) => {
    if (path === convertWord) {
        tmp += `${convertWord}/`;
        return blog;
    }
    return (tmp += path);
});
// breadCrmbsListの戻り値 =>["/","/blog","/posts/20210702-breadcrumbs"]

トップページにはホームアイコンを表示させます。現在のページは目立つように文字を赤くし、title が表示されるようにします。

<Breadcrumbs separator="›" aria-label="breadcrumb">
    {breadCrumbsList.map((path, num) => (
        <Link className="home-icon-flex" href={withPrefix(path)}>
            {num === 0 && <HomeIcon fontSize="inherit" />}
            {num === breadCrumbsList.length - 1 ? <div className="breadcrumbs-title-color">{title}</div> : path}
        </Link>
    ))}
</Breadcrumbs>
2.3 _breadcrumbs.scss の新規作成

ホームアイコンが表示される場合、横並びとするため flex を設定します。
また、Stackbit デフォルトの css を調整します。
具体的には、button の border 無効化です。

3.実装の要点
  • Layout.js 内で必要なデータ、「title」,「urlPath」を抽出し Breadcrumbs に渡す。
  • material-ui の「Breadcrumbs」を使ってパンくずリストを作成する。
  • urlPath を分解して、パンくずリスト用 path に変換する。
  • Stackbit のデフォルト css が邪魔なので、適宜、上書きする。

「パンくずリスト」の完成品

まとめ

material-ui の「Breadcrumbs」を使用して、簡単に Stackbit ブログにパンくずリストを導入することができました！
material-ui にパンくずリストコンポーネントがあるなんて知りませんでした！今後もどんどん material-ui を使っていきたいと思います！

関連記事

PROGRAMの関連記事