HUGOでpartialの中で$.Siteのデータを使う方法

[基本] 親テンプレートから子テンプレート（partial）にデータを渡す方法

HUGOでは、テンプレートをパーツ化して「partial」というファンクションで親テンプレートから子テンプレートを呼び出せます。

{{ partial "structure/foot" . }}

こんな感じです。

書き方は、

{{ partial "partialディレクトリ化のパス" 渡す変数 }}

となっていて、よくHUGOの記事では変数の部分を「.(ピリオド)」としている例を見かけますが、これはページの持つ全てのデータをpartialに渡しているということです。

なお、partialで渡せる変数は一つとなっています。

[応用編] partialで使うデータを絞り込んだ上でグローバル変数にアクセスする

一方で、partial内で使うデータを絞り込んで渡す場合、partial内では「絞り込まれた変数」しか存在しないため、「$.Site」などのサイトグローバル変数にアクセスできなくなります。

例えばこんなやつです。

{{ partial "footer" $.Site.params.menu.footer }}

こうすると、partial「footer.html」内では$.Site.params.menu.footerしか変数として存在しないため、例えばサイト名などを取得したい時にデータを取得できません。

# partial/footer.html

<ul>
{{ range .}}
<li>
  <a href="{{ .Permalink }}">{{.Title}}</a>
</li>
{{end}}
</ul>

<p>{{ $.Site.Title}}</p> // <-- これは空白になる

[解決方法] dictで変数を複数登録して渡す

partialに渡す変数は一つと決まっていますが、変数を複数渡したい場合は、一つの連想配列にしてしまえば一つの値で複数の変数を渡すことができます。

HUGOでは、「dict」というファンクションを使って変数を複数登録した連想配列を生成できます。

dict キー1 値1 キー2 値2 ....

という形で記述すると、連想配列が生成できます。

dict | HUGO

先ほどの例をdictを使って書き直すと、

{{ partial "footer" (dict "footer" $.Site.Params.menu.footer "ctx" $) }}

となります。

これは、

• “footer”に$.Site.Params.menu.footerを格納
• “ctx”に$を格納

という意味です。

渡したdict変数は、partial内では「.キー」でアクセスができます。

先ほどのfooter.htmlを書き換えてみます。

# partial/footer.html

<ul>
{{ range .footer}}
<li>
  <a href="{{ .Permalink }}">{{.Title}}</a>
</li>
{{end}}
</ul>

<p>{{ .ctx.Title}}</p> // <-- きちんと表示される

これで、絞り込んだ変数とグローバル変数の両方をpartial内で使えるようになりました。

HUGOはジェネレーターなので、当然作法があるため、通常のフレームワークなどでは簡単に行えることも、このような少しトリッキーなやり方になってしまいますが、HUGOには様々なファンクションが搭載されているので、アイデア次第で無理だと思えることも実現できますね。