パーツの利用

{{ super() }} {{ page.title }}

Tipsなど共有コンポーネント的に使いたいものがあり、これをパーツとして登録することにしました。

Nunjucksのマクロ

不特定他数の場所から呼び出せるよう、Nunjucksのマクロを使います。

> **macro | Nunjucks** > https://mozilla.github.io/nunjucks/templating.html#macro

マクロは 関数名(引数, 引数...) のように宣言します。

「render」という関数を宣言してみましょう。

tips.html

<div data-gb-custom-block data-tag="-" data-description='' data-escription=''></div>

  <div class="border p-8 flex">
    <svg></svg>
    <span class="text-sm">{{ description }}</span>
  </div>

<div data-gb-custom-block data-tag="-"></div>

共有コンポーネントの呼び出し

別ファイルで宣言したマクロを import "ファイル名" as エイリアス名 のように読み込んで呼び出します。

1.md

<div data-gb-custom-block data-tag="import" data-0='./tips.html'></div>

## 見出し

本文です。

{{- tips.render("1つ目の説明です") }}

本文です。

{{- tips.render("2つ目の説明です") }}

呼び出した場所で、マクロに書いたHTMLが展開されます。

{{- figure.render("Tipsを設置した例", "/assets/2-3/macro.png") }}

参考：ホワイトスペースの扱い

マクロに書いたHTMLのインデントはマークダウンの「空白2つをコードブロックの開始とみなす」ルールとバッティングして、予想しないレンダリング結果になることがあります。

Numjucksのタグに {%- や {{- のようにハイフンを付けると空白を取り除いたHTMLを展開できるため、マークダウンにHTMLを埋め込む場合は付けておいたほうが無難です。

<div data-gb-custom-block data-tag="-" data-description='' data-escription=''></div>

<div data-gb-custom-block data-tag="-">

{{- render("説明です") }}

> **Whitespace Control | Nunjucks** > https://mozilla.github.io/nunjucks/templating.html#whitespace-control