breadcrumb plugin の使い方と、bootstrap にテンプレートを合わせる方法

インストールして、すぐ使い始められるのですが、Bootstrap などのテンプレートを使ってると、デザインに整合性が取れなくなってしまいます。（Breadclumb Plugin が Bootstrap を考慮してないから当然）

なので、今回は、Breadclubs Plugin をインストールして、テンプレートを変更する方法をまとめます。

Breadcrumbs Plugin の詳細情報はこちら

grav-plugin-breadcrumbs
https://github.com/getgrav/grav-plugin-breadcrumbs

Breadcrumbs Plugin をインストール

bin/gpm install breadcrumbs

テンプレートに、Breadclum Plugin を出力するように指示

以下のコードを、利用中のテンプレートの任意の場所に記述します。これで、Breadclumbs Plugin の標準テンプレートを利用して、ぱんくずを表示します。

{% include 'partials/breadcrumbs.html.twig' %}

カスタム・テンプレートを作成します。

(grav root)\user\plugins\breadcrumbs\templates\partials\custom フォルダに、breadcrumbs.html.twig ファイルを作成して、以下の内容を書き込みます。

{% set crumbs = breadcrumbs.get() %}

{% if crumbs|length > 1 or breadcrumbs_config.show_all %}
    <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% for crumb in crumbs %}
            <li class="breadcrumb-item"><a href="{{ crumb.url|e }}">{{ crumb.menu|e }}</a></li>
        {% endfor %}
    </ol>
    </nav>
{% endif %}

この Breadcrumbs Plugin 用のカスタム・テンプレートを利用するには、ページ用テンプレートを以下のように書き換えます。

{% include 'partials/custom/breadcrumbs.html.twig' %}

これで、Breadcrumb Plugin が、カスタム・テンプレートで出力されるようになります。