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 }}

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

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

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

Image Processing | Hugo

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

.Resources.Match

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

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

.Resources.GetMatch

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

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

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

Page Resources | Hugo

iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker