Hugoのテーマ PaperMod の言語切り替えUIを、W3CのTipsに準拠したものに変更する。

Hugo PaperModはMinimal指向であるため標準設定では言語切り替えUIに言語コードが表示される。これはW3CのTipsに反している。以下が該当するTipsだ。

When providing links to pages in other languages, use the name of the target language in the native language and script.

日本語訳: 他言語のページへのリンクを提供する際は、対象言語の 母国語かつその言語の文字で 表記すること。

— Navigation | Internationalization Quick Tips for the Web

今回はこのBestPracticeに適合させるため設定ファイルを変更しUIの言語表記を言語コード（Ja/En）からネイティブ言語（日本語/English）へ切り替える方法を紹介する。

動作環境

  • Windows 11 / Git Bash
  • Hugo v0.164.0 / 標準ビルドでも動作可能
  • PaperMod v8.0 / 執筆時点の最新コミットを使用
$ hugo version
hugo v0.164.0-ce2470e7012b5ab5fc4e10ebe4027e9f8d9e00dc+extended windows/amd64 BuildDate=2026-07-06T16:39:30Z VendorInfo=gohugoio

$ cd themes/PaperMod && git log -1 --oneline
154d006 (HEAD -> master, origin/master, origin/HEAD) style(post-single): adjust padding for details summary element

導入手順

手順はとても簡単。

1. params.displayFullLangName を true に設定

Site Variables under Params | Variables · adityatelange/hugo-PaperMod Wiki に記載のある displayFullLangName を用いる。

hugo.yaml の params に以下のハイライト部分、displayFullLangName: true を追加する。

params:
  displayFullLangName: true

2. 切り替え先言語の言語名を設定

このブログでは日本語と英語を扱っているので例としてこの二つの言語名を 母国語かつその言語の文字で 設定する。

hugo.yaml の languages の各言語ごとに以下のハイライト部分のように、label: {言語名} を追加する。

languages:
  ja:
    weight: 1
    locale: "ja-JP"
    label: "日本語"
    ...
  en:
    weight: 2
    locale: "en-US"
    label: "English"
    ...

3. 確認

hugo server で開発サーバーを立ち上げて確認する。

言語切り替えUIの表示が期待通り変わっていればOK。

おまけ: 記事内の言語切り替えUIのラベルを除去する

切り替え先の言語が分かりやすくなり記事内での言語切り替えUIのラベルはヘッダーのものと比較すると冗長になるので削除する。

1. カスタムレイアウトを作成

themes/PaperMod/layouts/_partials/translation_list.html をコピーして layouts/_partials/translation_list.html を作成する。

2. 言語切り替えUIのラベルを削除

以下のハイライト部分、span要素の行を削除する。

{{- if .IsTranslated -}}
    {{- if (ne .Layout "search") }}
        {{- if or (.Param "author") (.Param "ShowReadingTime") (not .Date.IsZero) }}
            {{- printf " | " | safeHTML -}}
        {{- end -}}
    {{- end -}}
    <span>{{- i18n "translations" | default "Translations" }}:</span>
    ...
{{- end -}}

3. 確認

hugo server で開発サーバーを立ち上げて確認する。

ラベルが消えていればOK。