Fitur Multi-Bahasa pada Tema Blogger

Cara membuat tema Blogger agar bisa diterjemahkan ke dalam bahasa asing.

Tabel Konten
  1. Sintaks XML 
  2. Pengaturan Bahasa 
  3. Eksperimen 

Fitur multi-bahasa pada Blogger sebenarnya sudah lama ada, namun sifatnya sangat tertutup. Data bahasa tersimpan sebagai properti objek dan nilainya tidak bisa diubah oleh pengembang tema.

<h3>
  <b:if cond='data:post.numComments == 1'>
    1 <data:commentLabel/>
  <b:else/>
    <data:post.numComments/> <data:commentLabelPlural/>
  </b:if>
</h3>

Setiap item bahasa tersimpan sebagai data global dan dapat diakses secara langsung melalui elemen <data:*> di mana saja, termasuk di luar lingkup gawai.

Karena sifatnya yang tertutup, para pengembang tema yang ingin menggunakan frase yang berbeda pada elemen blog mereka menjadi harus menuliskannya secara manual, sehingga tidak fleksibel, karena frase tersebut tidak bisa menyesuaikan diri dengan pilihan bahasa antarmuka saat itu.

<h3>
  <b:if cond='data:post.numComments == 0'>
    No Comments
  <b:elseif cond='data:post.numComments == 1'>
    1 Comment
  <b:else/>
    <data:post.numComments/> Comments
  </b:if>
</h3>

Bahasa antarmuka bawaan pada Blogger bisa ditentukan melalui panel kontrol seperti ini:

Pengaturan bahasa antarmuka.
Pengaturan bahasa antarmuka melalui panel kontrol.

Tapi, para pengunjung blog kalian sebenarnya juga bisa menentukan bahasa antarmuka blog melalui kueri hl pada URL seperti ini:

/2020/29/lorem-ipsum.html?hl=fr

Sintaks XML 

Sekitar tahun 2017 yang lalu, Blogger memperkenalkan parameterisasi pada fitur multi-bahasa. Yaitu dengan memanfaatkan tag <b:message> untuk menampung frase, dan <b:param> untuk menentukan nilai parameter pada frase tersebut bila ada. Semua frase bahasa juga sudah dikelompokkan ke dalam objek messages sehingga tidak membuat polusi pada lingkungan global.

<b:message name='messages.numberOfComments'>
  <b:param expr:value='data:post.numberOfComments' name='numComments'/>
</b:message>

Pada contoh di atas, variabel data:post.numberOfComments menyatakan jumlah komentar sebagai angka. Kalian juga bisa menggunakan nilai baku jika memang harus, misalnya untuk melakukan pengetesan.

<h3>
  <b:message name='messages.numberOfComments'>
    <b:param name='numComments' value='30'/>
  </b:message>
</h3>

Jika disimulasikan sebagai bahasa pemrograman JavaScript, maka kode di atas dapat dinyatakan sebagai berikut:

const numberOfComments = numComments => {
    if (0 === numComments) {
        return `No comments`;
    }
    if (1 === numComments) {
        return `1 comment`;
    }
    return `${numComments} comments`;
}

console.log(`<h3>${numberOfComments(30)}</h3>`);

Jika tidak terdapat parameter pada frase tersebut, maka frase dapat dipanggil menggunakan elemen <data:*> seperti biasa:

<data:messages.postAComment/>

Variabel data:messages.numberOfComments berfungsi untuk menampilkan frase. Data pada frase ini tidak pernah didokumentasikan, sehingga kita tidak tahu ada parameter apa saja di dalam data tersebut, dan teks seperti apa yang akan dikembalikan dari waktu ke waktu. Menampilkan frase yang mengandung parameter seperti data:messages.numberOfComments secara langsung akan mengembalikan data berupa teks seperti ini:

{numComments, plural, =0 {No comments} =1 {1 comment} other {# comments}}

Pihak Blogger bisa saja mengubah dan bahkan menghapus nilainya di masa depan jika mereka mau. Hal ini Saya sadari ketika beberapa hari yang lalu Saya coba untuk menampilkan nilai variabel data:commentLabel dan data:commentLabelPlural di dalam tema. Pada tema Blogger V3, data-data tersebut sudah tidak ada lagi, sehingga tidak akan mengembalikan pesan apa-apa di dalam tema.

Dalam banyak kasus, ketika kita ingin membuat tema dengan fitur yang kompleks, kita pasti perlu menentukan frase-frase khusus untuk ditambahkan ke dalam tema. Frase-frase ini, karena bukan merupakan bagian dari data standar Blogger, maka harus dinyatakan secara manual atau langsung sebagai teks biasa. Sehingga tidak jarang kita akan menemui beberapa frase di dalam tema kustom yang nilainya tidak berubah meskipun bahasa antarmuka blog sudah diubah ke bahasa lokal.

Untuk mengatasi masalah tersebut, kita bisa memanfaatkan nilai data:blog.locale untuk mengatur nilai frase yang kita buat:

<h3>
  <data:post.numberOfComments/>
  <b:switch var='data:blog.locale.language'>
    <b:case value='en'/>
      <b:eval expr='data:post.numberOfComments == 1 ? "Comment" : "Comments"'/>
    <b:case value='fr'/>
      <b:eval expr='data:post.numberOfComments == 1 ? "Commentaire" : "Commentaires"'/>
    <b:case value='id'/>
    <b:case value='in'/>
      Komentar
    <b:default/>
      <!-- Comments -->
  </b:switch>
</h3>

Pengaturan Bahasa 

Untuk membuat data frase buatan menjadi lebih mudah dikontrol, Saya lebih menyarankan kalian untuk menyimpan data-data frase tersebut sebagai objek global yang dikategorisasikan berdasarkan kode ISO 639 seperti ini:

<!DOCTYPE html>
<html>
  <b:with value='{
      en: {
          comment: "Comment",
          comments: "Comments",
          delete: "Delete",
          reply: "Reply"
      },
      fr: { … },
      id: { … },
      pt: { … },
      vi: { … },
      …
  }' var='i18n'>

    <head> … </head>
    <body> … </body>

  </b:with>
</html>

Sebagai catatan, kode standar negara Indonesia sejak tahun 2002 sudah direvisi menjadi id pada ISO 639-1:2002, tapi sepertinya Blogger masih menggunakan versi kode negara yang lama yaitu in.

Sebagai catatan juga, Blogger sampai saat ini tidak mendukung fitur interpolasi variabel, sehingga kita tidak bisa melakukan sesuatu semacam ini untuk memanggil properti secara dinamis:

<data:i18n.<data:blog.locale.language/>.comment/>

Satu-satunya cara yang bisa kita lakukan untuk mendapatkan efek serupa saat ini adalah dengan menggunakan metode seperti ini:

<b:switch var='data:blog.locale.language'>
  <b:case value='fr'/>
    <data:i18n.fr.comment/>
  <b:case value='id'/>
  <b:case value='in'/>
    <data:i18n.id.comment/>
  <b:case value='pt'/>
    <data:i18n.pt.comment/>
  <b:case value='vi'/>
    <data:i18n.vi.comment/>
  <b:default/>
    <data:i18n.en.comment/>
</b:switch>

Eksperimen 

Saya belum pernah mencobanya pada data berukuran besar, tapi menggunakan metode ini ternyata berhasil. Di sini Saya juga telah menambahkan objek dengan nilai properti id berupa id sesuai dengan standar ISO 639-1:2002 untuk berjaga-jaga jika suatu saat nanti Blogger memutuskan untuk memperbarui daftar kode negara mereka. Data-data frase di dalam objek tersebut harus sama dengan data-data frase di dalam objek dengan properti id dengan nilai in:

<b:with value='[
    {
        id: "en",
        i18n: {
            comment: "Comment",
            comments: "Comments"
        }
    }, {
        id: "fr",
        i18n: { … }
    }, {
        id: "id",
        i18n: { … }
    }, {
        id: "in",
        i18n: { … }
    }, {
        id: "pt",
        i18n: { … }
    }, {
        id: "vi",
        i18n: { … }
    }
]' var='i18n'>

  …

</b:with>

Kita ambil data pertama yang lolos dari pengetesan persamaan nilai properti id dengan nilai data:blog.locale.language saat ini, kemudian tampung hasilnya pada variabel i:

<b:with value='[ … ]' var='i18n'>
  <b:with value='data:i18n first (v => v.id == data:blog.locale.language)' var='i'>

    …

  </b:with>
</b:with>

Kemudian kita referensikan variabel i.i18n kembali kepada variabel i18n:

<b:with value='[ … ]' var='i18n'>
  <b:with value='data:i18n first (v => v.id == data:blog.locale.language)' var='i'>
    <b:with value='data:i.i18n' var='i18n'>

      …

    </b:with>
  </b:with>
</b:with>

Sehingga kita bisa memanggil nilai properti comment secara dinamis berdasarkan bahasa saat ini melalui variabel i18n seperti ini:

<b:with value='[ … ]' var='i18n'>
  <b:with value='data:i18n first (v => v.id == data:blog.locale.language)' var='i'>
    <b:with value='data:i.i18n' var='i18n'>

      1 <data:i18n.comment/>

    </b:with>
  </b:with>
</b:with>

Sejak Saya menulis artikel ini, data objek yang dituliskan secara manual seperti pada contoh-contoh di atas akan dihilangkan semua karakter ganti barisnya oleh Blogger, sehingga akan tampak berantakan setelah kode tema disimpan. Cara terbaik untuk menjaga agar kode tema tetap rapi adalah dengan meniadakan semua karakter ganti baris dan indentasi yang ada:

<b:with value='[{id:"en",i18n:{comment:"Comment",comments:"Comments"}},{id:"fr",i18n:{…}},{id:"id",i18n:{…}},{id:"in",i18n:{…}},{id:"pt",i18n:{…}},{id:"vi",i18n:{…}}]' var='i18n'>
  <b:with value='data:i18n first (v => v.id == data:blog.locale.language)' var='i'>
    <b:with value='data:i.i18n' var='i18n'>

      …

    </b:with>
  </b:with>
</b:with>

2 Komentar

  • Nashrullah Ali Fauzi

    Sayangnya, nilai dari <data:post.body/> tidak lantas berubah menjadi bahasa selain bahasa yang kita input, misalnya bahasa Inggris, ya, Mas?

    • Taufik Nurrohman

      Kalau masalah itu sudah umum mas. Bukan cuma di Blogger saja.






Semua kode HTML akan dihapus kecuali kode-kode HTML yang dituliskan sebagai contoh. Gunakan sintaks Markdown untuk memberi gaya pada komentar.


Batal