Creating This Blog Part 2: More Multilingual Support Using i18n

This is a follow-up to a previous post describing how I set up this blog. Here I describe setting up more elaborate multilingual support using i18n.

Multilingual Text “Snippets” Using i18n

Hugo comes built in with i18n support. This is a very nice and simple way to specify fixed texts that should change according to the language. I call these “multilingual snippets”. To start using it all I had to do was create the files en.toml and es.toml in the already-existing i18n folder (Hugo automatically makes this folder what you set up a site) and specify the language-specific texts. The toml files are the “translation dictionaries”.

For example, I added to the en.toml the lines:

[cc-license]
   other = "This work is licensed under a"

and to the es.toml the corresponding lines

[cc-license]
   other = "Liberado bajo una licencia de uso"

What these say is that when I invoke the multilingual snippet called cc-license, it should display the text This work is licensed under a if the page is in English and it should display the text Liberado bajo una licencia de uso if the site is in Spanish. (The other= says this is a generic version of the text. One can specify one= for example, if the texts are different when it is singular. More details in the official Hugo documentation about this.)

How the snippet is invoked: I just use the code {{ i18n "cc-license" }} in any page template. Pretty simple!

This is the current status of my i18n files:

en.toml

[cc-license]
   other = "This work is licensed under a"

[cc-license-url]
   other = "http://creativecommons.org/licenses/by-sa/4.0/"

[cc-license-linkText]
   other = "Creative Commons CC-BY-SA 4.0 License"

[Read-More]
   other = "Read More"

[Categories]
   other = "Categories"

[Tags]
   other = "Tags"

es.toml

[cc-license]
   other = "Liberado bajo una licencia de uso"

[cc-license-url]
   other = "https://creativecommons.org/licenses/by-sa/4.0/deed.es"

[cc-license-linkText]
   other = "Creative Commons CC-BY-SA 4.0"

[Read-More]
   other = "Leer más"

[Categories]
   other = "Categorias"

[Tags]
   other = "Etiquetas"

Making the “Read More” Links in the Post List be Multilingual

This shows how multilingual snippets using i18n work in practice. The Read More ... link is added in the list of all posts right after the little preview with the first lines of each post. See screenshot below:

The whole post list together with the read more links are automatically generated using the layout file layouts/index.html. The original contents of this file for the Hyde theme are the following (the generation of the Read More ... link is in line 14):

 1{{ define "main" -}}
 2<!-- This is the "truncated blog posts page -->
 3<div class="posts">
 4{{ range .Site.RegularPages -}}
 5  {{ if ne .Type "about" }}  <!-- skips the static page with type about in content/about -->
 6    <article class="post">
 7      <h1 class="post-title">
 8        <a href="{{ .Permalink }}">{{ .Title }}</a>
 9      </h1>
10      <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
11      {{ .Summary }}
12      {{ if .Truncated }}
13      <div class="read-more-link">
14        <a href="{{ .RelPermalink }}">Read More ...</a>
15      </div>
16      {{ end }}
17    </article>
18  {{ end }}
19{{- end }}
20</div>
21{{- end }}

All I had to do to make this link be multilingual was add an entry to the en.toml and es.toml dictionaries defining a read-more snippet:

en.toml

[Read-More]
   other = "Read More"

es.toml

[Read-More]
   other = "Leer más"

And then change line 14 to

<a href="{{ .RelPermalink }}">{{ i18n "Read-More" }} ...</a>

Adding a Multilingual Footer to All Posts

At the end of all posts on this site (including this one) you will see a footer after a horizontal line with a copyright notice and some licensing text. I accomplished this as follows:

1. In the file /layouts/_default/single.html, which controls the layout of all the posts, I added the following command at the end:

{{ partial "footer.html" . }}

2. Then, I created the footer.html file in the folder layouts/partials/footer.html with the following content (layout specification):

<footer>
  <hr style="width:50%;text-align:left;margin-left:0;margin-top:20;border: 1px solid #ac4142;">
  <div class="license">
      <p> &copy {{ now.Format "2006"}} Enrique Acosta. </br>
         {{ i18n "cc-license" }} 
         <a rel="license" href="{{ i18n "cc-license-url"}}">
            {{ i18n "cc-license-linkText" }}
         </a>
         <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>
      </p>
  </div>
</footer>

Here:

• The <hr style... adds the horizontal line.
• The <div class="license">....</div> is just an html container that has the <p>...</p> paragraph inside of it. The class="license" allows me to control display style from the css file. Currently, the hyde.css has the line .license {font-size: 18px; } which tells it at what font size to display.

Regarding what is inside the <p>...</p> tags (the actual content of the footer):

• The &copy just displays the copyright symbol: ©
• The {{ now.Format "2006"}} gets replaced by the current year.
• The {{ i18n "cc-license" }} is the cc-license multilingual snippet I defined in my en.toml and es.toml files which gets expanded in English to “This work is licensed under a”.
• The <a rel="license" href="{{ i18n "cc-license-url"}}"> {{ i18n "cc-license-linkText" }} </a> is a link which has as text the cc-license-linkText multilingual snippet I defined in the i18n toml files. Moreover, the link URL is also a multilingual snippet, controlled by the href href="{{ i18n "cc-license-url"}}". The link points to different places according to the language, determined by the cc-license-url snippet!
• The second <a ...><img ... .png"/></a> is the little CC-image, loaded from i.creativecommons.org, that links to the same license.

More on Creating This Blog

See other posts under the Blog setup tag.