パンくずリスト

{{ 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") }}