Multilingual site - index.html - how to localize?

support
1

I’m writing my first multilingual site. I have my language selector working and my menu working.

I’m using a single domain name.

I can’t figure out how to render localized content in index.html. I’m using a custom theme. My index.html file content is very typical. It references several partials for the sections.

I’m very new to multilingual so forgive me for not knowing how to ask the correct question.

I don’t know how to localize content in my theme. Is this what I have to do? Or is there a way for the theme to pull localized partial content from the website?

I’ve found some example sites but can’t find a working one with localized content for index.html.

I’ve spent a day trying to find a working example that shows a simple site that has more than one language and the home page (index.html) shows different content for each language.

Thank you in advance for your assistance, greatly appreciated,

Karl Shifflett
Currently living and serving in Mykolaiv, Ukraine. (for real, I moved here to help during the war)

2

I just had that issue. I made two md pages:

/content/home.md
/content/home.de.md

In the frontmatter the title must be for all languages:

title: "Home"

Next, in:

/layouts/index.html

I have:

{{ define "main" }}
<article>
    {{ range where .Data.Pages "Title" "Home" }}
    {{ .Content | absLangURL }}
    {{ end }}
  </article>
{{ end }}

That work for me. I am sure there are other/better ways.

1 Like
3

So simple for sure. Thank you, greatly appreciate your response. Bless you, Karl

4

There are three ways:

  • by filename, the one mentioned already: filename.LANGcode.md
  • by content directory: /content/ja/ or /content/japanese/ (it doesn’t matter if you use the Lang Code or full name, or anything)
  • by bypassing default linking (a.k.a. by using translationKey frontmatter). (No matter where your files are located, they’ll be linked together as long as they have the same translationKey.)

You can use translationKey in combination with by filename or by content directory. What will happen is if the content creator forgets to add the translationKey, Hugo will fallback to either by filename or by content directory when checking for translations of the content.

Here’s the doc for more information:

3 Likes
5

Yes, I’ve read the documentation, many times. I have my pages working in multiple languages. For my pages, I’m using the content directory method, actually, both filename and content directory techniques are very easy to implement.

My question was about the landing page, index.html, and the best way to implement multiple languages.

I can’t find any working examples to look at. Do you have any links to working examples that demonstrate having the landing page content localized?

As you know, landing pages are usually complex with several partial templates being used to create the content.

This is one of my Hugo sites I designed and wrote my own theme for and hand-coded:

This afternoon, I’m going to try the technique that @baker sent me.

6

I had bad links issues, now when I click the language button it’s goes to the same page in the target language.

\layouts\single.html
{{ .Content | absLangURL }}

\partials\navbar.html
<a href="{{ .URL | relLangURL }}">

1 Like
7

Thank you!

8

An update to my post, I wrote:

{{ define "main" }}
<article>
    {{ range where .Data.Pages "Title" "Home" }}
    {{ .Content | absLangURL }}
    {{ end }}
  </article>
{{ end }}

Works perfectly, but now, no matter what, your pages title is Home. This is not ideal.

So in *.md Front Matter I added a setting:

heading: "My New Ttile"

Now I can be flexible with the title:

    {{ range where .Data.Pages "Title" "Home" }}
    <h1>{{ .Params.Heading }}</h1>
    {{ .Content | absLangURL }}
    {{ end }}

Alternately you could set the title also in the index.html with

<h1>{{ i18n "My Specific Title" }}</h1>

9

Thank you very much. We have been getting hit with russian attacks since I wrote you. Been a crazy 10 days. I started working on this last night. Will be working again tomorrow.

Thank you very much for the update, greatly appreciated!! Blessings, Karl

1 Like