パンくずリスト
{{ super() }} {{ page.title }}
記事をグループにまとめてアクセスしやすくするため、パンくずリストを設置することにしました。
サイドバーのグループ化
パンくずとサイドバーを同じ階層構造にするため、サイドバーをグループ化します。マークダウン記法で見出しをつけると自動的にグループ化されます。
SUMMARY.md
## グループ1
* [記事1](1.md)
* [記事2](2.md)
## グループ2
* [記事3](3.md)
* [記事4](4.md)ファイルのグループ化
同じ階層のフォルダにファイルをまとめ、フォルダごとにベースのページを作ることにします。
├── group1
│ ├── 1.md
│ ├── 2.md
│ └── base.md
├── group2
│ ├── 3.md
│ ├── 4.md
│ └── base.md{{- tips.render("HonKitはサブフォルダに対応しています。") }}
Nunjucks
HonKitはNunjucksを使ってマークダウンをHTMLに変換します。
> **Templating | HonKit** > HonKit uses the Nunjucks templating language to process pages and theme's templates. > https://honkit.netlify.app/templating/
Nunjucksには include や import など別のファイルを読み込むシンタックスがあります。
> **import | Nunjucks** > https://mozilla.github.io/nunjucks/templating.html#import
ベースのページにパンくずリストを設置
ベースのページにパンくずリストと記事コンテンツのブロックを設置します。
base.md
<!-- パンくずリスト -->
<nav>
<div data-gb-custom-block data-tag="-"></div>
<a href="/">トップ</a>
<svg></svg>
<a href="/group1/1.html">グループ1</a>
<svg></svg>
<div data-gb-custom-block data-tag="-"></div>
</nav>
<!-- 記事コンテンツ -->
<div data-gb-custom-block data-tag="block"></div>それぞれの記事はベースを継承し、パンくずリストの末尾に自身のタイトルを埋め込みます。
1.md
---
title: ページ1
---
<!-- ベースを継承 -->
<div data-gb-custom-block data-tag="extends" data-0='./base.md'></div>
<!-- パンくずリスト -->
<div data-gb-custom-block data-tag="-"></div>
{{ super() }}
<span>{{ page.title }}</span>
<div data-gb-custom-block data-tag="-">
<!-- 記事コンテンツ -->
<div data-gb-custom-block data-tag="block">
## コンテンツ
本文
</div>冒頭の --- で囲われた部分はそのページのメタデータとして扱われます。本文中で {{ page.変数 }} のように取り出すことができます。
> **Front Matter | HonKit** > https://honkit.netlify.app/pages.html
パンくずの見た目をCSSで整えれば完成です。
{{- figure.render("パンくずリストを設置した例", "/assets/2-2/css.png") }}
Last updated