Ghost Post Translation - Multi Language content

Hi, I am looking for this article https://ghost.org/tutorials/multi-language-content/, which is referenced in several discussions of this forum related to hosting Multi-language content on Ghost blog. The tutorial link is not found now, is it intentional, like is there a new reference I can refer for setting up Multi-language content?

References:

  1. Multi-language blog with a multi-language theme
  2. Blog Translation and Language Activation

Please suggest.

Thanks.

I am looking for this link too.
It was mentioned here as well: Ghost Themes - Dynamic URLs & Routing

A new tutorial how to build a post in multiple languages would be really appreciated.

I am one step ahead.
I extended the routes.yaml of my theme with the following code:

collections:
  /:
    permalink: /{slug}/
    template: index
    filter: 'tag:-hash-de'
  /de/:
    permalink: /de/{slug}/
    template: index-de
    filter: 'tag:hash-de'

Also I created an internal Hashtag, called “#de”. Now I have two separated areas with English posts and /de/ with German posts.
The only thing I don’t know is, how I can tell the theme that it should use my German language file when browsing through /de/.

Any suggestions?

1 Like

Ya, I am stuck at the same point - how to tell the theme, which language file to pick. I thought it would work based on html lang attribute, but it didn’t. Html lang attribute is changing appropriately.

abc.com picks en (Publication lang) by default, but abc.com/de is also picking en only, instead of de (ideally it should be picking de lang file from the locales folder instead of en).

Am I missing anything? Please suggest.

There are two distinct concepts here:

  1. Building a translatable theme (only one language at a time)
  2. Building a site with multi-language content

Our previous tutorial conflated these concepts, which caused a lot of confusion for developers on what’s already a really complex topic. We are currently working on writing new tutorials for both of these concepts.

I think the key thing that trips people up, which I think is what’s happening for @kmanojkumar, is that multi-language sites don’t use json language files. They only apply to translatable themes using a single language (option #1).

To support multiple languages in a single publication (option #2), you need to use separate templates (index.hbs vs index-de.hbs), as well as a mix of the #has, #match, and #block helper.

If you share more about what you’re trying to do, I can provide some guidance/examples.

1 Like

Thanks for clarifying @RyanF.

I am working towards Option #2. Can you guide on how Multi-language content can be implemented? Post content I managed to translate using Internal Tags and Collections within routes.yaml. How to translate theme content now?

Like for example, “Published with Ghost” in abc.com/ 's footer should be translated to “Publicado con Ghost” in abc.com/es.

Thanks.

Translating these other parts of the site is trickier :grimacing:

You’ll want to create a block where you want that text to appear. In this case, I’ll use default.hbs as an example:

<div><a href="https://ghost.org/" target="_blank" rel="noopener">{{{block "pub-tag"}}}</a></div>

Then, in index.hbs, you’d add this anywhere in the file:

{{#contentFor "pub-tag"}}Published by Ghost{{/contentFor}}

And in index-es.hbs:

{{#contentFor "pub-tag"}}Publicado con Ghost{{/contentFor}}

You’d have to do this for every top-level template file. In post.hbs, you would do this:

{{#has tag="#es"}}
    {{#contentFor "pub-tag"}}Publicado con Ghost{{/contentFor}}
{{else}}
    {{#contentFor "pub-tag"}}Published by Ghost{{/contentFor}}
{{/has}}

Here’s a reference to the block helper in the docs: Ghost Handlebars Theme Helpers: block & contentFor

Let me know if that’s what you were looking for!

Puh Thanks for all the explanations @RyanF. In my case this is too much and will blow up the theme a lot.
Maybe you guys can make that things easier in an upcoming version of Ghost. :slight_smile:

1 Like

¡Hi!

Is there a complete and updated tutorial for building a site with multi-language content using Ghost.io? Or a good recommendation of a ready-to-use multi-language theme?

Thanks.

1 Like

I would like to see such a tutorial as well.

Please do,

Ghost is very ideal for the website

@RyanF

Hello, is it possible to create 2 the same posts (for example-site.com/case-study and example-site.com/de/case-study) with the same url but for german locale add /de/ after site.com?

No. Slugs need to be unique and can’t contain slashes.

You could have case-study and fallstudie, and then use routing to prefix fallstudie with de.

I see, okay, one more qeustion: is it possible to create tag for 2 different language?

For example: /tag/case-studies/example-post and /de/tag/case-studies/example-post?

Or maybe u can help me to decide better way to create miltilang tags routes?

No, not for tag routes. You could do: case-studies and case-studies-de, though.

Alternatively, you can channels to create these routes: Ghost Themes - Dynamic URLs & Routing

Thanks, for now I’m trying to use collection, for example:
Created new collection in routes.yaml:

  /de/case-studies/:
    permalink: /de/case-studies/{slug}/
    template: case-studies-de
    filter: tag:hash-de
    data: 'tag.case-studies'

Added new template case-studies-de.hbs and added next body:

{{!< default}}
{{#contentFor "lang"}}de{{/contentFor}}

{{> loop }}

{{ pagination }}

BUT I still have blank page (no posts):

Tag “Case studies” is present with 2 posts:

What I do wrong? How to provide posts in my new collection (I thought that data property in routes.yaml was correct way to do it)

What does the entire routes file look like? (The data property isn’t likely needed here.)

@RyanF

Hello. Ok, so I have fix it, for now all routes worked as expected.

But, I have another question - how I can translate static pages?

For example:
I have index and index-de. And I need to translate text in header as well. How I can do it?

en version:
<li class='c-nav__item'><a href='site.com/get-a-demo' class='c-btn c-btn--small c-btn--action'>{{t 'Book a Demo' }}</a></li>

de version:
<li class='c-nav__item'><a href='site.com/get-a-demo' class='c-btn c-btn--small c-btn--action'>{{t 'Buchen Sie eine Demo' }}</a></li>