Redefining default language switcher

[koshelekapi]

Hello! I'm not pretty sure where to place my question as this is a question not an issue) I'm trying to redefine default language switcher (I want to display languages right now in the header instead of the dropdown menu). I followed the instruction in readme.md file, but I have no success. May be you can help me in any case?

[kamilkrzyskow]

Hi, please provide some minimal example files of what you did, version of the plugin you're using and maybe version of the theme too. Assuming you're using the material theme, then maybe those other guides on "how to theme override" will help you:

• https://squidfunk.github.io/mkdocs-material/customization/#extending-the-theme
• https://github.com/squidfunk/mkdocs-material/discussions/3406

However, I recommend using a more dynamic and less intrusive approach (however note I will likely update the guide in the coming 2 weeks for the newer code solution, but I guess you need a solution now ✌️):

• https://github.com/squidfunk/mkdocs-material/discussions/5060

[koshelekapi]

Hello @kamilkrzyskow , Thanks for answering. I use: Mkdocs Material, the 8.x version I assume. mkdocs-static-i18n (v.0.53)

Changes I have made:

1. mkdocs.yml:

   - i18n:
     material_alternate: true

2. overrides/main.html:

   {% block header %}
   {% if "i18n" in config.plugins %}
   <header class="md-header" data-md-component="header">
   <div style="margin-left: 10px; margin-right: 10px;">
       {% include "partials/i18n_languages.html" %}
   </div>
   </header>
   {% endif %}
   {% endblock %}

3. I created a file i18n_languages.html in the overrides/partials folder with the content below:

   {% for lang, display in config.plugins.i18n.config.languages.items() -%}
   <div style="display: inline-block; margin-right: 10px;"><a href="https://ultrabug.github.io/mkdocs-static-i18n/{{ lang }}/">{{ display }}</a></div>
   {% endfor %}

   But unfortunately I'm not quite sure how to implement my needs (as I'm not a frontend developer but a technical writer)

[kamilkrzyskow]

To check the version of you installed plugins you can run the

pip freeze

or

python -m pip freeze

commands. Just mentioning that, so you don't have to guess in the future 😉 I'll check your solution on the latest 8.x and use 0.53

---

The material_alternate is set true by default, so there is no need to set in manually, and I don't know yet if it's necessary in your case. I'm also interested in your whole i18n configuration, but I'll assume you're running the plugin's example site with en and fr languages already configured.

---

I never did it myself before, but the README doesn't exactly mention anything about using main.html just overriding the whole partials/header.html file. For now I'll assume it's possible to do it with just main.html Running your code example shows such header:

It removed everything except for i18n override, since you didn't add the {{ super() }} call, which draws the rest of the default header block. It also shows the whole i18n object instead of the name, because of the {{ display }} and not {{ display.name }}. I also personally don't like using the external partial file, because it's so small, therefore I'll just use main.html. The link href also leads to the website from this repository instead of an url to the built docs. However, I'm not sure what exactly to put there myself currently to make it fully working.

In the end this is the main.html file, I came up with for now.

{%- extends "base.html" %}

{%- block header -%}
    {{- super() -}}
    {%- if "i18n" in config.plugins -%}
    <header class="md-header" data-md-component="header">
        <div style="margin: 0 1em; font-size: 2em;">
            {%- for lang, display in config.plugins.i18n.config.languages.items() -%}
                <div style="display: inline-block; margin: 0 1em;">
                    <a href="{{ page.url | replace(page.locale, lang) | url }}">
                        {{- display.name -}}
                    </a>
                </div>
            {%- endfor -%}
        </div>
    </header>
    {%- endif -%}
{%- endblock -%}

The - in {{- or -%} removes raw white-space, in most cases it doesn't affect the display, just slightly lowers file size 👌

This is the result:

---

If you want to completely remove the drop down, then you have to edit and override the whole partials/header.html file, removing the part where the drop down is and replacing it with the code above between the if and endif.

Also if you're looking for something specific then you'd need to draw it out.

[kamilkrzyskow]

@koshelekapi Any feedback? ✌️

[koshelekapi]

Hi @kamilkrzyskow , thanks for your advices. I applied these changes, now my header looks like on the screenshot below. Now I need to move it to the right and configure correct language switching (for now, it doesn't work). I hope that I'll be able to to the first task with CSS)

[koshelekapi]

Also, initial dropdown with language selector still here(

[kamilkrzyskow]

... Now I need to move it to the right and configure correct language switching (for now, it doesn't work). ...

What do you mean it doesn't work for now? What was expected to happen and what actually happened?

I hope that I'll be able to to the first task with CSS)

Even if you can change the position of the language buttons via CSS, it's best to keep using HTML overrides.

Everything is as expected, as shown in my screenshots above, the same on your screenshots, and I already told you:

If you want to completely remove the drop down, then you have to edit and override the whole partials/header.html file, removing the part where the drop down is and replacing it with the code above between the if and endif. Also if you're looking for something specific then you'd need to showcase it somehow.

So instead of posting the same screenshots, as me, send a screenshot with a mock example layout.

I've sent you resources in my first comment, I pinged you @koshelekapi to see how far you've progressed over the weekend and it seems you just started and just now copied my code 😞

---

As a side-note from me, your large logo + language switchers next to each other will likely not look good on mobile.

[koshelekapi]

Hello @kamilkrzyskow Thanks for your helping (I appreciate that) and sorry for possible misunderstanding. The mock screenshot from our design group is listed below. On the header screenshoted, the current language is displayed (is it possible to display dropdown menu with another possible language on mouseover event?)

[kamilkrzyskow]

@koshelekapi So you want to keep the drop-down menu, and want to add text to the selector, to the right of the icon? Here's an initial mock draft (and unfinished code):

https://user-images.githubusercontent.com/34622465/229735918-9a95c850-a5b2-49cd-8946-dafa8efc1bf5.mp4

mkdocs.yml file

theme:
  icon:
    alternate: octicons/globe-16

extra_css override

.md-select .md-header__button {
    display: flex;
    align-items: center;
}

header.html partial override

<button class="md-header__button md-icon" aria-label="Select language">
    <svg>...</svg>
    <span style="margin-left: 0.5em; font-size: 1.5em;">English (current language)</span>
</button>

[koshelekapi]

Almost there) your help was very great, thank you @kamilkrzyskow. Now the last question: is it possible to change the language specified (as far as I see) in the span tag in the header.html file to the current value? See the video attached for more details. screencast-adtech-web.pages.devplatform.tcsbank.ru-2023.04.04-17_47_32.webm

[kamilkrzyskow]

Good job on completing my example, on your own @koshelekapi 👍. I'm assuming you did add an overrides/partials/header.html file, together with the added span tag. The plugin provides context variables https://github.com/ultrabug/mkdocs-static-i18n#using-i18n-context-variables-in-your-pages

We should be able to use those together with the initial code example to get the wanted result:

<span style="margin-left: 0.5em; font-size: 1.5em;">{{ config.plugins.i18n.config.languages[i18n_page_locale].name }}</span>

I'm currently unable to test it, so if there are issues, I'll get back to it later ✌️

[koshelekapi]

For now, you're right, I have overrided the overrides/partials/header.html file. I added the last code, and I get errors about the

Traceback (most recent call last):
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\runpy.py", line 196, in _run_module_as_main
    return _run_code(code, main_globals, None,
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\runpy.py", line 86, in _run_code      
    exec(code, run_globals)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\Scripts\mkdocs.exe\__main__.py", line 7, in <module>
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\click\core.py", line 1130, in __call__
    return self.main(*args, **kwargs)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\click\core.py", line 1055, in main
    rv = self.invoke(ctx)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\click\core.py", line 1657, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\click\core.py", line 1404, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\click\core.py", line 760, in invoke
    return __callback(*args, **kwargs)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\mkdocs\__main__.py", line 234, in serve_command
    serve.serve(dev_addr=dev_addr, livereload=livereload, watch=watch, **kwargs)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\mkdocs\commands\serve.py", line 83, in serve
    builder(config)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\mkdocs\commands\serve.py", line 76, in builder
    build(config, live_server=live_server, dirty=dirty)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\mkdocs\commands\build.py", line 320, in build
    _build_theme_template(template, env, files, config, nav)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\mkdocs\commands\build.py", line 118, in _build_theme_template
    output = _build_template(template_name, template, files, config, nav)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\mkdocs\commands\build.py", line 97, in _build_template
    output = template.render(context)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\jinja2\environment.py", 
line 1291, in render
    self.environment.handle_exception()
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\jinja2\environment.py", 
line 925, in handle_exception
    raise rewrite_traceback_stack(source=source)
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\material\404.html", line 4, in top-level template code
    {% extends "main.html" %}
  File "C:\Users\i.shakhbazyan\portalRepo\partners-public-docs\docs/overrides\main.html", line 1, in top-level template code
    {% extends "base.html" %}
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\material\base.html", line 135, in top-level template code
    {% block header %}
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\material\base.html", line 136, in block 'header'
    {% include "partials/header.html" %}
  File "C:\Users\i.shakhbazyan\portalRepo\partners-public-docs\docs/overrides\partials\header.html", line 102, in top-level template code
    <span style="margin-left: 0.5em; font-size: 1.5em;">{{ config.plugins.i18n.config.languages['i18n_page_locale'].name }}</span>
  File "C:\Users\i.shakhbazyan\AppData\Local\Programs\Python\Python310\lib\site-packages\jinja2\environment.py", 
line 474, in getattr
    return getattr(obj, attribute)
jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'i18n_page_locale'

I googled this error. I tried to add commas about i18n_page_locale variables like in documentation. But it didn't help.

[kamilkrzyskow]

@koshelekapi ~~In the error log that you've provided, it shows the version with quotes: <span style="margin-left: 0.5em; font-size: 1.5em;">{{ config.plugins.i18n.config.languages['i18n_page_locale'].name }}</span> the version that I've sent you had no quotes: <span style="margin-left: 0.5em; font-size: 1.5em;">{{ config.plugins.i18n.config.languages[i18n_page_locale].name }}</span>~~

So I'm sure the errors would be different when running different code examples. I will look at it shortly.

[kamilkrzyskow]

@koshelekapi Sorry it took so long, it turned out that i18n_page_locale is undefined, and I'm quite surprised this is the case, since I did use this variable in partial overrides in the past 🤔 Anyways, this works on my end:

{{ config.plugins.i18n.config.languages[config.theme.language].name }}

[koshelekapi]

Thanks @kamilkrzyskow, now all works great! Your advices were really helpful, so I implemented all I need.

[koshelekapi]

Hmm, a very strange behaviour) when I merged all the changes to the production site, the search bar disappeared( It works OK on my localhost (when I build with mkdocs serve, but the production effect is very strange)l.

[kamilkrzyskow]

@koshelekapi Perhaps a different version of the plugin / MkDocs? Open up your browser Developer Tools with F12 or follow this guide

Then check the <head> of your page and look for a similar generator meta tag to this: <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.1.5">

You said previously you're using MkDocs 8.x with plugin version 0.53 locally, maybe one of those changed in production. There was a search plugin change in Material for MkDocs in version 9.0 and there is different header.html partial structure https://squidfunk.github.io/mkdocs-material/upgrade/#changes-to-html-files So if that's the case, redo the previous steps with the new header.html partial. This should bring back the search bar.

I don't think there were any changes in the plugin from version 0.53 to 0.56 to break the above 🤔

I don't know about the misaligned icon and text 🤔 maybe there was some additional CSS change hmm.

[koshelekapi]

Well, <meta content="mkdocs-1.4.2, mkdocs-material-9.0.0b4" name="generator"/> So I was not correct, and our MkDocs Material is one of latest versions. Should I perform any changes in this case?

[kamilkrzyskow]

Should I perform any changes in this case?

For now try to use the partial from version 9.0.0b4, add those changes from before, and see if what will still be broken. https://github.com/squidfunk/mkdocs-material/releases/tag/9.0.0b4

Tbh I don't really see any reason for you to stop at 9.0.0b4 and not update further 🤔Unless you have more static theme overrides.

---

EDIT I just checked and the CSS worked on my end, maybe you forgot to send the extra_css to the production site. You can also input the CSS inline.

[kamilkrzyskow]

@koshelekapi Just to be clear, you have to redo the previous steps with the updated header.html partial:

<button class="md-header__button md-icon" style="display: flex; align-items: center;" aria-label="{{ lang.t('select.language') }}">
  {% include ".icons/" ~ icon ~ ".svg" %}
  <span style="margin-left: 0.5em; font-size: 1.5em;">{{ config.plugins.i18n.config.languages[config.theme.language].name }}</span>
</button>

This is a version with full inline CSS, so there is no need for extra_css ✌️

[koshelekapi]

Well:

1. I copied the original header.html file into my overrides/partials directory
2. I apllied accumulated changes, so my button code now looks like this:

           <svg>...</svg>                    
           <span style="margin-left: 0.5em; font-size: 1.5em;">{{ config.plugins.i18n.config.languages[config.theme.language].name }}</span>
       </button> 

3. On localhost and stage server it worked great. I deployed it on production site, and there's a little view defect.

[kamilkrzyskow]

@koshelekapi Well, why did you omit the top part 😆 <button class="md-header__button md-icon" style="display: flex; align-items: center;" aria-label="{{ lang.t('select.language') }}">

Before this inline method I gave you this example with extra_css in https://github.com/ultrabug/mkdocs-static-i18n/issues/213#issuecomment-1495587092

.md-select .md-header__button {
    display: flex;
    align-items: center;
}

[koshelekapi]

well at last it works ok (i hope so)

[ultrabug]

Thanks, closing