{{ range}}を使用した、複数のparamsのループ処理

日本語
1

現在、ポートフォリオのWebサイトを制作しており、クレジット表記の{{ range}}を使用した、複数のparamsのループ処理がうまく出来なく困っております。

例えば、フロントマターのparamsに、
(-を使用すると、listとして認識してしまうので省略しています。)

(yaml)
position:
Art Direction
Photography
Web Director

name:
John Doe1
John Doe2
John Doe3

link:
https://discourse.gohugo1.io/
https://discourse.gohugo2.io/
https://discourse.gohugo3.io/

上記のように設定しhtmlでは、

Art Direction John Doe1
Photography John Doe2
Web Director John Doe3
というクレジット表記に出力したいのですが、どのようにやるのがシンプルでしょうか？

私が想定しているHTMLの構造だと

              <b>{{ .Page.Params.position }}</b><a href="{{ .Page.Params.link }}">{{ .Page.Params.name }}</a>

もちろん上記のような記述だとループ処理出来ないのですが、うまい方法があればご教授したいです。

分かりにくい説明で申し訳ありませんが、よろしくお願いいたします。

2

こんな感じですか?

フロントマターの例。

---
title: "..."
description: "..."
credits_contents:
  - position: "Art Direction"
    name: "John Doe"
    link: "https://discourse.gohugo1.io/"
  - position: "Photography"
    name: "John Doe2"
    link: "https://discourse.gohugo2.io/"
  - position: "Web Director"
    name: "John Doe3"
    link: "https://discourse.gohugo3.io/"
---

Hugo テンプレートの例。

{{ range .Page.Params.credits_contents }}
  <b>{{ .position }}</b><a href="{{ .link }}">{{ .name }}</a>
{{ end }}

実際のレンダリング結果。

hugo
hugo1278×286 11.6 KB

1 Like
3

これはページごとに credits_contents を設定する方法ですが、フッターの情報なのでサイト全体で同じ情報を使い回したいこともあると思います。その時は credits_contents を config/_default/params.yaml に記述して、.Page.Params.credits_contents ではなく .Site.Params.credits_contents でアクセスすればできます。

1 Like
4

peaceirisさんいつもありがとうございます。

教えていただいたコードで、やりたい事が完結しました。
フロントマターの記述方法も、そんなやり方があるとは…
勉強になりました。

本当に感謝しています！

1 Like