HugoのZzoテーマで記事の日付・著者の絵文字をSVGに変更する

はじめに

HugoのZzoテーマで記事の日付・著者に設定されている絵文字アイコンを、モダンなデザインのSVG画像に変更する方法を解説する。
記事の一覧に表示される要約と、各記事のヘッダ部分の表示をそれぞれ変更する。

環境は以下の通り。

Windows 10 Home version 21H1
Hugo version 0.79.0/extended
Zzo version May 23, 2021

変更前後のイメージ

記事の要約

記事の要約では、記事の作成日・更新日のアイコンをSVG画像に変更する。また、min readアイコンと著者を非表示にして、タグを表示する。

変更前

記事の要約（変更前）

↓
変更後

記事の要約（変更後）

記事のヘッダ

各記事のヘッダも同様に、記事の作成日・更新日のアイコンをSVG画像に変更する。また、min readのアイコンや著者を非表示にする。

変更前

記事のヘッダ（変更前）

↓
変更後

記事のヘッダ（変更後）

絵文字をSVG画像に変更する方法

手順を大きく分けると以下の通り。

SVG画像の作成
HTMLテンプレートの修正
設定ファイルの変更

SVG画像の作成

表示するSVG形式の画像を作成する。まず、以下のフォルダを作成する。
hugo_root/layouts/partials/svgs/

このフォルダに以下の3つのSVG画像を配置する。SVGはテキスト形式の画像なので、テキストエディタなどで作成できる。

1
2
3
4


<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 40 40">
<path d="M 20 5 L 20 20 L 30 30" stroke="black" fill="transparent" stroke-width="2"/>
<circle cx="20" cy="20" r="18" stroke="black" fill="transparent" stroke-width="2"/>
</svg>

1
2
3
4


<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 40 40">
<path d="M 18 8 L 18 20 L 27 27" stroke="black" fill="transparent" stroke-width="2"/>
<path d="M 5 2 L 17 13 L 5 13 Z" fill="black"/><path d="M 10 9 A 17 17 0 1 1 6 29" stroke="black" fill="transparent" stroke-width="3"/>
</svg>

1
2
3
4


<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 40 40">
<path d="M 5 5 L 18 5 L 38 25 L 25 38 L 5 18 Z" stroke="black" fill="transparent" stroke-width="2"/>
<circle cx="13" cy="13" r="3" fill="black"/>
</svg>

これらのSVG画像はHTMLテンプレートから呼び出されることになる。
なお、{{ .width }}や{{ .height }}はHTMLテンプレートから呼び出すときに、パラメータとして渡す。

HTMLテンプレートのコピー

ZzoテーマのHTMLテンプレートは以下のフォルダにある。
hugo_root/themes/zzo/layouts/partials/

このフォルダ内の3つのHTMLテンプレート

body/infos.html
body/tags.html
summary/classic.html

をブログ独自のテンプレートを置くフォルダ
hugo_root/layouts/partials/
にコピーする（partialsフォルダとの相対位置を保つようにする）。

ただし、要約の表示形式がclassic以外の場合、対応するHTMLテンプレートをコピーする。
要約の形式はhugo_root/config/_default/params.tomlのsummaryShapeで確認できる。

タグを表示するHTMLテンプレートの変更

コピーしたbody/tags.html内の

1

{{ ($.Site.Params.tagIcon | safeHTML) | default "🏷️" }}

を次のように置き換えて、タグのSVG画像を読み込むようにする。

1

{{ partial "svgs/tag.svg" (dict "width" 16 "height" 16) }}

要約のHTMLテンプレートの変更

次に、記事一覧に表示される要約のHTMLテンプレートを修正する。
コピーしたclassic.htmlの日付や著者名を表示する部分は次の通り。

1
2
3
4
5
6
7
8


<time title="{{ i18n "tooltip-written" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">{{ ($.Site.Params.writtenTimeIcon | safeHTML) | default "📅" }}&nbsp;{{ .Date.Format (i18n "summary-dateformat") }} </time>
{{ if ne (.Date.Format (i18n "summary-dateformat")) (.Lastmod.Format (i18n "summary-dateformat")) }}
<time title="{{ i18n "tooltip-modified" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> &middot; {{ ($.Site.Params.modifiedTimeIcon | safeHTML) | default "📝" }}&nbsp;{{ .Lastmod.Format (i18n "summary-dateformat") }} </time>
{{ end }}
<span title="{{ i18n "tooltip-reading-time" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> &middot; {{ ($.Site.Params.readingTimeIcon | safeHTML) | default "☕" }}&nbsp;{{ .ReadingTime }}&nbsp;{{ i18n "reading-time" }} </span>
{{ with $.Param "author" }}
&middot; <span title="{{ i18n "single-writtenBy" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">{{ if $.Param "authorEmoji" }}{{ $.Param "authorEmoji" }}{{ else }}{{ ($.Site.Params.authorIcon | safeHTML) | default "✍️" }}{{ end }}&nbsp;{{ . }}</span>
{{ end }}

これを以下に置き換える。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<time title="{{ i18n "tooltip-written" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
{{ partial "svgs/clock.svg" (dict "width" 12 "height" 12) }}&nbsp;{{ .Date.Format (i18n "summary-dateformat") }}
</time>
{{ if ne (.Date.Format (i18n "summary-dateformat")) (.Lastmod.Format (i18n "summary-dateformat")) }}
<time title="{{ i18n "tooltip-modified" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> &middot; 
    {{ partial "svgs/update.svg" (dict "width" 12 "height" 12) }}&nbsp;{{ .Lastmod.Format (i18n "summary-dateformat") }}
</time>
{{ end }}
<span title="{{ i18n "tooltip-reading-time" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> &middot; {{ ($.Site.Params.readingTimeIcon | safeHTML) | default "" }}&nbsp;{{ .ReadingTime }}&nbsp;{{ i18n "reading-time" }} </span>
{{ partial "body/tags" . }}

絵文字の替わりにSVG画像を読み込むようにしている。また、先ほど変更したbody/tags.htmlを最後に表示する。

記事ヘッダのHTMLテンプレートの変更

各記事のヘッダ部分に対応するHTMLテンプレートを修正する。
コピーしたbody/infos.htmlの日付や著者名を表示する部分は次の通り。

1
2
3
4
5
6
7
8


<time class="single__info" title="{{ i18n "tooltip-written" }}">{{ ($.Site.Params.writtenTimeIcon | safeHTML) | default "📅" }}&nbsp;{{ .Date.Format (i18n "single-dateformat") }} </time>
{{ if ne (.Date.Format (i18n "summary-dateformat")) (.Lastmod.Format (i18n "summary-dateformat")) }}
&nbsp;&middot;&nbsp; <time class="single__info" title="{{ i18n "tooltip-modified" }}"> {{ ($.Site.Params.modifiedTimeIcon | safeHTML) | default "📝" }}&nbsp;{{ .Lastmod.Format (i18n "single-dateformat") }} </time>
{{ end }}
&nbsp;&middot;&nbsp; <span class="single__info" title="{{ i18n "tooltip-reading-time" }}"> {{ ($.Site.Params.readingTimeIcon | safeHTML) | default "☕" }}&nbsp;{{ .ReadingTime }}&nbsp;{{ i18n "reading-time" }} </span>
{{ with .Params.Author }}
&nbsp;&middot;&nbsp; <span class="single__info" title="{{ i18n "single-writtenBy" }}">{{if $params.AuthorEmoji }}{{ $params.AuthorEmoji }}{{ else }}{{ ($.Site.Params.authorIcon | safeHTML) | default "✍️" }}{{ end }}&nbsp;{{ . }}</span>
{{ end }}

これを以下に置き換える。

1
2
3
4
5


<time class="single__info" title="{{ i18n "tooltip-written" }}">{{ partial "svgs/clock.svg" (dict "width" 12 "height" 12) }}{{ .Date.Format (i18n "single-dateformat") }} </time>
{{ if ne (.Date.Format (i18n "summary-dateformat")) (.Lastmod.Format (i18n "summary-dateformat")) }}
&nbsp;&middot;&nbsp; <time class="single__info" title="{{ i18n "tooltip-modified" }}"> {{ partial "svgs/update.svg" (dict "width" 12 "height" 12) }}&nbsp;{{ .Lastmod.Format (i18n "single-dateformat") }} </time>
{{ end }}
&nbsp;&middot;&nbsp; <span class="single__info" title="{{ i18n "tooltip-reading-time" }}"> {{ ($.Site.Params.readingTimeIcon | safeHTML) | default "" }}&nbsp;{{ .ReadingTime }}&nbsp;{{ i18n "reading-time" }} </span>

設定ファイルの変更

最後に、Zzoの設定ファイルから記事を読む時間 (min read) のアイコンを削除する。

hugo_root/config/_default/params.toml
内のreadingTimeIconを空白とする。

1

readingTimeIcon = ""

まとめ

HugoのZzoテーマで記事の日付・著者に設定されている絵文字アイコンを、モダンなデザインのSVG画像に変更した。