How to configure route filter for multi-language pages

Developer help
1

I configure collections for multi-language pages as this tutorial(https://ghost.org/tutorials/multi-language-content/).Now my three collections works, I can visit either /cn /en, or /tw index page.
Then I create two “stars” pages, one is “en” tag and the other is “cn” tag.
I want to visit English page “stars” and show English page.But if I visit /en/stars, it shows 404.I tried to change the Publication Language to en, but visit /stars is still cn page.

Questions:

  1. How to configure the collections filter or page url to visit /en/stars and show English “stars” page?
  2. I want to add a language select in frontend page for user to switch language, is there any api to change the ghost site language with Javascript?

Thanks.

  • Version 3.2.0
  • Environment production
  • Database sqlite3

Here are my config.

collections:

routes:

collections:
  /:
    permalink: /{slug}/
    data: page.home
    template: index
    filter: 'tag:-[cn,en,tw]'
  /cn/:
    permalink: /cn/{slug}/
    data: page.home
    template: index
    filter: 'tag:cn'
  /en/:
    permalink: /en/{slug}/
    data: page.home
    template: index-en
    filter: 'tag:en'
  /tw/:
    permalink: /tw/{slug}/
    data: page.home
    template: index
    filter: 'tag:tw'

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

My Settings:

IMG_4859
IMG_48591248×1803 108 KB

2

Hey @beautycss,

Looks like you’re using internal tags to filter your content but aren’t referencing them quite right in the routes file. Your collections definition should look something like this:

collections:
  /:
    permalink: /{slug}/
    data: page.home
    template: index
    filter: 'tag:-[hash-cn,hash-en,hash-tw]'
  /cn/:
    permalink: /cn/{slug}/
    data: page.home
    template: index
    filter: 'tag:hash-cn'
  /en/:
    permalink: /en/{slug}/
    data: page.home
    template: index-en
    filter: 'tag:hash-en'
  /tw/:
    permalink: /tw/{slug}/
    data: page.home
    template: index
    filter: 'tag:hash-tw'

When you want to use an internal tag within the routes file you need to prefix it with hash-. Hope this helps! :blush:

3

Thanks, I update as your config, but still not work.
And the locale doesn’t work now.It always show cn lang after I change to en lang in “general”.

routes:

collections:
  /:
    permalink: /{slug}/
    data: page.home
    template: index
    filter: 'tag:-[hash-cn,hash-en,hash-tw]'
  /cn/:
    permalink: /cn/{slug}/
    data: page.home
    template: index
    filter: 'tag:hash-cn'
  /en/:
    permalink: /en/{slug}/
    data: page.home
    template: index
    filter: 'tag:hash-en'
  /tw/:
    permalink: /tw/{slug}/
    data: page.home
    template: index
    filter: 'tag:hash-tw'

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

WX20200515-113809
WX20200515-1138091227×393 18.4 KB

is tag configed right?

4

Would you be able to share your site as well? Might help us debug what’s wrong. Looks like your #tw tag has been renamed to #w, this could cause issues so might be best to change the name back

5

Hi, the site url is http://47.112.100.140:9001/.
Now the site locale is en.

What I Expect:
I have “Simplified Chinese”, “Traditional Chinese”, “English” Three languages on the top of the page:
If I’m visiting “http://47.112.100.140:9001/contact-us” page, and I want to redirect to “http://47.112.100.140:9001/en/contact-us” if I click the English on the top of the page.

the site backend account:
teenmix/teenmix2020

Thanks.

6

You’ll need to customise the navigation in that case, by creating a custom set of navigation items in partials for each language. Those partials will then need to be included in their respective template files, so en readers will get directed to the en contact page. Does that make sense?

7

Do you mean that the url won’t need to change if I change language?the url always is ‘http://47.112.100.140:9001/contact-us’ instead of “http://47.112.100.140:9001/en/contact-us” .
Now I care this question:
if I put “Simplified Chinese”, “Traditional Chinese”, “English” Three language buttons on header of the template page, how to change the site locale in template file, is there any javascript api?

8

I mean that you’ll need to link to “en” pages when viewing “en” pages. There’s a section here in our multi-language tutorial which shows how to apply the lang attribute value for different languages:

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

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

For language switching you’ll need to link to their counterpart pages, those links can be captured either by adding languages alternatives in the head or by using JavaScript to calculate the link.

Hope this helps!