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

Nunjucksのマクロ

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

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

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

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

{%- macro render(description="") %}
  <div class="border p-8 flex">
    <svg></svg>
    <span class="text-sm">{{ description }}</span>
  </div>
{%- endmacro %}

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

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

{% import "./tips.html" as tips %}

## 見出し

本文です。

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

本文です。

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

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

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

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

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

{%- macro render(description="") %}
{%- endmacro %}

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

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