Change the language switch UI of the Hugo theme PaperMod to comply with W3C tips.

Because Hugo PaperMod is minimal-oriented, the default setting displays language codes in the language switch UI. This goes against W3C tips. The relevant tip is shown below.

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

This time, I will show how to adapt to this best practice by changing configuration so that the UI language labels switch from language codes (Ja/En) to native language names (日本語/English).

Environment

  • Windows 11 / Git Bash
  • Hugo v0.164.0 / works with the standard build as well
  • PaperMod v8.0 / using the latest commit at the time of writing
$ 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

Installation steps

The steps are very simple.

1. Set params.displayFullLangName to true

Use displayFullLangName described in Site Variables under Params | Variables · adityatelange/hugo-PaperMod Wiki.

Add the highlighted line displayFullLangName: true to the params section of hugo.yaml.

params:
  displayFullLangName: true

2. Set the language names for the target languages

This blog handles Japanese and English, so set these two language names in the native language and script.

For each language under languages in hugo.yaml, add label: {language name} as shown in the highlighted section below.

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

3. Verify

Start the development server with hugo server and verify.

If the language switch UI display changes as expected, you’re done.

Bonus: Remove the label from the in-article language switch UI

Since the target language is now clear, the label in the in-article language switch UI becomes redundant compared to the header one, so remove it.

1. Create a custom layout

Copy themes/PaperMod/layouts/_partials/translation_list.html to layouts/_partials/translation_list.html.

2. Remove the label from the language switch UI

Delete the span element line in the highlighted section below.

{{- 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. Verify

Start the development server with hugo server and verify.

If the label is gone, you’re done.