Multilanguage blog

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.

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

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

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

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

Thank you for helping out :+1:

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

Hey again @escudero. I’ve spent some time updating our Multi-language tutorial to encompass the additions we talked about:

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

Cheers, Dave

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: