kurtsson / jekyll-multiple-languages-plugin

I18n support for Jekyll and Octopress
MIT License
922 stars 203 forks source link

Jekyll Multiple Languages Navigation #175

Open blogi-kriptovalyut opened 3 years ago

blogi-kriptovalyut commented 3 years ago

Hey. I've been struggling for a week now to translate the navigation menu into several languages. I found many examples on Google where people were able to customize the translation of the menu. The articles were from 2018, maybe something has changed in the topic or in Jekyll?

How do I create a multilingual menu:

file: _data/navigation.yml

languages:
  - language: "en"
    links:
    - title: "About"
      url: /about/
    - title: "Archives"
      url: /archives/
    - title: "GitHub"
      url: https://github.com
    - title: "pt"
      url: /pt/
  - language: "pt"
    links:
    - title: "Sobre"
      url: /sobre/
    - title: "Arquivos"
      url: /arquivos/
    - title: "GitHub"
      url: https://github.com
    - title: "en"
      url: /

Two languages, two subtrees with the correct URLs for either.

Then I needed to incorporate that into the _includes/masthead.html

{% for item in site.data.navigation.languages %}
  {% if item.language == page.lang %}
    {% for link in item.links %}
      {% if link.url contains "http" %}
        {% assign url = link.url %}
      {% else %}
        {% assign url = link.url | relative_url %}
      {% endif %}
      <a class="page-link" href="{{ url }}">{{ link.title }}</a>
    {% endfor %}
  {% endif %}
{% endfor %}

By this design, it is not displayed even without the plugin "Jekyll Multiple Languages Plugin" in a clean theme "Minimal Mistakes"

I tried simpler and changed the standard theme code

    <ul class="visible-links">
          {%- for link in site.data.navigation.languages -%}
            <li class="masthead__menu-item">
              <a href="{{ link.url | relative_url }}"{% if link.description %} title="{{ link.description }}"{% endif %}>{{ link.title }}</a>
            </li>
          {%- endfor -%}
        </ul>

This displays all menu items in all languages.

Please help me figure it out because I think you are the best community!