Skip to main content
On this page

Thêm không giới hạn ngôn ngữ

Ban đầu, tôi thiết kế chương trình chỉ cho 2 ngôn ngữ để đơn giản cho người dùng phổ thông, nhưng bạn có thể thêm bao nhiêu ngôn ngữ tuỳ thích, làm như sau.

Lưu ý

Thêm 2 ngôn ngữ đầu tiên theo hướng dẫn này, sau đó làm theo hướng dẫn này.

Lưu ý

Bạn nên tuỳ biến giao diện và lưu lại, vì khi cập nhật tính năng mới, bạn có thể phải làm lại.

Hai bước để thêm vô hạn ngôn ngữ (lặp lại tương tự).

#1. Sửa file language-dropdown.hbs

Tìm file language-dropdown.hbs tại ./partials/nav/language-dropdown.hbs và mở ra. Bạn sẽ thấy đoạn code như sau (dòng 16):

./partials/nav/language-dropdown.hbs
...
    {{!-- Ví dụ thêm ngôn ngữ fr --}}
    {{!-- 1. Đổi https://yourdomain.com/fr/ thành ngôn ngữ bạn muốn --}}
    {{!-- 2. Đổi text "fr" tương ứng --}}


    {{!--
    {{#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}}
    --}}
    {{!--  Ví dụ thêm ngôn ngữ fr --}}
...

Bạn cần xoá {{!-- và --}} , kết quả sẽ như sau:

Thay 3 vị trí bằng ngôn ngữ bạn muốn, ví dụ de hoặc tr …

./partials/nav/language-dropdown.hbs
...
    {{!-- Ví dụ thêm ngôn ngữ fr --}}
    {{!-- 1. Đổi https://yourdomain.com/fr/ thành ngôn ngữ bạn muốn --}}
    {{!-- 2. Đổi text "fr" tương ứng --}}


    {{#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>
            de
        </a>
    </ul>
    {{/match}}
...

Thay 3 vị trí bằng ngôn ngữ bạn muốn, ví dụ de hoặc tr …

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

Lưu lại là xong.

Mẹo

Thêm ngôn ngữ mới chỉ cần nhân bản block code.

#2. Sửa file multilingual-tags.hbs

Tìm file multilingual-tags.hbs tại ./partials/site-wide/multilingual-tags.hbs và mở ra.

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

Bạn cần xoá {{!-- và --}} (dòng 7) và đổi https://yourdomain.com/fr/{{slug}}/ và fr thành domain và ngôn ngữ bạn muốn.

Ví dụ:

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

Lưu lại là xong.