Multilanguage blog

Themes
1

I was following this tutorial: Translation & Multi-language content but it got kinda blurry in the second step.

Just for clarification. I’m trying to have the site with english as a default and I also want to publish stuff in spanish.

In second step they’re talking about the lang attribute in the html tag, which isn’t present in the index.hbs but in the default.hbs instead. What should I do there? Should I copy the default.hbs and rename it to es.hbs so I can change the attribute properly? I don’t really understand.

1 Like
2

Hey @escudero!

Dave here, I wrote the tutorial :smile:. I can see why that point might be confusing.

Plan A

One method of approaching this is to duplicate your templates and conditionally set them depending on the language. You would need to not only duplicate the default.hbs to default-es.hbs but also duplicate the page and post templates to custom-post-es.hbs and custom-page-es.hbs so you could reference the new default template with {{!< default-es}}. You would then need to select these templates in the post or page settings under the template select option when writing your english or spanish content.

The drawback to this is that this causes a lot of duplication, with many templates to manage in your theme. Plus you’d need to manually set the template as well as the internal tag for es.

Plan B :zap:

Instead you could make use of the block and contentFor helpers, which let you insert code into your default template from your index, page and post templates. Rather than creating an additional default-es.hbs, custom-post-es.hbs and custom-page-es.hbs templates you could replace the opening <html> tag in your default.hbs template with the following:

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

Then in your index-es.hbs template you can set the lang value like so:

{{!< default}}

{{#contentFor "lang"}}es{{/contentFor}}

For posts and pages you can check for the internal tag and conditionally add the lang value:

{{!< default}}

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

Does this help with what you’re trying to do? And do these methods appear very clear to you?

We’re going to update the guide from this feedback, and we’re in the process of documenting the block and contentFor helpers so developers can make use of them more in scenarios like this :+1:

Let us know how you get on :blush:

1 Like
3

I went with the “B” approach since it was much cleaner. It worked like a charm.

Thank you for helping out :+1:

4

Wonderful! Pleased I was able to help. I’m going to get on with updating our tutorial to include this step. Keep us posted on your progress! :rocket:

1 Like
5

Hey again @escudero. I’ve spent some time updating our Multi-language tutorial to encompass the additions we talked about:
https://ghost.org/tutorials/multi-language-content/

This will help others in future who use this guide, so thank you for providing feedback!

Cheers, Dave

6

Hey @escudero, just thought I’d let you know we’ve updated our docs to include the block and contentFor helpers which were the helpers I suggested for your lang issue. Hope this helps in future:

7

Hi @DavidDarnes, I tried to do this on my template and I followed exactly your tutorial. My default language is english (en) and I would like to have a translation in french (fr). For this, I did this :
0. Imported my routes.yaml file :

routes:

collections:
  /:
    permalink: /{slug}/
    template: index
    filter: 'tag:-hash-fr'
    
  /fr/:
    permalink: /fr/{slug}/
    template: index-fr
    filter: 'tag:hash-fr'
    
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/
  1. I replace the opening tag in my default.hbs template with the following:
<html lang="{{{block "lang"}}}">
  1. Then in my index-fr.hbs template I set the lang value like so:
{{!< default}}

{{#contentFor "lang"}}fr{{/contentFor}}
  1. Then, for posts and pages I added the lang value:
{{!< default}}

{{#post}}
  {{#has tag="#fr"}}
    {{#contentFor "lang"}}fr{{/contentFor}}
  {{else}}
    {{#contentFor "lang"}}{{@site.lang}}{{/contentFor}}
  {{/has}}
{{/post}}
  1. I created my fr.json file with all the translations required and added it as a locale.

However, as you can see on my blog : https://blog.askeetvirtual.com/, nothing changes when i’m going to Blog | MeltingSpot. Can you please help me ?

8

Hey @Julien_Perron, you’ll notice in the tutorial there’s a note on why this isn’t behaving in the way you might be thinking:

Note: Locales and the publication language are for setting a single primary language for the site. They are not designed to provide multiple languages at the same time.

You’ll need to create custom template files for your “fr” translated pages. You’ll need to customise your index-fr.hbs file with translated labelling.

Hope this is clear!

1 Like
9

Hi @DavidDarnes

I followed your instruction. My website is
www.phuquocjapan.com and when I try ビンワンダー - phuquocjapan, it shows 404 error. My primary language set in Ghost admin is Japanese. I created fine index-vi.hbs, duplicate from index.hbs, and edit {{#contentFor “lang”}}vi{{/contentFor}} below default.

Could you please help me?

Thank you very much.

10

Did you make sure to update your routes file as shown above?

2 Likes
11

Thank you very much!

1 Like