Skip to main content
On this page

Adding as many languages as you want

Initially, I designed the program for 2 languages only so it’s simple to use for regular users, but you can add as many as you want, and here’s how.

Note

Adding 2 languages first follows this tutorial, then follow this tutorial.

Note

It’s important that you customize the theme and save it, because when we add new features, you might have to redo again.

Two steps to add infinity language (repeat).

#1. Edit file language-dropdown.hbs

Find the file language-dropdown.hbs at the path ./partials/nav/language-dropdown.hbs and open it. You will se the block code as below (line 16):

./partials/nav/language-dropdown.hbs
...
    {{!-- Example of adding one more fr language --}}
    {{!-- 1. Change https://yourdomain.com/fr/ into your specific language you want --}}
    {{!-- 2. Change "fr" text as well --}}


    {{!--
    {{#match @site.locale "!=" "fr"}}
    <a class="btn-language px-5 py-2 w-full"
        href="https://yourdomain.com/fr/">
        <svg viewBox="0 0 100 100" aria-hidden="true" class="size-3.5 min-w-3.5">
            <use href="{{asset 'cache/sprite.svg#global-icon'}}"></use>
        </svg>
        fr
    </a>
    {{/match}}
    --}}
    {{!--  Example of adding one more fr language --}}
...

You need remove {{!-- and --}} , we will have the block as below in final:

Replace 3 places with your language you want, for example de or tr ,etc

./partials/nav/language-dropdown.hbs
...
    {{!-- Example of adding one more fr language --}}
    {{!-- 1. Change https://yourdomain.com/fr/ into your specific language you want --}}
    {{!-- 2. Change "fr" text as well --}}


    {{#match @site.locale "!=" "fr"}}
    <ul class="...">
        <a class="btn-language-items"
            href="https://yourdomain.com/fr/">
            <svg viewBox=...">
                <use href="..."></use>
            </svg>
            fr
        </a>
    </ul>
    {{/match}}


    {{#match @site.locale "!=" "de"}}
    <ul class="...">
        <a class="btn-language-items"
            href="https://yourdomain.com/de/">
            <svg viewBox=...">
                <use href="..."></use>
            </svg>
            fr
        </a>
    </ul>
    {{/match}}
...

Replace 3 places with your language you want, for example de or tr ,etc

  • {{#match @site.locale "!=" "fr"}}
  • https://yourdomain.com/fr/
  • fr (text)

Save it and done.

Tip

Adding new languages is as simple as duplicating the code block.

#2. Edit file multilingual-tags.hbs

Find the file multilingual-tags.hbs at the path ./partials/site-wide/multilingual-tags.hbs and open it.

./partials/site-wide/multilingual-tags.hbs
{{#has tag="#multilingual"}} ... {{!--
<link
  rel="alternate"
  href="https://yourdomain.com/fr/{{slug}}/"
  hreflang="fr"
/>
--}} ... {{/has}}

You need remove {{!-- and --}} (line 7) and change https://yourdomain.com/fr/{{slug}}/ and fr into your domain with 3rd language you want.

For example:

./partials/site-wide/multilingual-tags.hbs
<link
  rel="alternate"
  href="https://yourdomain.com/de/{{slug}}/"
  hreflang="de"
/>

Save it and done.