記事をグループにまとめてアクセスしやすくするため、パンくずリストを設置することにしました。

サイドバーのグループ化

パンくずとサイドバーを同じ階層構造にするため、サイドバーをグループ化します。マークダウン記法で見出しをつけると自動的にグループ化されます。

## グループ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

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

ベースのページにパンくずリストを設置

ベースのページにパンくずリストと記事コンテンツのブロックを設置します。

<!-- パンくずリスト -->
<nav>
  {%- block breadcrumbs %}
    <a href="/">トップ</a>
    <svg></svg>
    <a href="/group1/1.html">グループ1</a>
    <svg></svg>
  {%- endblock %}
</nav>

<!-- 記事コンテンツ -->
{% block contents %}{% endblock %}

それぞれの記事はベースを継承し、パンくずリストの末尾に自身のタイトルを埋め込みます。

---
title: ページ1
---

<!-- ベースを継承 -->
{% extends "./base.md" %}

<!-- パンくずリスト -->
{%- block breadcrumbs %}
  {{ super() }}
  <span>{{ page.title }}</span>
{%- endblock %}

<!-- 記事コンテンツ -->
{% block contents %}
## コンテンツ
本文
{% endblock %}

冒頭の --- で囲われた部分はそのページのメタデータとして扱われます。本文中で {{ page.変数 }} のように取り出すことができます。

Front Matter | HonKit
https://honkit.netlify.app/pages.html

パンくずの見た目をCSSで整えれば完成です。