Hugo 0.32がリリースされました🎉
0.32ではPage BundlesとImage Processingという機能が追加されました。
リリースノートは以下から。
Hugo | Hugo 0.32: Page Bundles and Image Processing!
今回はPage Bundlesの機能が便利だったので紹介します。
Hugo 0.31までは記事のために画像を追加する場合staticディレクトリ以下に保存する必要がありました。
こんな感じ。
content
└── posts
├── blog-content1.md
├── blog-content2.md
└── blog-content3.md
static
└── images
├── blog-content1-image1.png
├── blog-content1-image2.png
├── blog-content2-image1.png
└── blog-content3-image1.png
記事の数が多くなってくると、どの画像がどの記事のものかわからなくなってくるため、 自分で命名規則を作って保存する必要がありました。
Hugo 0.32からは記事のmarkdownファイルと同じ場所に画像を保存して使用することが可能になりました🎉
こんな感じ。
content
└── posts
├── blog-content1
│ ├── image1.png
│ ├── image2.png
│ └── index.md
├── blog-content2
│ ├── image1.png
│ └── index.md
└── blog-content3
├── image1.png
└── index.md
使い方は以下を参照
Hugo | Hugo 0.32 HOWTO
これまで画像表示は自分でimg shortcodeタグを作って使っていたのですが、それをPage bundles機能も使えるように改造してみました。
<figure{{ with .Get "class" }} class="{{.}}"{{ end }}>
{{- with .Get "link"}}<a href="{{.}}">{{ end -}}
{{ $img := $.Page.Resources.GetByPrefix (.Get "src") }}
<img src="{{ with $img }}{{ .Permalink }}{{else}}{{ .Get "src" }}{{ end }}"
{{- with .Get "width" }} width="{{.}}"{{ end -}}
{{- with .Get "alt" }} alt="{{.}}"{{ end -}}
/>
{{- if .Get "link"}}</a>{{ end }}
</figure>以下の様に画像ファイルを指定すると同じディレクトリ以下に置いた同名の画像が表示されます。
{{% img src="image1.png" %}}
同じディレクトリ以下に画像がなければ指定された文字列をそのまま”src”に指定して表示しようとするので、これまで通りstaticディレクトリ以下に置いた画像を指定することもできます。
{{% img src="/image/blog-content1-image1.png" %}}
これで何も考えずに記事と同じ場所に画像を放り込んでおけばよくなったので、だいぶ楽になりました😄
