includeでパンくずリスト変更
設計
- includeファイルでパンくずリストを変更する
- h1 class=”title” タグは各コンテンツに1箇所、タイトル名付で設置必須
- 親ページ（コンテンツ全体のトップ、固定） > 子ページ（サイトトップ、固定） > 孫ページ←ここのパンくずの変更する
<h1 class=”title”>現在コンテンツのタイトル
html
<nav class="bread">
<ul class="bread-ul">
<li class="bread--li">
<a href="/" class="menu--a">親ページ</a>
</li>
<li class="bread--li">
<a href="/ko/" class="menu--a">子ページ</a>
</li>
<li class="bread--li now">孫ページ</li> // ← .now の内容を h1.title「現在コンテンツのタイトル」 に変更
</ul>
</nav>CSS
<nav class="bread">
<ul class="bread-ul">
<li class="bread--li">
<a href="/" class="menu--a">親ページ</a>
</li>
<li class="bread--li">
<a href="/ko/" class="menu--a">子ページ</a>
</li>
<li class="bread--li now">孫ページ</li>
</ul>
</nav>jQuery
$(function () {
// データ属性が存在する場合はリンクを挿入
const breadText = $("body").data("bread-text");
const breadUrl = $("body").data("bread-url");
if (breadText && breadUrl) {
$(".bread-ul .now").before(
`<li class="bread--li">
<a href="${breadUrl}" class="menu--a">${breadText}</a>
</li>`,
);
}
// h1.titleタイトル名を取得
$(".now").text($(".title").text());
});問題点.1
子ページ（第2階層）はパンくずリスト該当箇所のアンカーリンク、右矢印と孫ページの無効化が必要になる
cssで対応
bodyタグに .ko を追加し、右矢印と孫ページを無効化
body.ko {
& .bread-ul {
& .bread--li:nth-of-type(2) {
cursor: text;
&::after {
content: none;
}
& .menu--a {
pointer-events: none;
}
}
& .bread--li.now {
display: none;
}
}
}問題点.2
孫ページ（第3階層）を飛ばしてひ孫ページ（第4階層）があるページが存在し、<h1 class=”title”>の取得は出来ても孫ページ（第3階層）のパンくずが表記されない
data属性とjsで対応
該当のhtml bodyタグに data- を追加する <body data-bread-text=”孫ページ（第3階層）” data-bread-url=”/ko/mago/”>
js
// データ属性が存在する場合はリンクを挿入
const breadText = $("body").data("bread-text");
const breadUrl = $("body").data("bread-url");
if (breadText && breadUrl) {
$(".bread-ul .now").before(
`<li class="bread--li">
<a href="${breadUrl}" class="menu--a">${breadText}</a>
</li>`,
);
}