Is Ghost's multi-language tutorial still valid?

Developer help
1

Hi there!

I’ve been using Ghost for a couple of months now and I wanted to switch my blog into a multi-language one.
I found this tutorial in Ghost’s official page: https://ghost.org/tutorials/multi-language-content/ but I’m not too sure it is up to date.

There are parts like:

2 Create templates for translated collections

This section guides you through creating another index file for the new language and changing the html tag, but in my theme’s files (Casper), the file that specifies the html tag is default.hbs which makes me doubt that the documentation is up to date.

Do you know what’s the best way to make my blog multi-language? Is there any other documentation or another way to do it?

Thanks in advance.

2

There are loads of problems with the tutorial. If you were to make your own language specific index.hbs as instructed, Ghost would still not consider that to be “Home” and will not use the landing page CSS.

I’m unsure of the exact use case that was addressed by the tutorial. I believe it is necessary to implement a custom navigation.hbs so you will have translated menus in each language. I’m still investigating it, cannot tell you much more.

1 Like
3

Thanks for your reply, I was starting to get desperate with that tutorial as it doesn’t seem to be solving the multi-language situation :slightly_frowning_face:

Please if you figure out how to actually setting a multi-language blog I would love to hear about it.

4

Like yourself, I thought the tutorial doesn’t solve the problem, so I started playing around. I thought it was all wrong, but it turns out it is quite accurate, but my understanding of ghost was inadequate (I’m a beginner). The problem is that some things were left unsaid, and I misinterpreted it in various ways.

I finally got it to work for two languages. This is what you can do:

  1. You need to do everything, as explained in the tutorial. Ghost will make a new collection for the additional language e.g. /fr/ for French. You set that in routes.yaml as explained in the tutorial. However, this is only the home for the new language, it will not contain the translated posts.

  2. In Admin Console, you create a tag for each navigation menu item. You also create a different translated tag for each French menu item. And you will tag each post with one of these, English tags for the English posts, French tags for the translated posts.

  3. In Admin Console Design you also set your navigation item. Put the French into the Secondary Navigation. The urls will be in the form: http://site.com/tag/menu-item/ .

  4. In site-nav.hbs you can add your language switch e.g.

    <div class="site-nav-right">
     <a class="lang-button" href="{{@site.url}}">ENG</a> 
     <a class="lang-button" href="{{@site.url}}/fr/">FR</a> 
 {{#if @labs.members}}
     <a class="subscribe-button" href="#subscribe">Subscribe</a>
 {{/if}}

  5. As instructed in the tutorial, you now create .hbs template variants e.g. index-fr.hbs, site-nav-fr.hbs, site-header-fr.hbs … even default-fr.hbs.

  6. You switch to the French menu in site-nav-fr.hbs with something like:
    {{#if @site.navigation}}
    {{navigation type=“secondary”}}
    {{/if}}

  7. In all of the others, you fix the calls to default, site-nav, site-header etc. to the french variant.

Now, if you have more than 2 languages, you cannot use the alternate navigation in Admin Console, you can bake the menu into the corrresponding translated site-nav files.

I hope this helps, it seems to work for me, but this is my first experience with Ghost. There might be better ways to do it, or I might have forgotten something, Good luck.

4 Likes
5

Thanks a lot for explaining how you solved it :slight_smile:
I’ll try to work it out on mine too.