Thêm số lượng ngôn ngữ tùy ý

Tôi thiết kế mặc định chỉ hỗ trợ tối đa 2 ngôn ngữ vì muốn đơn giản cho người dùng phổ thông, tuy nhiên bạn có thể thêm bao nhiêu ngôn ngữ tùy ý, và dưới đây là cách thực hiện.

Việc thêm 2 ngôn ngữ đầu tiên hãy làm theo hướng dẫn này, sau đó tiếp tục làm theo hướng dẫn bên dưới.

Điều quan trọng là bạn cần tùy chỉnh theme và lưu lại, vì khi chúng tôi thêm tính năng mới, bạn có thể sẽ phải thiết lập lại một lần nữa.

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

#1. Chỉnh file language-dropdown.hbs

Tìm file:

language-dropdown.hbs tại đường dẫn:

./partials/nav/language-dropdown.hbs

Mở file lên, bạn sẽ thấy đoạn code như sau (khoảng dòng 24):

{{!-- Ví dụ thêm một ngôn ngữ fr --}}
{{!-- 1. Thay https://yourdomain.com/fr/ thành ngôn ngữ bạn muốn --}}
{{!-- 2. Thay luôn chữ "fr" --}}

{{!--
{{#match @site.locale "!=" "fr"}} 
<div class="...">
    <a class="btn-language-items"
        href="https://yourdomain.com/fr/">
        <svg viewBox=...">
            <use href="..."></use>
        </svg>
        fr
    </a>
</div>
{{/match}}
--}}
{{!-- Ví dụ thêm một ngôn ngữ fr --}}

Bạn cần làm:

• Xóa {{!-- và --}} để kích hoạt đoạn code
• Thay 3 phần sau:
  • URL: https://yourdomain.com/fr/
  • ngôn ngữ: fr
  • text hiển thị: fr (hoặc de, tr, jp…)

Sau khi chỉnh, đoạn code sẽ thành:

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

👉 Việc thêm ngôn ngữ mới chỉ đơn giản là copy block này và thay giá trị tương ứng.

#2. Chỉnh file multilingual-tags.hbs

Tìm file:

./partials/site-wide/multilingual-tags.hbs

Bạn sẽ thấy:

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

Bạn cần làm:

• Xóa {{!-- và --}}
• Thay URL và ngôn ngữ theo version bạn muốn

Ví dụ:

<link rel="alternate" href="https://ghostfam.com/de/{{slug}}/" hreflang="de" />

Hoàn tất

• Bước 1: thêm ngôn ngữ vào dropdown
• Bước 2: thêm thẻ hreflang cho SEO
• Lặp lại 2 bước để mở rộng số lượng ngôn ngữ không giới hạn