Multi-language blog with a multi-language theme

Developer help
1

Hello there.

I’ve successfully configured my blog to be able to write content in two languages (EN as default and ES). And I’ve also translated the theme I’m using, following this guide
However, when I visit the Spanish posts on my blog, the theme texts are not showing in Spanish.

I’ve also seen that this question was asked a couple of years ago: Multilanguage blog with a multilanguage theme

Last response, before the topic was closed, was to use static templates for the selected languages, which I’m currently doing (index-es.hbs to show the Spanish posts).

Can someone help me out on this one? Is there anything else I’m missing?

Thanks.

2 Likes
2

Hi @lobo,

Have you seen our more in-depth tutorial on creating a multi-language site? This guide provides more details on how to flag your content and detect it in templates:
https://ghost.org/tutorials/multi-language-content/

Hope this helps! If you have further questions just ask :blush:

2 Likes
3

Hello David, thanks for your answer.

Yes, I followed the tutorial and, as I said, I have my content in English (default) and Spanish. They work great, if I got to myblog.com/es it shows the Spanish only articles.

Also, when I’m on the default site <html lang="en"> is present. If I’m on the /es site <html lang="es"> is present.

Is there anything else I would be missing?

4

Seems as thought you’ve got most of it covered! Are you making sure to update the site UI to the language that matches the content? You can use the #has helper along with partials and the block / contentFor helpers to cleanly switch between languages in templates

5

Not sure I follow.

When I’m on /es all the content is in Spanish and the html lang is Spanish.
When I’m on / all the content is in English and the html lang is English.

I’m using <html lang="{{{block "lang"}}}"> in default.hbs file.
And then in index.hsb: {{#contentFor "lang"}}{{@site.lang}}{{/contentFor}}
And in index-es.hbs: {{#contentFor "lang"}}es{{/contentFor}}

And again, my content is showing as expected (the articles with the #es tag). But the theme translations are not being updated. For example I have a “Read more” text that should say “Leer más” in Spanish, but it is not changing.

To be sure it was not a problem with the locale files I set my blog language to Spanish by default and it actually shows the Spanish translations. That’s why I’m out of ideas here :slightly_frowning_face:

1 Like
6

This is what I meant by the site UI – the read more buttons, pagination buttons, navigation buttons etc will all need to have translations. The locales file provides the labelling for the default language and isn’t for supplying labels to other languages at the same time. You’ll need to customise and/or duplicate templates in order to change labels for your alternate language.

You can use the #has helper to check the currently viewed language and then block / contentFor with partials to swap out elements and labels depending on the #has returns. Here’s an example:

{{!< default}}
{{#post}}

  {{contetntFor "footer-area"}}
    {{#has tag="hash-es"}}
      {{> footer-es}}
    {{else}}
      {{> footer}}
    {{/has}}
  {{/contentFor}}

  ...

{{/post}}

…and then in your default template:

{{{block "footer-area"}}}

Hope that provides a bit more clarity :blush:

7

Thanks again for your detailed explanation.

I follow that and I still don’t get it to work, I’m feeling kind of dumb :tired_face:
Still, I don’t fully understand that logic. Even if I separate the partials by language, the theme’s translated content is being used the same way… {{t "Read More"}} so I don’t understand why is it needed to separate files if the content is the same :thinking:

I may still be missing something…

1 Like
8

The {{t}} helper is for translating lines of text based on the publication language. Because your default is set to “en” it will use the “en” locale file to get the translations for each value.

When viewing content on your site in another alternate language, Spanish in this case, you need to use the #has helper to detect the language of the content. Then you can replace the “Read More” label with the right translation:

<a href="{{url}}">{{#has tag="hash-es"}}Leer más{{else}}{{t "Read More"}}{{/has}}</a>

However you might notice that the {{t}} helper becomes kind of pointless as you’re coding in the translations anyway. So maybe this would be more straightforward:

<a href="{{url}}">{{#has tag="hash-es"}}Leer más{{else}}Read More{{/has}}</a>

Does that make it any clearer? If not then I would suggest asking for a developer for their expertise and time :blush:

9

Thanks again.

And yes, that makes “sense”. I’m a developer myself with many years of experience, all good on that part.

I usually work with translated sites and the way they work is: you have the translations for different languages. Then when you switch to one language or the other, the content will be shown in the expected language.

The way Ghost works is certainly not the one I’m used to as it seems that having the translation files is only needed to be able to translate your site default language, which I kind of knew. But while reading this post: Multilanguage blog with a multilanguage theme which I posted on the original message I understood there was a real way of using those theme translation files for a multi-language blog.

With the information you provided I understand now that this is NOT possible, hence my confusion. I was just not understanding you have to actually hard code the translations.

Anyway, I appreciate your willingness to help.

1 Like
10

Hey @lobo, just thought I’d let you know we’ve updated our docs to include the block and contentFor helpers which were the helpers you were trying to use. Hope this helps in future:

1 Like
11

Hi, I can’t really figure out how to get this to work properly.

I also set the files in this way:

At the top of the post.hbs file I added this:

{{#post}}
    {{#has tag="#es"}}
    {{#contentFor "lang"}}es{{/contentFor}}
  {{else}}
    {{#contentFor "lang"}}{{@site.lang}}{{/contentFor}}
  {{/has}}

 all the code ...

{{/post}}

Inside the post.hbs file to translate the rest of the content, I use this structure with #es instead of hash-es, as suggested by @DavidDarnes, otherwise it doesn’t work:

<a href="{{url}}">{{#has tag="#es"}}Leer más{{else}}Read More{{/has}}</a>

Now I don’t understand how to translate all the other files, like: site-nav.hbs / site-header.hbs / sidebar.hbs and many others, do i have to create an identical file for each language?

Also my site has to be translated into 4 languages, what happens in this case? I would have such a ridiculous number of files

12

any help here?

13

is it possible to have some help on this topic?

I created a site-nav-es.hbs file with the modified texts, which I recall in the index-es.hbs file. Strangely, it works on the contrary, in the original language the texts in Spanish come out and in the Spanish version of the site the texts come out in the original language.

Also I have to translate all the contents of the website in two other languages, de and fr, do I have to create a file for each language? index-fr.hbs site-nav-fr.hbs and index-de.hbs site-nav-de.hbs etcetc?

14

Hi @DavidDarnes,

I need a clarification. Let me to explain.

Someone came and select the lnguage that he/she wants to read. Then he/she read what he/she want.

After leaving website next day he/she came back to the website.

I want to lod the page related with the language he/she selected in previous session.

How to do it?

15

I’d recommend looking into using JavaScript and the local storage API to store the last language they viewed on your site. Check out the MDN docs for more info:

16

@DavidDarnes, @lobo - Thanks for the discussion you two had here.

I also arrived at that point, I wanted /ru to enable displaying only Russian posts but also have the UI elements translated with the help of theme provided locales. This would have been neat and good to maintain. In a perfect world the language reported by the browser would command the language for the ui, or if present, content.

Reading this thread I also conclude that ghost requires hardcoding the translations…in 2021. Feels like multi-language usage is more of an afterthought and ghost is focused more on creating a frontend for mono-lingual paid content, with also the Portal and eMail using hardcoded language strings.

This is great, cost free software for self-hosting - yet it will be harder for German or Russian speaking visitor not able to read English for enjoy the site we are preparing.

1 Like
17

Is this problem still valid with Ghost 4?

18

Yes, I have seen no change in the UI that would enable multi-lingual usage of ghost and it’s core plugins

19

Hi @lobo and @DavidDarnes,

Thanks a lot for your clarifying discussion. I was setting up my ghost site for multiple languages and ended up in the same position as @lobo. Content can easily be filtered, but the UI doesn’t change using the “nice” way of using locales.

I don’t want to have multiple templates or hardcoded translation all over my templates. This seems highly inefficient for a production software in 2021.

I know that with the Publication Language in the General Settings the locale works as expected.

Is it not possible to do whatever that variable does in the backend, but taking into consideration the prefix in the /{prefix}/{slug} of the url?

Maybe we can even code it together in ghost and submit the pull request. It is a feature that definitely a lot of users will benefit from.

20

The locales feature has always been designed for theme UI to switch to another language. I think you’ll have a hard time not creating custom templates for different languages. For example some languages have different writing directions and extended characters that might require different fonts. Just something to consider when trying to approach the development of a multi-language site.

You’re of course welcome to make a contribution to the official Ghost open source project, as long as you follow the guidelines provided here. However I will say that despite this being a feature that’s been requested before, it’s not something that’s be considerably high on the list of needed features in Ghost. Building a site to cater for multiple languages is hard, regardless of the CMS and tools you use. I would take some time to think about the site you’re trying to build and consider what tools on the market will help you achieve that. If multi-language is high on your list maybe you should look into a tool that also has multi-language high on their feature list.

I’m not trying to deter you from using Ghost, I just wanted to help you pick the right tools for the job :blush: