Multi-language blog with a multi-language theme

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?


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:

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

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 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?

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

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:

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}}

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



…and then in your default template:

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

Hope that provides a bit more clarity :blush:

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…

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:

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.

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