HUGO wit multilingal botton

Webサイト
Page content

introduction

Hugo is a static site generator that supports multiple languages. However, being a static site generator, it is built with only the minimum features. Therefore, I have noted some points that I found a bit unsatisfactory regarding the language switch.

Hugo version: hugo v0.111.3+extended linux/amd64 BuildDate=2023-03-16T08:41:31Z VendorInfo=debian:0.111.3-1

Theme: Mainroad

Overview of Hugo’s Multilingual Support

There are two methods: separating by files and separating by directories. In my case, I am separating by files.

When separating by files, create index.md and index.en.md. The index.md file will be the default language.

If you separate by directories, you would create /ja/index.md and /en/index.md.

Since I am separating by files, I will configure the hugo.toml/yaml file as follows:

DefaultContentLanguage = "ja"

[languages] # Multilingual settings
  [languages.ja]
   languageName = "Japanese"
   weight = 1
   title="ja"

  [languages.en]
   languageName = "English"
   weight = 2
   title="en"

[Params.sidebar]
 widgets = ["languages", "search", "recent", "categories", "taglist", "social", "archive"]

If you want to add other languages like Spanish, simply set the languageName in the same way. The weight indicates the priority of the language, with smaller values having higher priority, set to 0 or above.

The Params.sidebar section does not have to be exactly as shown, but make sure to include languages, as it will create the language switch button.

For more details, refer to the official documentation.

After setting up the TOML configuration and creating index.md and index.en.md, they will be recognized as Japanese and English files, respectively, and a language switch button will also be created. This is convenient. Since I am also creating an English version of this article, the language button will appear in the upper right corner when using the Mainroad theme.

The issue is that by default, the language switch button does not link to the English version (or Japanese version) of the article, but rather redirects to the English homepage. The URL becomes /en, which might be acceptable for some users, but intuitively, I would prefer it to link to the English version of the article. (The button for this article has been modified, so it should link to the English version of this article.) Therefore, we will change the configuration.

Please note that since this operation involves changing the configuration file, make sure to back it up before proceeding.

Open themes//layouts/partials/widgets/languages.html.

The file looks like this:

{{- $translations := .Site.Home.AllTranslations }}
{{- if and hugo.IsMultilingual (gt (len $translations) 0) }}

<div class="widget-languages widget">
	<h4 class="widget__title">{{ T "languages_title" }}</h4>
	<div class="widget__content">
		<ul class="widget__list">
			{{- range $translations }}
			<li class="widget__item">
				<a class="widget-languages__link widget__link" href="{{ .RelPermalink }}">
					<span class="widget-languages__link-btn widget__link-btn btn">{{ .Language | upper }}</span>
					{{- with .Language.LanguageName }}
					<span class="widget-languages__link-text widget__link-text">{{ . | title | humanize }}</span>
					{{- end }}
				</a>
			</li>
			{{- end }}
		</ul>
	</div>
</div>
{{- end }}

Change this file to the following. Here’s the complete version:

{{- $currentPage := . }} <!-- 現在のページを取得 -->
{{- $translations := $currentPage.AllTranslations }} <!-- 現在のページのすべての翻訳を取得 -->

{{- if and hugo.IsMultilingual (gt (len $translations) 1) }}
<div class="widget-languages widget">
    <h4 class="widget__title">{{ T "languages_title" }}</h4>
    <div class="widget__content">
        <ul class="widget__list">
            {{- range $translations }}
            <li class="widget__item">
                <a class="widget-languages__link widget__link" href="{{ .RelPermalink }}">
                    <span class="widget-languages__link-btn widget__link-btn btn">{{ .Language | upper }}</span>
                    {{- with .Language.LanguageName }}
                    <span class="widget-languages__link-text widget__link-text">{{ . | title | humanize }}</span>
                    {{- end }}
                </a>
            </li>
            {{- end }}
        </ul>
    </div>
</div>
{{- end }}

After this modification, language switch buttons will be created for pages with multiple languages, and the links will direct to the corresponding language versions of the current page.

For Those Who Want to Know More

First of all, I want to mention that I am using ChatGPT to write this, so I don’t understand everything completely. (Just in case)

The changes are:

{{- $currentPage := . }} <!-- 現在のページを取得 -->
{{- $translations := $currentPage.AllTranslations }} <!-- 現在のページのすべての翻訳を取得 -->

{{- if and hugo.IsMultilingual (gt (len $translations) 1) }}

↑ In the existing setup, the language switch button was created if there was at least one other language page in the entire site. I changed this so that it now checks whether translations exist for the current page. It displays the button only if the language setting is greater than 1 (i.e., if multiple languages are created). I only changed 0 to 1.

The mechanism that changes the link destination is specifically defined in the line:

<a class="widget-languages__link widget__link" href="{{ .RelPermalink }}">

In the existing setup, the $translations variable stored the translation information fetched from the entire site, causing the .RelPermalink link information to point to the site’s homepage. By changing this to reference the current page, the .RelPermalink is now based on the current page, altering the link destination accordingly.

Well, ChatGPT did most of the work, though.

Summary

This concludes the improvement settings for the language switch button. This blog primarily uses Japanese, but I implemented this because it seemed necessary for other sites. Just to note, this page is set up for multilingual support as a test.