【Pug】パンくずリストのテンプレート

パンくずリストのPugミックスインを作成しました。どんなWebサイト制作でも使うと思うのでボイラープレートに入れておいてもいいかも。

記事内に広告を含みます

呼び出し側の記述
ミックスインの記述

呼び出し側の記述

呼び出し側では、パンくずの構造を変数で持っておき、mixinを呼び出すだけです。

/hoge/index.pug

 - const PAGE_META = { BREADCRUMB_LIST: [ { name: 'HOME', item: '/', }, { name: 'ほげ', item: '/hoge/', }, ], }

/hoge/index.pug

+TheBreadCrumb()

ミックスインの記述

ミックスイン側では、パンくず用の変数をもとにnav要素を作成します。

TheBreadCrumb.pug

mixin TheBreadCrumb() .l-theBreadCrumb(data-the-bread-crumb='root')&attributes(attributes) nav.nav(aria-label='パンくずリスト') ol.breadcrumbList each item, index in PAGE_META.BREADCRUMB_LIST li.breadcrumbItem //- 最後の要素はspanで表示 if index === PAGE_META.BREADCRUMB_LIST.length - 1 span.breadcrumbText= PAGE_META.BREADCRUMB_LIST[index].name else a.breadcrumbLink.c-linkText(href=PAGE_META.BREADCRUMB_LIST[index].item) span.breadcrumbText= PAGE_META.BREADCRUMB_LIST[index].name

パンくずリストの最後の要素（=現在のページ）はaタグを外すようにしています。