Multilanguage setup

Support
1

I’ve got a site I’ve put together with zola, and I’m trying to get multi-language support setup, one of my users has provided the spanish translations for the site in this git branch karlggest/kalpadesktopsite: Website for the Kalpa Desktop - Codeberg.org

But I can’t seem to figure out how to enable it. Nothing I’m doing in the browser is getting me the “Spanish site” and working through the zola docs, I think I’ve done everything I need to do.

Can anybody point me in the right direction?

2

To ‘enable’ the translation you just go to a slightly different url. For example, if your homepage is translated then instead of going to /, it’ll be /es/. Zola handles translations by just adding a language code at the root of the url path. In this case, the language code for Spanish is es.

As another example, your site has this page here

The language code is always the two letters just before the file extension. So the above file is about.es.md, meaning the language code is about.es.md. My website is translated in italian so it’s it.

Anyways, in this example instead of going to /about you would go to /es/about.

Hope that helps.

3

Yeah, i got that figured out, but I have no translations in the [hero] section or the header (which is probably more a question for the folks that made the theme I’m using) do you have any ideas there?

4

Great. So the other place that translations can appear are in the templates. Content (the markdown pages) are different from these, they’re the ones that are translated by using a different language code in the file name.

Templates on the other hand aren’t specific per language, they’re shared by all the content. So to get the ‘right’ translation, you have to use the trans function. For example, on this page in your site:

<!-- in index.html -->
<div class="toc-item">
  <a class="subtext" href="{{h.permalink | safe}}">{{ h.title }}</a>
</div>

In that example, there is no way for title to change for a Spanish or English page. What you need to do is first add a “translation” for that in your site’s config.toml, and then reference it using the trans function. Like so:

# (in cargo.toml)
[languages.es.translations]
summary = "Escritorio Kalpa"
title = "Il Mondo di Zola"

Then in your index.html you can do the translation:

<!-- in index.html -->
<div class="toc-item">
  <a class="subtext" href="{{h.permalink | safe}}">{{ trans(key="title", lang=lang) }}</a>
</div>

There will always be a lang variable in scope for ever page in zola (except 404.html), so the above code will get the English translation for the English pages, and the Spanish translation for the Spanish pages.

And if you want to just get the Spanish one each time then instead of passing in lang to trans, you pass in the language code directly to the lang parameter:

<a class="subtext" href="{{h.permalink | safe}}">{{ trans(key="title", lang="es") }}</a>

(and obviously the key parameter maps to the translation you setup in the config.toml.

Anyways, that should get you in the right direction. Feel free to come back if you need help.

5

P.S: not everything needs to go in the translation section of your config.toml. Just the things that you use a lot, across all your sections and pages. So stuff for nav, the name of your site, etc…

With that in mind there’s one other thing you need to know. I’ll use the hero section of your theme as an example.

<!-- index.html -->
<h3 class="title-text">
  <b>Kalpa</b> is an atomic and immutable linux distribution offering the Plasma Desktop
</h3>

For this you wouldn’t put it in translations. Instead this is how you would do it

<!-- index.html -->
<h3 class="title-text">
  {% if lang == 'en' %}
  <b>Kalpa</b> is an atomic and immutable linux distribution offering the Plasma Desktop
  {% elif lang == 'es' %}
  <b>Kalpa</b> es una distribuzion atomica y immutabile para la Plasma Dekstop
  {% endif %}
</h3>

Hopefully that helps. Good luck!

6

Sweet, thanks for the help, that’s enough to figure it out.

7

Ok, so the issue I’m running into here, is that if I set:

[languages.es.translations]
title = "Escritorio Kalpa"

And then change the toc-item line in templates/index.html to use the trans function, as you’ve shown in your example, it’s changing every entry in the TOC to “Escritorio Kalpa” when looking at base_url/es and not actually changing anything in the header across the top of the screen.

I’m not sure where those key values are set, other than the one that I have in my config.toml where I have:

[extra]
juice_extra_menu = [
    { title = "Pagure", link = "http://code.opensuse.org/Kalpa/Development" }
]

I think it’s pulling that list from the .md files in content (that aren’t included in content/exclude_from_nav.md but I’m not really seeing where in templates/index.html I would use the trans tag, or which keys I need to reference to get the header across the top to read:

Documentación rather than Documentation for instance.

8

And then change the toc-item line in templates/index.html to use the trans function, as you’ve shown in your example, it’s changing every entry in the TOC to “Escritorio Kalpa” when looking at base_url/es […]

That’s good, working as expected.

[… ]and not actually changing anything in the header across the top of the screen.

Well the example I gave you with title was just to give you an idea if how to use the trans function. You need to take that example and apply it to do what you want, but my time is a bit constricted to help at that level of granularity.

I’m not sure where those key values are set, other than the one that I have in my config.toml where I have:

If I were you I would consider copying the thing you want to change from the browser, or fragments of the thing, and then try searching in your code base for those things. Also make sure you’ve taken a look at my “P.S.” comment, because that will probably be helpful down the road, since you shouldn’t use trans for everything.

As to where the “keys” are for the thing you want to change, I have no idea! I haven’t looked for them. Give it a shot though, I’m sure you can find it, and you will probably discover some things along the way that will give you a more clear idea how your site fits together.

Otherwise maybe somebody else from forum will comment and lend you a hand.

Anyways, if you try all that and you still want help outside the forum then here’s how to get a hold of me: https://spenc.es/contact, best of luck!

9

Oh, no worries, I wasn’t expecting anybody to do it for me, just a direction to look to figure it out, thanks for the help.