Markdownと同じディレクトリにファイルを置きたい場合に使用するページリソースを解説

こんにちはnasustです。 Hugoのページリソースについて解説します。ページリソースを使用する事で、Markdownファイルと同じディレクトリに画像などのファイルを置く事ができます。記事と同じディレクトリなので管理しやすいです。

使い方

  • xxxx.mdの代わりにxxxxディレクトリを作成する
  • xxxx.mdをindex.mdに変更して、xxxxディレクトリに格納する
  • 使用したい画像などをxxxxディレクトリに格納する

要するにMarkdownファイルの代わりにディレクトリを作成します。Markdownはindex.mdにファイル名を変更します。

HTML変換後は以前のMarkdown単体と同じURLになります。

関数解説

テンプレートでページリソースの関数を解説します。

.Resources.ByType

{{ $eyecache_param := "" }}
{{ with .Params.eyecatch }}{{ $eyecache_param = . }}{{ end }}

{{ with .Resources.ByType "image" }}
    {{ range . }}
        {{ if eq (path.Base .Name) ( path.Base $eyecache_param) }}
            {{ $eyecache_image = . }}
        {{ end }}
    {{ end }}
{{ end }}
{{ if $eyecache_image  }}
    {{ $width = $eyecache_image.Width }}
    {{ $height = $eyecache_image.Height }}
{{ end }}
html

.Resources.ByType “image”で、Markdownのディレクトリ内にある画像全て取得しています。.Resources.ByTypeで指定したメディアのファイルを全部取得する事ができます。

Page Bundlesの関数は、この様に条件にマッチしたリソースを返します。

.Resources.ByType “image”で取得した画像は、高さと幅を取得できる関数が使用できます。

Image Processing | Hugo

注意点は、この関数はショートコードでは使用できません。

.Resources.Match

{{ range .Resources.Match "images/*" }}
    <img src="{{ .Permalink }}" >
{{ end }}
html

ワイルドカードを利用して、パスの条件に一致したファイル全てを返します。

.Resources.GetMatch

Resources.Matchと同じですが、最初にマッチしたファイルを返します。

{{ $eyecache_image := .Resources.GetMatch "images/eyecache.jpg" }}
<img src="{{ $eyecache_image.Permalink }}" >
html

この関数で取得した画像は、高さと幅を取得する関数を使用する事ができません。

Page Resources | Hugo

prevnext