Cara mudah untuk menambahkan banyak bahasa ke situs Anda

Pendahuluan

Sebagai bagian dari proyek saya, saya dihadapkan dengan tugas membuat situs web perusahaan saat ini multibahasa. Lebih tepatnya: untuk membuat kemampuan menerjemahkan situs dengan cepat dan mudah ke dalam bahasa Inggris, Polandia, Italia, dll.

Pencarian di Internet menunjukkan bahwa opsi yang ada untuk membuat situs multibahasa sangat besar dan tidak efisien. Menghubungkan perpustakaan pihak ketiga seringkali bermasalah, dan tips untuk menulis solusi Anda dikaitkan dengan sejumlah besar pekerjaan dari jenis yang sama.

Menulis metode alternatif untuk mengubah lokal hanya membutuhkan waktu beberapa jam, dan mempertahankan persatuan semantik sepenuhnya meminimalkan perubahan saat menambahkan halaman baru.

File sumber untuk situs sampel dengan terjemahan otomatis dapat diunduh di github

Alternatif yang ada

Ketika tugas baru saja muncul dalam pengembangan, langkah pertama, tentu saja, adalah mempelajari solusi yang sudah jadi dan tips di forum tentang cara paling mudah dan benar menerapkan kemungkinan mengubah lokal. Sumber daya Internet paling populer untuk membuat situs multibahasa menawarkan solusi berikut:

• Membuat duplikat blok html dengan teks dalam berbagai bahasa, yang hanya satu yang dibiarkan aktif untuk pengguna, dan sisanya disembunyikan (tampilan: tidak ada).
  
  Kerugian yang jelas dari metode ini adalah peningkatan kode yang sangat cepat dan hilangnya pembacaan instan dan dukungan kode. Selain itu, solusi ini rentan terhadap kesalahan dalam teks dan skalabilitas dalam hal meningkatkan jumlah bahasa (selanjutnya disebut sebagai lokal).
  
• Menghubungkan layanan terjemahan mesin pihak ketiga (seperti google translate) dengan banyak bahasa bawaan dan perubahan minimal ke kode sumber halaman.
  
  Ketika tugas pertama kali muncul di daftar tugas, kami menggunakan metode ini sebagai pengalaman yang paling jelas dan nyaman, namun, bekerja dengan penutur asli dari Amerika Serikat dan Israel menunjukkan bahwa terjemahan mesin sering membuat kesalahan ketika mengubah lokal, dan pengguna situs bereaksi sangat tajam terhadap hal tersebut. kesalahan terjemahan. Pada akhirnya, mitra strategis sangat disarankan untuk mengubah metode mengubah lokal, dan metode ini harus ditinggalkan.
  
• Mengubah bahasa menggunakan kemampuan js atau pustaka / kerangka kerja pihak ketiga seperti jQuery, berdasarkan pencarian dan perubahan langsung elemen DOM.
  
  Fitur dari pendekatan ini adalah pencarian sejumlah besar pemilih js, teks di dalamnya harus diganti. Pendekatan ini dapat bekerja dengan baik untuk proyek-proyek kecil, tetapi dengan peningkatan jumlah halaman, jumlah fungsi penggantian teks meningkat secara proporsional, yang menyebabkan hilangnya efisiensi dalam proyek-proyek besar.
  

Solusi alternatif

Dasar dari pendekatan yang saya usulkan, sebagai alternatif dari metode yang ada, anehnya, bukan basis yang ditulis oleh saya kode js, yang umumnya sepele, dan desain pemilih, dukungan yang memungkinkan Anda untuk secara fleksibel dan mudah mengkonfigurasi terjemahan sejumlah halaman ke dalam bahasa apa pun tanpa perubahan basis kode dan duplikasi data yang berlebihan.

Dalam mengubah lokal dengan pendekatan alternatif, tiga pemain utama dibedakan:

• halaman html dengan aturan yang ditetapkan untuk pemilih blok dengan teks
  
• layanan js umum, tugas utamanya adalah mengganti elemen DOM textContet sesuai dengan aturan desain penyeleksi
  
• File JSON lokal yang berisi struktur yang berisi blok html dalam semua bahasa yang digunakan saat mengubah lokal
  

Kepatuhan dengan aturan desain untuk pemilih elemen yang bisa berubah menghilangkan kebutuhan untuk mengubah kode js dari layanan perubahan lokal, yang merupakan nilai tambah besar dalam hal skalabilitas proyek.

Aturan untuk membangun pemilih

Sebagian besar metode untuk mengubah lokal halaman (di antara alternatif 1.3 dan sebagian 2) menyarankan Anda untuk "menandai" blok html yang akan diubah, karena itu benar dengan mengubah bidang kelas. Mekanisme yang sama menggunakan opsi alternatif.

Langkah pertama dalam merancang penyeleksi adalah membagi halaman sumber menjadi blok fungsi tingkat atas. Pada halaman perusahaan kami terdapat blok:
Kami memberi setiap blok nama bersyarat, misalnya,

• Menu

• Kartu nama (rumah)

• Contoh operasi layanan (contoh)

• Mitra (klien)

• Lingkup layanan (userfulBlock)

• Contoh layanan (contoh)

• Kontak dan umpan balik (kontak)

Setelah itu, kami selanjutnya memecah setiap blok menjadi blok fungsional yang lebih kecil, seperti yang dilakukan dengan perpustakaan Bereaksi.


Kami menetapkan nama kami untuk area yang dipilih dan mendapatkan struktur formulir:

• menu

• home utama, deskripsi, tombol

• contoh statistik, informasi utama, deskripsi, tombol

• tombol klien

• headline userfulBlock, userfulCards, elseBlock

• contoh tajuk, kartu

• kontak utama, deskripsi, kontak, formulir

Kami melanjutkan prosedur ini hingga mencapai blok yang berisi teks sumber.

Sebagai hasilnya, kami mendapatkan struktur file JSON lokal yang sudah jadi yang berisi semua teks yang diperlukan untuk mengubah bahasa. Juga, berdasarkan algoritma ini, aturan untuk membangun penyeleksi ditentukan:

Setiap pemilih dimulai dengan kata kunci lokal dan kemudian, sesuai dengan gaya tanda hubung, nama semua blok induk ditambahkan termasuk blok yang berisi teks sumber, misalnya, contoh deskripsi dalam kartu pertama akan memiliki pemilih lokal-contoh-kartu-deskripsi


Contoh dari file json lokal yang dihasilkan dapat dilihat di github

Layanan Ubah Lokal

Layanan perubahan lokal adalah modul yang berisi fungsi memuat file lokal

loadLocale(defLang) 

dengan parameter defLang opsional - bahasa yang ditetapkan setelah memuat lokal (bahasa default), serta fungsi utama mengubah lokal saat ini

 changeLocale(lang) 

menunjukkan bahasa yang diperlukan.

Fungsi Unduhan Lokal

Fungsi beban lokal menggunakan permintaan XMLHttpRequest standar untuk data. Penggunaan standar ini disebabkan oleh keinginan untuk meminimalkan jumlah ketergantungan dan kemudahan penggunaan permintaan. Setelah menerima file lokal, pemberitahuan tentang menerima data ditampilkan di konsol, dan fungsi mengubah lokal ke bahasa default dipanggil jika bahasa ini diteruskan ke fungsi sebagai parameter opsional. Anda dapat membiasakan diri dengan kode fungsi di sini:

 function loadLocale(defLang) { var xhr = new XMLHttpRequest(); xhr.open("GET", 'http://localhost:3000/locale.json', true); xhr.onreadystatechange = saveLocale.bind(this); xhr.onerror = function () { console.log("no found page"); }; xhr.send(); function saveLocale() { if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { locale = JSON.parse(xhr.responseText); console.log("locale loaded"); if(defLang) changeLocale(defLang); } } } 

Fungsi perubahan lokal

Tipe data

Ini adalah fungsi rekursif yang tugas utamanya adalah menelusuri objek yang berisi halaman lokal (menggunakan algoritma DFS). Menggunakan rekursi saat membangun fungsi memungkinkan Anda untuk menyandikan algoritma sesederhana dan seringkas mungkin, namun, terlalu banyak kedalaman rekursi dapat menyebabkan stack overflow. Fitur untuk mengatasi masalah ini dapat ditemukan di forum dengan nama yang sama, atau dengan membaca artikel yang relevan di habr.com.

Fungsi rekursif didasarkan pada pemrosesan 4 tipe data:

• bidang yang berisi string teks sumber yang digunakan untuk menambahkan ke halaman.
  Sebagai contoh:
  
  

   "main": "    " 

  
  
• bidang yang berisi larik baris teks sumber yang digunakan untuk menambahkan
  halaman. Bidang ini diperlukan untuk membuat daftar yang elemennya dapat diubah.
  memesan. Sebagai contoh:
  
  

   "menu":["Home","Example","Clients","Info","Contacts"] 

  
  
• Struktur data bersarang yang berisi kumpulan bidang yang diperlukan untuk membangun
  arsitektur halaman. Sebagai contoh:
  
  

    "home": { "main": "selling quest from your video", "description": "for social networks & sites", "buttons": ["try","order"] } 

  
  
• Array struktur data bersarang, dengan set bidang yang sama digunakan. Seperti itu
  array digunakan ketika daftar blok kode yang identik muncul, misalnya,
  kartu anggota tim, atau portofolio atau tarif untuk layanan yang diberikan.
  Sebagai contoh:
  
  

    "usefulCards": [ { "headline": "Marketers and agencies", "statistics": ["convers 26%", "retent 25%"], "button": "ORDER" }, { "headline": "Production studios and TV platforms", "statistics": ["convers 24%", "retent 33%"], "button": "ORDER" }, { "headline": "Conference creators", "statistics": ["convers 65%", "retent 15%"], "button": "ORDER" }, { "headline": "Bloggers and streamers", "statistics": ["convers 24%", "retent 33%"], "button": "ORDER" } ], 

  
  Di situs, ini mungkin terlihat seperti ini:
  
  
  Contoh situs web

  
  
  
  

Fungsi pemrosesan

Pemrosesan tipe data sumber dilakukan oleh fungsi terpisah

 function getText(key, object, name,startIndex) 

Nama bidang input dari bidang struktur dengan teks sumber, objek lokal saat ini yang berisi teks yang akan ditambahkan, dan nama pemilih saat ini diperlukan untuk mencari elemen DOM.

 function getText(key, object, name, startIndex) { var elementKey=0; if(startIndex) elementKey = startIndex; for ( ; elementKey < document.getElementsByClassName(name + "-" + key).length; elementKey++) if (!isNaN(elementKey)) document.getElementsByClassName(name + "-" + key)[elementKey].textContent = object[key]; } 

Pemrosesan array string dengan teks sumber juga dilakukan oleh fungsi terpisah

 function getArrayText(key, object, name,startIndex) 

Tanda tangan dan tubuh fungsi ini tidak berbeda dari masa lalu, kecuali bahwa elemen dari array ditugaskan ke elemen DOM.

 function getArrayText(key, object, name, startIndex) { var elementKey=0; if(startIndex) elementKey = startIndex; for ( ; elementKey < document.getElementsByClassName(name + "-" + key).length; elementKey++) if (!isNaN(elementKey)) document.getElementsByClassName(name + "-" + key)[elementKey].textContent = object[key][elementKey % object[key].length]; } 

Fungsi rekursif utama untuk mengganti penawaran teks dengan klasifikasi bidang lokal saat ini menjadi salah satu dari 4 jenis di atas dan reaksi yang sesuai dengan jenis yang dihasilkan:

 function changeText(name, object, startIndex) { for (key in object) if (Array.isArray(object[key]) && typeof object[key] != 'string' && typeof object[key][0] == 'string') getArrayText(key, object, name); else if (typeof object[key] == "object" ){ if(isNaN(key)) changeText(name + "-" + key, object[key]); else changeText(name, object[key],key); } else getText(key, object, name, startIndex); } 

Fungsi ini menerima lokal bahasa saat ini dan pemilih root (dalam hal ini, "lokal"). Selanjutnya, setelah mendeteksi struktur bersarang atau susunan struktur, fungsi tersebut akan secara rekursif memanggil dirinya sendiri, mengubah parameter input yang sesuai.

Keuntungan utama dari pendekatan alternatif adalah bahwa layanan yang dijelaskan di atas tidak memerlukan perubahan fungsional, dan ditambahkan sebagai file js menggunakan file lokal yang Anda buat.

Kesimpulan

Inti dari pendekatan yang dijelaskan di atas adalah aturan tetap untuk menggambarkan penyeleksi dan membangun file lokal. Berkat ini, ada peluang unik untuk menerjemahkan halaman apa saja dari kotak dan menggunakan kembali materi yang sudah diterjemahkan.

Algoritma untuk membangun pemilih yang dijelaskan di atas tidak wajib dan penting untuk layanan. Layanan ini fleksibel untuk memperluas dan menambahkan metode dan algoritma baru, serta untuk membangun nama pemilih dan struktur lokal json. Kemungkinan plus adalah menyimpan lokal di cookie browser dan mengubah lokal, tergantung pada lokasi pengguna layanan.

File sumber untuk situs sampel dengan terjemahan otomatis dapat diunduh di github .