hugo-universal-themeでタイトルにタグを表示させよう.

| November 4, 2023

hugo-universal-themeをお使いのみなさん!!
タイトル部分にタグ表示させたくないですか?

こんにちは, iduknです.

今回はhugo-universal-themeで記事のタイトル部分にその記事のタグを表示させる方法を紹介します.

hugoの仕組みは慣れるまでに時間を要するので, ぜひ参考にして効率的にコーディングしてください.

事前問題

筆者の環境の場合そもそも, タグをクリックしても404エラーになるという問題点がありました.

/layouts/partials/widgets/tags.htmlを確認すると,

<!--略-->
<div class="panel-body">
    <ul class="tag-cloud">
        {{ $current := . }}
        {{ range $name, $items := .Site.Taxonomies.tags }}
        <li {{ if eq $current.RelPermalink (printf "%s/%s/" ("tags" | relLangURL) ($name | urlize | lower)) }}class="active"{{ end }}>
            <a href="{{ "tags/" | relLangURL }}{{ $name | urlize | lower }}"><i class="fas fa-tags"></i> {{ $name }}</a><!--aタグのURLの後ろに/がない!!-->
        </li>
        {{ end }}
    </ul>
</div>
<!--略-->

aタグ後ろのコメントの通り, aタグ中のURLの最後に"/"がなく, ブラウザがhtmlファイルと誤認していました.
ので,

<!--略-->
<a href="{{ "tags/" | relLangURL }}{{ $name | urlize | lower }}/"><i class="fas fa-tags"></i> {{ $name }}</a>
<!--略-->

と修正することで解決しました.

タイトルにタグを表示させる

本題です.

/config.tomlが

#略
[params.widgets]
    tags = true
#略
[taxonomies]
  tag = "tags"
#略

となっていることを前提に

/layouts/partials/breadcrumbs.htmlに以下のコードを追加します.

<!--略-->
<h1>{{ .Title }}</h1>
{{ if .Site.Params.widgets.tags }}
{{ if isset .Site.Taxonomies "tags" }}
{{ if .Params.tags }}
<div class= "panel sidebar-menu">
        <ul class="tag-cloud">
        {{ $currentTags := .Params.tags }}
        {{ range $name, $items := .Site.Taxonomies.tags }}
        {{ if in $currentTags $name }}
        <li>
            <a href='{{ "tags/" | relLangURL }}{{ $name | urlize | lower }}/'>
                <i class="fas fa-tags"></i> {{ $name }}
            </a>
        </li>
        {{ end }}
        {{ end }}
        </ul>
</div>
{{end}}
{{end}}
{{end}}
<!--略-->

基本的にはtags.htmlの仕組みを流用しています.

.Params.tagsを取得し, サイト全体のtagsと比較し一致すればリンクを貼るといった流れです.

また, /static/css/style.*.cssは以下のように変更しました.

/*略*/
.panel.sidebar-menu h3 {
  padding: 0 0;/*変更*/
  margin: 0;
}
.panel.sidebar-menu {
  background: rgba(0, 0, 0, 0);/*変更*/
  margin: 10px 0 0px;/*変更*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*略*/

これでタイトル部分に設定したタグが表示され, クリックするとそのタグごとのページに遷移する…はずです!

今回はhugo-universal-themeのタイトル部分に記事のタグを表示する手順を紹介しました.

是非参考に, そしてよりスマートに実装してみてください!

また, より良い方法を共有してくれる方がいらっしゃればコメント等でお知らせいただけると幸いです.

以上, iduknでした.
最後までご覧いただきありがとうございました.