HUGOでタグに日本語を使用する

日本語のタグを使用すると

日本語のディレクトリが作成され、URLが日本語になります。 日本人には日本語の方がわかりやすいです。SEOにも影響がないようなので日本語でもいいかなと思いました。
しかし、URLを共有やコピー＆ペーストされたときにエンコードされることがあります。 エンコードされるのを防ぐことはできないので、アルファベットでURLを作成することにします。

slug でURLを変更

Hugo には、slug の機能が用意されています。 この機能を使用して日本語のURLをオーバーライドしてアルファベットに変更します。

appears as the tail of the output URL. A value specified in front matter will override the segment of the URL based on the filename.
Front Matter

Taxonomies の slug 設定

こちらの記事 「Taxonomiesを使用する」に書いたように、Taxonomiesには3つの要素があります。

  • Taxonomy: 分類方法
  • Term: キー
  • Value: コンテンツ

”日本語”というタグを記事１に使用する場合は、下記のようになります。

  • Taxonomy: Tag
  • Term: 日本語
  • Value: 記事１

“日本語"というTermのページに、“japanese"という slug の設定をします。

Termのページファイル作成

下記の場所にファイルを作成し、「Front Matter」を設定します。
“/content/tags/日本語/_index.ja.md” 

1
2
3
4

---
title: "日本語"
slug: "japanese"
---

もう一つ同じ場所にファイルを作成します。
“/content/tags/日本語/_index.md” 

1
2
3
4

---
title: "japanese"
kind: "term"
---

タグの _index.md で slug 設定をしたので、タグページのURLとタグのリストページからのタグページへのリンクはアルファベットになりました。
コンテンツページからタグページへのリンクは日本語のままです。コンテンツページの日本語のタグ情報からタグのページを取得して Permalink をリンクへ設定します。

Siteのconfigファイルを変更して、tags の permalinks を設定します。（jsonで記載しています。） 

1
2
3

"permalinks": {
"tags": "/tags/:slug"
}

テンプレートを変更

single.html

下記のコードは、コンテンツのレイアウトに使用するタグのリンクを出力する partialページです。 タグページへのリンクは .Permalink へ変更します。 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<aside id="taxonomyArea" class="taxonomy-area">
  <h2 class="label">Labeling</h2>
  <section id="this-article-section">
    <section>
      <section id="tags">
      <h3 class="label">Tags</h3>
        {{ range .Params.tags }}
          <span><a class="tag" href="{{ with $.Site.GetPage "tags/" . }}{{ .Permalink }}{{ end }}">{{.}}</a></span>
        {{end}}
      </section>
    </section>
  </section>
</aside>

term.html

下記のコードは、termのレイアウトです。
.Title ではなく、.Data.Term へ変更します。同様の変更を terms.html にも行います。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

{{ define "main" }}
<div id="mainList" class="main-list">
    <section id="mainListArea" role="main" class="main-list-area">
        <h1>{{.Data.Term}}</h1>
        {{.Content}}
        <div id="postList" class="post-list">
            {{ range (.Paginator).Pages.ByLastmod.Reverse }}
            <a class="content-card" href="{{.RelPermalink}}">
                <section class="card-text">
                    <h2>{{.Title}}</h2>
                    <p>{{.Summary}}</p>
                    <p><small>Last Mod: {{.Lastmod.Format "Jan 2, 2006"}}</small></p>

                    <h3 class="label">Section</h3>
                    <span class="tag">{{ .Section }}</span>
                    <h3 class="label">Tags</h3>
                    {{ range .Params.tags }}
                    <span class="tag">{{.}}</span>
                    {{end}}

                </section>
            </a>
            {{end}}
        </div>
        {{ partial "main/pagination.html" . }}
    </section>
</div>
{{end}}

2022-06-06 追記

termのテンプレートではなくsingle（コンテンツ用）のテンプレートが使用されて、タグを使用しているコンテンツのリストが表示されない。

Variable を確認すると下記のようになっていた。
Kind がpage
Type が tags
Section が tags

Kindが「term」になっていてほしいのだけど、pageになっている。
回避する方法ないかな。

2023-04-02 追記

termの _index.md の「Front Matter」に kind を指定することでテンプレートを変更できたので、追記しました。

リンク

HUGO taxonomies
HUGO slug
HUGO permalinks

Last Mod: Apr 2, 2023