Bir web sitesinin birkaç dile çevrilmesi nasıl sağlanır?

Web siteleri, dünyanın iletişimi çok daha yakın hale geldikçe günden güne gelişiyor. Her zaman geliştirmelerimize sadece yerel pazarda kullanılmak için değil, aynı zamanda küresel pazarlara açılmak için de ihtiyaç duyuyoruz. Bunu gerçekleştirmenin ilk yollarından biri sitemizin (veya uygulamalarımızın) birden çok dili desteklemesidir. Bugün öğreneceksin web sitenize veya uygulamanıza çoklu dil nasıl uygulanır.

Web çevirmenimiz nasıl çalışacak?

1. Sitemizde, sitemizi yapılandırdığımız farklı dillere değiştirme imkanı verecek bir düğmemiz olacak.

2. Çeviri, daha önce web sitemizin etiketleri ile yapılandıracağımız metin dosyalarına kaydedilen ajax aracılığıyla çevrilen metinlerin javascript ayıklanması ile yapılacaktır.

3. Bizi hangi ülkeden ziyaret ettiklerini söyleyen ve böylece ziyaretçi için ideal dili görselleştiren harici bir hizmetimiz olacak. Bunu ziyaretçinin IP'sine göre halledeceğiz.

Çevirmenimizin Avantajları

1. Çeviriyi uygulamak için siteyi yenilemek gerekli değildir, çünkü birçok site bu şekilde işliyor.

2. Önümüzün sadece bir versiyonu var, farklı dillerdeki metinleri işlemek için iki veya daha fazla html'ye gerek yok.

3. Daha sonra başka diller eklemek istersek çok kolay bir şekilde yapılandırabiliriz.

4. Halihazırda yaptığımız ve çoklu dil yerleştirmek istediğimiz siteler için başvurması çok kolay.

NotBu öğreticiyi net bir şekilde anlamak için önceden HTML, CSS, Javascript (özellikle jQuery), Ajax bilgisi ve biraz PHP bilgisine sahip olmanız önerilir.

1. Geliştirmeye başlama

 Çok dilli sitem İngilizce Yükleniyor…
Selam Dünya

 .loading-lang {opaklık: 0; } .loading-lang.show {opaklık: 1; } 

Şimdilik main.js dosyası boş bırakıldı. Tercih ettiğimiz yerel web sunucusundan test edebiliriz. Daha sonra ajax istekleri yapmaya başlayacağımız için bir web sunucusu kullanmak gerekiyor.

2. Çeviri dosyaları oluşturma

Dosya içeriği
es.txttitulo-web => Çok dilli sitem
hoş geldiniz => siteme hoş geldiniz
merhaba => merhaba dünya
tr.txttitulo-web => Çoklu dil sitem
hoş geldiniz => siteme hoş geldiniz
merhaba => Merhaba Dünya

Bu dosyaların nasıl yapılandırıldığını biraz açıklayacağım. Web sitemizde kullandığımız her ifade benzersiz bir kimlikle tanımlanmalıdır; bu, her bir ifadeyi özel olarak yerleştirilmesi gereken yere çevirmenin yolu olacaktır. Örneğin, sitenin başlığı için başlık-web kimliğini, ardından => karakterlerini ve ardından karşılık gelen ifadeyi kullanırız. Her cümle farklı bir satırda olmalıdır.

Özetle aşağıdaki kurallara uymalıyız

1. Benzersiz kimlik.

2. Her zaman kimlikten sonra karakterleri kullanın =>

3. Yüze çevrilmiş ifadeyi farklı bir satırla ayırın. (Yeni satır veya \ n ile ayrılmış).

4. Dosyaların txt formatında olduğunu.

3. Ajax Oluşturma

 $ (belge) .ready (işlev () {var seçici = '#translate'; $ (seçici) .on ('tıklama', işlev (e) {e.preventDefault (); startLang ($ (bu));} ); var startLang = function (el) {var el = $ (el); var text = el.attr ('veri-metni'); var file = el.attr ('veri dosyası'); dosya = dosya. split (','); metin = text.split (','); var index = el.attr ('data-index'); if (index> = file.length) {index = 0;} changeName (el , metin [index]); changeIndex (el, dizin); loadLang (dosya [index]); $ ('html'). attr ('lang', dosya [index]);}; var changeName = function (el, name) {$ (el) .html (name);}; var changeIndex = function (el, dizin) {$ (el) .attr ('data-index', ++ dizin);}; var loadLang = function ( lang) {var processLang = fonksiyon (veri) {var dizi = data.split ('\ n'); for (var i in dizi) {if (lineValid (dizi [i])) {var nesne = dizi [i] .split ('=>'); assignText (obj [0], obj [1]);}}}; var assignText = function (anahtar, değer) {$ ('[data-lang = "' + key + ') " ] ').her (fonksiyon () {var attr = $ (bu) .attr (' data-destine '); if (typeof attr! ==' tanımsız ') {$ (bu) .attr (attr, değer); } başka {$ (bu) .html (değer); }}); }; var lineValid = function (line) {return (line.trim (). uzunluk> 0); }; $ ('.loading-lang').addClass('göster'); $ .ajax ({url: 'lang /' + lang + '.txt', error: function () {alert ('Çeviri yüklenmedi');}, başarı: function (veri) {$ ('.loading-lang ') .removeClass (' göster '); processLang (veri);}}); }; }); 

Ayrıca html'mizi de değiştirmemiz gerekiyor:

 Çok dilli sitem İngilizce Yükleniyor… 
Selam Dünya

Bununla sitemizin zaten tercüme edildiğini test edebiliriz.

Javascript dosyamızda neler yaptığımızı ve html'mizde neler güncellediklerimizi biraz açıklayalım.

Javascript dosyasında gerçekleştirilen işlem çeviri butonu olarak çalışan tag vasıtası ile yapılmaktadır, burada kullanacağımız dilin dosyasını ayıklayarak bir ajax isteği yapmakla görevli olması için bir olay yerleştiriyoruz. an.

Çeviri düğmemizde adı verilen üç özelliğimiz var. veri dosyası, veri dizini, veri metni.

Düğme özellikleri
data-file = ", içindeSitemizde sahip olduğumuz farklı dillerin bulunmasından sorumludur. Eğitimimiz için ve devam ediyor. İyi hatırlıyorsanız, çeviri dosyalarımızın adı es.txt ve en.txt.
veri dizini = "1Sahip olunacak bir sonraki dosyanın konumuna sahiptir. 0 varlık ve 1 içeride, bu, getirilecek olanın içeri girdiği anlamına gelir. Bu organizasyonu veri dosyası özniteliğimizde görebiliriz, sadece veri dosyasının bir vektöre benzer olduğunu hayal edin.
data-text = "İngilizce, İspanyolcaUygulamamızın şu anda hangi dilde gösterildiğini görselleştirmekten sorumludur.

HTML kodumuzda yaptığımız değişiklik, çevireceğimiz etiketlere benzersiz ID ile data-lang niteliğini eklemekti. Bu benzersiz kimliğin en.txt ve es.txt dosyalarında yapılandırıldığını zaten biliyor olmalısınız.

Örneğin

Selam Dünya

Çevirmenimizi test edelim ve geliştirdiğimiz şeyin gerçekten ihtiyacımız olan her şeyi kapsayıp kapsamadığını ve yeni bir dil eklemenin ne kadar karmaşık olduğunu görelim.

Yeni bir dil ekleyelim. Gelişimimizin bu aşamasında, sadece iki şey yapmamız gerektiğini anlamalıyız:

1. Yeni dil dosyamızı oluşturun.

2. Veri dosyası ve veri metni özniteliklerine yeni dili ekleyin.

Sitemiz için Fransızca dilini oluşturuyoruz. lang dizini içerisinde fr.txt isimli dil dosyamızı oluşturuyoruz.

Fr.txt içeriğititulo-web => Mon site çok dilli
hoş geldiniz => Bienvenue sur mon sitesi
merhaba => salut monde

Dil butonumuzu güncelliyoruz, bu nedenle index.html'de etiket:

 ingilizce 

Mükemmel! böylece ihtiyacımız olan tüm dilleri daha fazla karmaşıklık olmadan web sitelerimize ekleyebiliriz. İkinci bir test yapalım. Merak edilen bir şey var, çevrilmiş bir cümle farklı yerlerde basılsa bile aynı çeviriyi tekrarlamak zorunda kalmamak için bir etikette tekrar kullanılabilir ve başka bir etikete yerleştirilebilir mi? Cevap EVET, örnek yapalım.

Şu anda etiketimizde kullandığımız Unique ID başlık-web ile web başlığını kullanalım ve sitemizin alt bilgisine yerleştireceğiz. Aşağıdaki gibidir:

 Çok dilli sitem © 

 $ .ajax ({url: 'ülke.php', başarı: işlev (veri) {$ (seçici) .attr ('veri dizini', veri); startLang ($ (seçici));}});