Chuyển đến nội dung

Adding as many languages as you want

Nội dung này chưa có sẵn trong ngôn ngữ của bạn.

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.

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
15
...
16
{{!-- Example of adding one more fr language --}}
17
{{!-- 1. Change https://yourdomain.com/fr/ into your specific language you want --}}
18
{{!-- 2. Change "fr" text as well --}}
19
20
{{!--
21
{{#match @site.locale "!=" "fr"}}
22
<a class="btn-language px-5 py-2 w-full"
23
href="https://yourdomain.com/fr/">
24
<svg viewBox="0 0 100 100" aria-hidden="true" class="size-3.5 min-w-3.5">
25
<use href="{{asset 'cache/sprite.svg#global-icon'}}"></use>
26
</svg>
27
fr
28
</a>
29
{{/match}}
30
--}}
31
{{!-- Example of adding one more fr language --}}
32
...

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.


#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
5
{{#has tag="#multilingual"}}
6
...
7
{{!-- <link rel="alternate" href="https://yourdomain.com/fr/{{slug}}/" hreflang="fr" /> --}}
8
...
9
{{/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.