Navigation Menu for multi language site

Hi all,

I have been reading a couple of forum posts here as well as the Ghost Documentation but, I still encounter an issue where my menu won’t change base on the site language.

I am setting a 2 languages website, main in fr and second in en.
Main language url: site[.]com
Second language url: site[.]com/en/

My theme is multi language ready and I have a fr.json and en.json file for it.

For both languages, the menu will have this structure:

  • Home (Displaying a short text and recent posts)
  • Blog (a blog)
  • About
  • Contact

I created in the admin page, a primary and secondary menu.

Here is what I tried so far:
header.hbs:

    <nav id="main-navigation" class="site-navigation" aria-label="Main Navigation">
      <div class="site-nav-wrap">
        <div class="site-nav-inside">
            {{!-- The tag below includes the navigation menu - partials/navigation.hbs --}}
            {{#has slug="../en/"}}
               {{navigation type="secondary"}}
            {{else}}
               {{navigation}}
             {{/has}}
             {{!-- The tag below includes the social links list - partials/social-links.hbs --}}
                {{> "social-links"}}
             {{!-- The tag below includes the language switcher list - partials/language-switcher.hbs --}}
                {{> "language-switcher"}}
          </div><!-- .site-nav-inside -->
       </div><!-- .site-nav-wrap -->
    </nav><!-- .site-navigation -->

navigation.hbs:

{{!-- Navigation menu --}}
{{#if isSecondary}}
{{#foreach navigation type=“secondary”}}
<a href=“{{url absolute=“true”}}”>{{label}}
{{/foreach}}
{{else}}
{{#foreach navigation}}
<a href=“{{url absolute=“true”}}”>{{label}}
{{/foreach}}
{{/if}}

And here is my routes.yaml:

routes:
/:
    controller: channel
    filter: 'tag:-hash-en'
    template: home
/en/:
    controller: channel
    filter: 'tag:hash-en'
    template: home
/en/about/:
    controller: channel
    filter: 'tag:hash-en+title:about'
    data: page.about
    template: page
/contact/:
    controller: channel
    filter: 'tag:hash-fr+title:ecrivez-moi'
    data: 'page.ecrivez-moi'
    template: page
/en/contact/:
    controller: channel
    filter: 'tag:hash-en+title:email-me'
    data: 'page.email-me'
    template: page

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

Thank you,

Theme locale files are not for multi-language sites, they are for translating text inside a theme for when people want to use the theme in another language. I’d highly recommend checking out our tutorial on how to create a multi-language site here:
https://ghost.org/tutorials/multi-language-content/

Hope this helps!

Hi David,

I had read it and tried to adapt my routes based on that tutorial, but I will go through it again.

1 Like

Hi David,

I went through the doc again and played around with my theme. I placed the block helper as it looks like the cleaner solution, however I can’t seem to be able to check the value it has.
In admin panel I created a primary menu with links in french, and a secondary menu with links in english.
I am trying to call the right menu based on the value of the lang block, but I am at a road block again.

I don’t think you should be using Handlebars code to define data values. You’re better off checking an internal tag and then showing the navigation based on that value. Alternatively you could code up the navigation items yourself in a partial and selectively add it to en and fr templates?

1 Like

Hey David,

I had tried something like:

  {{#has tag="#en"}}
     {{navigation type="secondary"}}
{{else}}
     {{navigation}}
 {{/has}}

Is it what you mean by using internal tags for the navigation?

That’s right! Some page routes may require that you apply a page to them so they have access to the page data and ergo the tags of the page.

Awesome!! :slight_smile:

What I tried was in navigation.hbs the following code, but it did not work.
All pages and posts have either #en or #fr to distinguish the language.

 {{#has tag="#en"}}
	{{#foreach navigation type="secondary"}}
		HTML Code for menu
	{{/foreach}}
{{else}}
	{{#foreach navigation}}
		HTML Code for menu
	{{/foreach}}
{{/has}}

navigation.hbs is called in the header, itself called in default.hbs

Currently I can show posts by language but I cant change navigation menu. Do I need to modfiy theme files for this?

1 Like

İs this method illogical for the architecture? May be we can attend private tags to menu links.

I’ve gone into my theme and have been creating css navigations from online templates, I’m having positioning issues, but it gives me dropdown or megamenus. Which is probably ideal for you too.

yes may be it is true but I think we should manage navigation menu on admin panel. We should can attend language tags to links.

¡Hi!

Has anyone found a solution for multi-language sites? I’ve tried everything and so far, I’ve only been capable of adding the tag and creating the collections for blog posts.

But what I really want is having the entire site in both English and Spanish, including: Navigation Menu, Pages, Portal, etc.

I’ve been trying to follow this guide with low success, because many things have change for Casper theme:

Tutorial: A complete guide to translation & multi-language content in Ghost (archive.org)

I’m using Ghost.io.

Can anyone help me?

Thanks in advance.

Hi @Capriej

I did it. I can do it for you. Can I know your requirement?

You can check my website https://androidwedakarayo.com/

Hi @thimiraonline!

Thanks for your answer, I really appreciate it!

I’d like to do exactly what you did: having a drop-down option for English and Spanish version since I find it easier for the user. Also, if possible, having the Navigation Menu in both languages as well.

Is there a guide for it?

Thanks again.

I can customize your theme and the routes. Shall I share my Fiverr gig with you?

I’m looking for something that I can do for myself, but yes. It could be useful for the future.

Thanks!