baseof.htmlの作成 その2 resources.Getとページリソース、キャッシュ戦略解説

こんにちはnasustです。前回の続きbaseof.htmlの解説をします。

head_og.html部分テンプレート

layout/partials/head_og.htmlの内容は以下の通りです。 いくつか新しい関数が現れたので解説します。


<meta property="og:title" content="{{ .Title}}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}" />

{{ if .IsHome }}
    <meta property="og:type" content="website" />
{{ else }}
    <meta property="og:type" content="article" />
{{ end }}

<meta property="og:url" content="{{ .Permalink }}" />

{{ $eyecatch_image := "" }}
{{ if isset .Params "eyecatch" }}
    {{ $eyecatch_image = .Resources.GetMatch .Params.eyecatch }}
{{ else if isset .Site.Params "eyecatch" }}
    {{ $eyecatch_image = .Resources.GetMatch .Site.Params.eyecatch }}
{{ end }}
{{ with $eyecatch_image }}
    <meta property="og:image" content="{{ .Permalink }}" />
{{ end }}

<meta property="og:site_name" content="{{ .Site.Title  }}" />

{{ $description := ""}}
{{ if .Page.Description }}
    {{ $description = .Description }}
{{ else if .Page.Summary }}
    {{ $description = .Summary }}
{{ else if isset .Site.Params "description" }}
    {{ $description = .Site.Params.description }}
{{ end }}
{{ with $description }}
    <meta property="og:description" content="{{ $description }}" />
{{ end }}
html

.IsHome

ページがトップである場合trueを返します。

see also: Page Variables | Hugo

.Resources.GetMatch

Hugoにはページリソースという機能があります。 そのページで使用する画像など取得します。

前回までの記事で、記事の作成はcontent/post/entry.mdなどに postディレクトリ以下にMarkdownファイルを作成しまた。

このページリソースを利用する場合は、 Markdownファイルと画像を同じディレクトリにします。

content/post/entryディレクトリを作成します。 文章はcontent/post/entry/index.mdにします。

同ディレクトリに画像ファイルを置くことでページリソースから取得できます。

例:

---
title: "記事タイトル"
date: 2019-06-10
draft: false
eyecatch: "eyecache.png"
---
markdown

今回のブログのテンプレートの場合は、 Makrdownでeyecacheパラメーターから画像を取得しています。

この場合、content/post/entry/eyecache.pngから画像を取得しています。

see also: Page Resources | Hugo

resources.Get

上記の.Resources.GetMatchと似ていますが、こちらはassetsディレクトリから取得します。

resources.Get .Site.Params.eyecatchは、config.tomlのeyecacheパラメーターで指定した画像を取得します。

例:

[Params]
    eyecache = "images/eyecache.png"
toml

この場合、assets/images/eyecache.pngから画像を取得します。

see also: Hugo Pipes Overview | Hugo

fingerprint

resources.Getなどでパイプでfingerprint関数に画像を渡してます。 これは、ファイル名にファイルのハッシュ値を付加します。

例:

eyecache.png

eyecache.a34b32eec0c0336c5f6e346db38da784c44.png

何故、ハッシュ値を使用するのかはサイト運営のキャッシュ戦略に対応する為です。

GoogleのPageSpeed Insightsは、ブラウザのキャッシュの有効期限を365日を推奨しています。

サーバーがキャッシュの有効期限を365日にしている場合、 画像等のファイルが更新されていても、キャッシュが効いている為に、 ブラウザに表示されるのは古い画像になります。

fingerprint関数でファイル名にハッシュ値を付加することで、 ハッシュ値が変わり、ファイル名が変わるので必ず新しい画像表示するようにしています。

see also: Fingerprinting and SRI | Hugo

head_style.html部分テンプレート

partial head_styleのlayout/partials/head_style.htmlの内容は以下の通りです。

{{ $style := resources.Get "scss/style.scss" | toCSS | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" />
html

toCSS

toCSSはSCSSファイルをcssにコンパイルする関数です。 HugoはSCSSのコンパイルをサポートしてます。

fingerprintと組み合わせることで、SCSSが更新されたら必ず新しいCSSファイルを読み込むようにしています。

see also: SASS / SCSS | Hugo

次回はheader.htmlの解説をします。

prevnext