HugoのPage Resourcesの使い方

初めて使用するhugoのthemeを読んでいてpage resourceの使い方がすぐ理解できなかったのでメモ。

参考ページ

postごとにディレクトリを作る

以下は上記のHugo Page Resources and how to use them… からお借りした図。

自分は普段postごとにディレクトリを作ることはしませんが、以下のようにディレクトリをポストのスラッグ名(例では"i-love-eating-cupcakes")で作成し、その中にindex.md、imagesとファイルを分けて置くことも可能です。こうしておくと、staticフォルダに画像が溜まりまくって何が何だか分からなくなるのを防げるので良いですね。

.
└── content
    ├── post
    │   ├── i-love-eating-cupcakes
    │   │   ├── index.md //index.mdにfont matterとか記事を書く
    │   │   └── images
    │   │       ├── yummy-cupcake.jpg
    │   │       └── shiny-glaze.jpg
    │   └── i-hate-baking-cupcakes
    │       ├── index.md 
    │       └── images
    │           ├── overcooked-dough.jpg
    │           └── sloppy-icing.jpg
    └── recipes

pageからresourceにアクセスする

今回の例では、imagesがpage resourcesにあたります。例えば、i-love-eating-cupcakesのpostのyummy-cupcake.jpgにアクセスしたい場合、以下のように取得することができます。

{{ with .Site.GetPage "/post/i-love-eating-cupcakes" }}
  {{ .Resources.Match "images/yummy-cupcake.jpg" }} 
{{ end }}

.Resources.Match "images/yummy-cupcake.jpg"で"images/yummy-cupcake.jpg"にマッチするファイルを取得しています。Matchの他にもMethodがありますので、詳しくはこちらを参照してください。

resourceにメタデータを与える

上の図で言うindex.mdのfont matterに以下のようにpage resourceのメタデータを記載することができます。toml記法で表記しています。

---
title: "HugoのPage Resourcesの使い方"
date: 2019-04-17T16:23:27-07:00
draft: false

[[resources]]
  src = "images/yummy-cupcake.jpg"
  name = "featured-image"
  title = "yummy-cupcake"
  [resources.params]
    icon = "photo"
---

このようにnameをつけてあげることで、先ほど.Resources.Match "images/yummy-cupcake.jpg"としていたところを、.Resources.Match "featured-image"とわかりやすく短縮することができます。詳しくはこちらを参照してください。