Multilingual menu, with entries from content

Hi there,

I’m trying to create 2 versions of a menu :

Here isthe corresponding section in my config.yml file :

defaultContentLanguage: fr

languages:
  fr:
    languageName: Français
    weight: 1
    menu:
      main:
        - identifier: test
          name: test
          url: /test
          weight: 1
        - identifier: offers
          name: Offres
          url: /offres
          weight: 2

  en:
    languageName: English
    weight: 2
    menu:
      main:
        - identifier: test
          name: test
          url: /test
          weight: 1
        - identifier: offers
          name: Offers
          url: /offers
          weight: 2

The first entry, test, is a regular one. It works fine in both FR and EN.

Now, I would like a dropdown menu on my “Offers” entry, from the .md file that I have created here :

content/en/offers/offer-1.md
content/en/offers/offer-2.md

content/fr/offers/offer-1.md
content/fr/offers/offer-2.md

Here are the frontmatters of those files :

content/en/offers/offer-1.md :

---
title: offer 1 EN
linkTitle: offer-1-en
menu:
    main:
        parent: offers
        weight: 1
type: offers
---
...

content/fr/offers/offer-1.md:

---
title: offer 1 FR
linkTitle: offer-1-fr
menu:
    main:
        parent: offers
        weight: 1
type: offers
---
...

Obviously, I want my english .md files to only populate my english menu, and same for the french version.

This logic worked perfectly fine for the fr menu, but this isn’t working for the english one. I happen to see the english pages in my french menu, they seem to overwrite each other.

I have tried using different identifiers, but I can’t get it to work. Surely I’m missing something, but I can’t find it from the docs.

Thank you for your help.

May be you can find solution there

Look to the translationKey front matter param or try different url/slug for every language.

Actually it doesn’t seem like you have configured the multilingual menu properly.

See the example config settings at: Multilingual Menus

Thank you for your answer, i’m not sure what you mean by that, could you by chance point out where would the mistake be ?

After converting the example toml file in the docs into .yml, it looks similar to mine :

languages:
  en:
    weight: 0
    languageName: English
    menu:
      main:
        - url: /
          name: Home
          weight: 0
  de:
    weight: 10
    languageName: Deutsch
    menu:
      main:
        - url: /
          name: Startseite
          weight: 0

I’ve read multiple times the menu documentation :confused:, so I must be missing something

Okay, I’ve got it working.

I’ve changed the way my files were disposed.

Before :

content > en > offer1.md, offer2.md   
        > fr > offer1.md, offer2.md

After :
content > offers > offer1.en.md, offer1.fr.md, offer2.en.md, offers2.en.md

@alexandros I’m still not sure what you meant since this seems to be working with my conf

@snayp I have added a translationKey in my pages, it doesn’t change anything right now but it might be useful along the way, thanks

@RebootGG
It seems that something else is going on in the project.

The menu entries set in the offer content files should appear in the respective language menu, regardless of where the content file is located.

I couldn’t reproduce your issue to begin with, that is why I pointed you to the config settings again.

In any case happy you solved it, even if the solution seems kind of strange to me.

This article will be useful if you really want multilingual content:

i was trying to develop multilingual blog, but it is difficult task to find theme with enough support for this cool feature :nerd_face: :smiley:

2 Likes

@RebootGG your first content structure was like this:

content/en/offers/offer-1.md
content/en/offers/offer-2.md

content/fr/offers/offer-1.md
content/fr/offers/offer-2.md

i assume you want to use Translate By Content Directory, then you forgot to set the contentDir for each language definition:

languages:
  fr:
    contentDir: content/fr
   ...
 en:
    contentDir: content/en
   ...

After that you changed your content structure to this:

content > offers > offer1.en.md, offer1.fr.md, 
                   offer2.en.md, offers2.en.md

By using this content structure, actually you are using Translation by Filename, no need extra config for each language definition, Hugo automatically detect it. That’s why your menu works.

2 Likes

@pamubay Hey, thank you, I completely missed that ! Now I can go back to my previous configuration :slight_smile:

@snayp thank you for the article

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.