MultIanguage switcher

Developer help Routing
1

Is there any way to change language from the user interface using js or it can be done only from the admin panel?
I need it for a multi-lang site which is made by collections.

2

The way to do this is to use the {{#contentFor}} helper.

In relation to setting up a multilanguage site, please see this tutorial: Tutorials

There’s a section there on how to set the language using this helper. The other useful tool here is to tag content with the language code, which is also discussed in the tutorial.

3

Thank you. I followed this tutorial and was managed to change html lang using this

<html lang="{{{block "lang"}}}">

and

{{!< default}}

{{#contentFor "lang"}}{{@site.locale}}{{/contentFor}}

{{!< default}}

{{#contentFor "lang"}}de{{/contentFor}}

It is shown right in console, but text is still on the default language not from files locales/de.json . When language is changed from admin panel all is in correct language.
I can not understand why changing doesn`t change anything like from the admin panel? Is it my mistake? It should work the same? For me it looks like this property is ignored and used admin value.

5

The locales files aren’t actually for multi-language sites–they’re only for translating templates from one language to another on single language sites.

Instead, to translate for multi-language content, you need to use a combination of custom routing and tags.

With routing, you’d navigate to different index files based on the URL path. For example, yoursite.com/es would load the index-es.hbs file for Spanish.

For content, you’d need to tag it as #es. Then, in your post.hbs file, you can use the {{#has}} helper to look for the #es tag and translate accordingly.

These techniques are explained in more detail in the tutorial:

But, creating a multi-language site with Ghost is not a trivial task, so let me know if there’s anything that remains unclear. :smile:

1 Like
6

Thanks a lot!!! :grinning:
Now I understand that changing the language from admin and from this tutorial, shouldn’t work the same. :partying_face: It doesn’t for a multi-language site, it works only for content.
So if I want to translate other things(blocks, buttons, banners) this doesn’t work
{{#contentFor "lang"}}es{{/contentFor}} because there a word content :laughing:
I should make a custom copy of everything with stable es language in ich or find some other elegant decision?

7

The way I approach it is to make copies of your index page and route to the different versions via custom routing. This is necessary because on an index page, there’s no tag you can pull from to determine the language.

For your post page, I would switch the text content based on tags. For example:

<p>{{#has tag="#es"}}Escrito por{{#else}}Written by{{/has}} {{primary_author.name}}</p>

You can do the same thing with buttons and other components.

8

I am very appreciated you for help. We have different structure and this variant doesn’t suit but now everything is much clear for me. Thanks!

1 Like