Salin dan Bagikan
Hugo i18n Internationalization
Hugo Multilingual: Panduan Lengkap Membuat Website Multi Bahasa - Panduan lengkap implementasi multi-bahasa di Hugo. Pelajari cara membuat website bilingual, …

Hugo Multilingual: Panduan Lengkap Membuat Website Multi Bahasa

Hugo Multilingual: Panduan Lengkap Membuat Website Multi Bahasa

Hugo memiliki dukungan built-in yang kuat untuk website multi-bahasa atau multi-lingual. Fitur ini memungkinkan Anda membuat website yang menyajikan konten dalam berbagai bahasa, lengkap dengan navigation antar bahasa, translation management, dan URL structure yang proper. Panduan ini akan membahas secara komprehensif cara mengimplementasikan website multi-bahasa dengan Hugo.

Website multi-bahasa sangat penting untuk menjangkau audiens global. Hugo menyediakan framework yang robust untuk mengelola konten dalam berbagai bahasa, memudahkan developer dan content creators untuk maintain website bilingual atau multi-lingual dengan efisien.

Konfigurasi Dasar Multi-Bahasa

Single Language Configuration

Untuk memulai, konfigurasi dasar bahasa di hugo.toml:

baseURL = "https://example.com/"
languageCode = "id-ID"
title = "Website Saya"
defaultContentLanguage = "id"

[languages]
  [languages.id]
    languageName = "Bahasa Indonesia"
    weight = 1
    title = "Website Saya"

Multi-Language Configuration

Untuk multi-bahasa, konfigurasi dengan multiple languages:

baseURL = "https://example.com/"
languageCode = "en-US"
title = "My Website"
defaultContentLanguage = "id"

[languages]
  [languages.id]
    languageName = "Bahasa Indonesia"
    weight = 1
    title = "Website Saya"
    languageDirection = "ltr"
    
  [languages.en]
    languageName = "English"
    weight = 2
    title = "My Website"
    
  [languages.ar]
    languageName = "العربية"
    weight = 3
    title = "موقعي"
    languageDirection = "rtl"

Struktur Konten Multi-Bahasa

Content Files Naming Convention

Hugo menggunakan suffix untuk membedakan konten antar bahasa:

content/
  posts/
    my-article.id.md
    my-article.en.md
    my-article.ar.md

Same Directory Structure

Pastikan struktur direktori sama untuk semua bahasa:

content/
  posts/
    article-1/
      index.id.md
      index.en.md
    article-2.md      <- Jika bahasa default, suffix tidak diperlukan
    article-2.en.md

Frontmatter dengan Language

---
title: "Judul Artikel Indonesia"
slug: "judul-artikel"
date: 2026-02-03T20:00:00.000Z
translationKey: "article-1"
---

Konten dalam Bahasa Indonesia...

---
title: "English Article Title"
slug: "article-title"
date: 2026-02-03T20:00:00.000Z
translationKey: "article-1"
---

Content in English...

Mengakses Konten Berdasarkan Bahasa

Di Templates

{{/* Dapatkan halaman dalam bahasa saat ini */}}
{{ .Title }}

{{/* Dapatkan halaman yang sama dalam bahasa lain */}}
{{ .Translations }}

{{/* Iterasi semua translasi */}}
{{ range .Translations }}
    <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
{{ end }}

{{/* Dapatkan halaman dalam bahasa spesifik */}}
{{ $enPage := where .Translations "Language.Lang" "en" | first 1 }}
{{- with $enPage -}}
    <a href="{{ .Permalink }}">English version</a>
{{- end -}}

Mengakses Semua Halaman per Bahasa

{{/* Semua halaman bahasa Indonesia */}}
{{ range where .Site.RegularPages "Language.Lang" "id" }}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}

{{/* Semua halaman dalam semua bahasa */}}
{{ .Site.AllPages }}

{{/* Halaman dengan bahasa tertentu */}}
{{ .Site.Home.Translations }}

Language Navigation

Language Selector

{{/* layouts/partials/language-selector.html */}}
<div class="language-selector">
    {{- if .IsHome -}}
        {{- range .Site.Languages -}}
            {{- if eq .Lang "id" -}}
                <span class="current-lang">🇮🇩 Indonesia</span>
            {{- else -}}
                <a href="{{ .Permalink }}" class="lang-link">🇺🇸 English</a>
            {{- end -}}
        {{- end -}}
    {{- else -}}
        {{- range .Translations -}}
            <a href="{{ .Permalink }}" lang="{{ .Language.Lang }}" 
               class="lang-link {{ if eq .Language.Lang .Site.Language.Lang }}current{{ end }}">
                {{ .Language.LanguageName }}
            </a>
        {{- end -}}
    {{- end -}}
</div>

RTL Support untuk Bahasa Arab

/* layouts/css/rtl.css */
html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] .nav {
    text-align: right;
}

html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
}

{{/* layouts/_default/baseof.html */}}
<html lang="{{ .Site.Language.Lang }}" 
      dir="{{ if eq .Site.Language.LanguageDirection "rtl" }}rtl{{ else }}ltr{{ end }}">

Translation Management

Translation Keys

Buat file translation untuk setiap bahasa:

i18n/
  id.yaml
  en.yaml
  ar.yaml

# i18n/id.yaml
- id: read_more
  translation: "Baca Selengkapnya"

- id: published_on
  translation: "Dipublikasikan pada"

- id: by_author
  translation: "Oleh"

# i18n/en.yaml
- id: read_more
  translation: "Read More"

- id: published_on
  translation: "Published on"

- id: by_author
  translation: "By"

Menggunakan Translation di Template

{{ i18n "read_more" }}

{{ i18n "published_on" }} {{ .Date.Format "2 January 2006" }}

Translation dengan Parameter

# i18n/id.yaml
- id: welcome_user
  translation: "Selamat datang, %s"

{{ i18n "welcome_user" .Params.author }}

URL Structure untuk Multi-Bahasa

Language Prefix di URL

[permalinks]
  posts = "/posts/:slug/"
  
  [permalinks.id]
    posts = "/artikel/:slug/"
    
  [permalinks.en]
    posts = "/posts/:slug/"

Subdirectory per Language

https://example.com/id/artikel/judul-artikel
https://example.com/en/posts/article-title
https://example.com/ar/posts/article-title

Custom Domain per Language

[languages.id]
  languageName = "Bahasa Indonesia"
  baseURL = "https://id.example.com/"
  
[languages.en]
  languageName = "English"
  baseURL = "https://en.example.com/"

Taxonomy Multi-Bahasa

Categories dan Tags

---
title: "Artikel dalam Bahasa Indonesia"
categories:
  - Teknologi
  - Pemrograman
tags:
  - Hugo
  - Static Site
---

{{/* Di template untuk taxonomy */}}
{{ range .Site.Taxonomies.categories }}
    {{ .Page.Title }} ({{ .Count }})
{{ end }}

Translation untuk Taxonomy

# i18n/id.yaml
- id: categories
  translation: "Kategori"

- id: tags
  translation: "Tag"

Menambahkan Bahasa Baru

Langkah-langkah untuk menambahkan bahasa baru:

  1. Update hugo.toml dengan konfigurasi bahasa baru
  2. Buat file i18n/[lang].yaml
  3. Translate konten yang ada atau buat konten baru
  4. Update language selector di template
  5. Test semua halaman dan navigation

Best Practices

Organization Strategy

Pisahkan konten berdasarkan bahasa untuk maintainability yang lebih baik, atau gunakan translationKey untuk menghubungkan konten related. TranslationKey adalah pendekatan yang direkomendasikan untuk website dengan konten yang comprehensive di semua bahasa.

Content Strategy

Maintain content parity antar bahasa untuk pengalaman pengguna yang konsisten. Jika satu bahasa memiliki konten yang tidak tersedia di bahasa lain, gunakan proper indication.

URL Consistency

Pilih URL structure dan pertahankan konsistensi. Redirect dari URL lama ke URL baru jika perlu perubahan.

Troubleshooting

Translation Tidak Muncul

Pastikan translationKey sama di semua versi bahasa:

# content/posts/article.id.md
translationKey: "my-article"

# content/posts/article.en.md
translationKey: "my-article"

Language Selector Kosong

Pastikan halaman memiliki translasi:

{{- if .IsTranslated -}}
    {{ range .Translations }}
        <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
    {{ end }}
{{- end -}}

Kesimpulan

Hugo menyediakan framework yang comprehensive untuk website multi-bahasa. Dengan konfigurasi yang tepat, Anda dapat membangun website yang melayani audiens global dengan navigation yang intuitive dan pengalaman pengguna yang konsisten di semua bahasa.

Artikel Terkait

Link Postingan : https://www.tirinfo.com/hugo-multilingual/

Hendra WIjaya
Tirinfo
4 minutes.
3 February 2026