※記事内に商品プロモーションを含むことがあります。
はじめに
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 "📅" }} {{ .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 }}"> · {{ ($.Site.Params.modifiedTimeIcon | safeHTML) | default "📝" }} {{ .Lastmod.Format (i18n "summary-dateformat") }} </time>
{{ end }}
<span title="{{ i18n "tooltip-reading-time" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> · {{ ($.Site.Params.readingTimeIcon | safeHTML) | default "☕" }} {{ .ReadingTime }} {{ i18n "reading-time" }} </span>
{{ with $.Param "author" }}
· <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 }} {{ . }}</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) }} {{ .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 }}"> ·
{{ partial "svgs/update.svg" (dict "width" 12 "height" 12) }} {{ .Lastmod.Format (i18n "summary-dateformat") }}
</time>
{{ end }}
<span title="{{ i18n "tooltip-reading-time" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> · {{ ($.Site.Params.readingTimeIcon | safeHTML) | default "" }} {{ .ReadingTime }} {{ 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 "📅" }} {{ .Date.Format (i18n "single-dateformat") }} </time>
{{ if ne (.Date.Format (i18n "summary-dateformat")) (.Lastmod.Format (i18n "summary-dateformat")) }}
· <time class="single__info" title="{{ i18n "tooltip-modified" }}"> {{ ($.Site.Params.modifiedTimeIcon | safeHTML) | default "📝" }} {{ .Lastmod.Format (i18n "single-dateformat") }} </time>
{{ end }}
· <span class="single__info" title="{{ i18n "tooltip-reading-time" }}"> {{ ($.Site.Params.readingTimeIcon | safeHTML) | default "☕" }} {{ .ReadingTime }} {{ i18n "reading-time" }} </span>
{{ with .Params.Author }}
· <span class="single__info" title="{{ i18n "single-writtenBy" }}">{{if $params.AuthorEmoji }}{{ $params.AuthorEmoji }}{{ else }}{{ ($.Site.Params.authorIcon | safeHTML) | default "✍️" }}{{ end }} {{ . }}</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")) }}
· <time class="single__info" title="{{ i18n "tooltip-modified" }}"> {{ partial "svgs/update.svg" (dict "width" 12 "height" 12) }} {{ .Lastmod.Format (i18n "single-dateformat") }} </time>
{{ end }}
· <span class="single__info" title="{{ i18n "tooltip-reading-time" }}"> {{ ($.Site.Params.readingTimeIcon | safeHTML) | default "" }} {{ .ReadingTime }} {{ i18n "reading-time" }} </span>
|
設定ファイルの変更
最後に、Zzoの設定ファイルから記事を読む時間 (min read) のアイコンを削除する。
hugo_root/config/_default/params.toml
内のreadingTimeIcon
を空白とする。
まとめ
HugoのZzoテーマで記事の日付・著者に設定されている絵文字アイコンを、モダンなデザインのSVG画像に変更した。