Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir yazılım eğitim içeriğidir. Eğitmen, Vue.js'te çoklu dil desteği ve dinamik çeviri kullanımını göstermektedir.
- Video, Vue.js'te çoklu dil desteği sağlayan i18n kütüphanesi kullanarak tablo altındaki "9 kayıttan 1 ile 5 arası gösteriliyor" yazısının dinamik olarak çevrilmesini anlatmaktadır. Eğitmen önce statik çeviri yaparak başlayıp, ardından dinamik çeviri için v-translate kütüphanesinin content interpolation özelliğini kullanarak HTML elementleri ile birlikte çeviri yapma yöntemini göstermektedir. Ayrıca, güvenlik zafiyeti oluşturmadan HTML elementleri ile çeviri yapma teknikleri de paylaşılmaktadır.
- 00:01Çoklu Dil Desteği ve Pagination Sorunu
- Mevcut projede çoklu dil desteği i18n komponent kütüphanesi ile sağlanmaktadır.
- Tablo altında "9 kayıttan 1 ile 5 arası gösteriliyor" yazısı bulunmakta ve bu yazı dinamik olarak kayıt sayısı arttıkça değişmektedir.
- 9.5 değeri normal kayıtlardan farklı olarak koyu renkte gösterilmesi istenmektedir.
- 00:39Vitext Kütüphanesi ile Çeviri Yapma
- Vitext kütüphanesi kullanılarak dil dosyaları oluşturulup, "table" ve "pagination detail" gibi anahtar kelimeler tanımlanmaktadır.
- Türkçe dil dosyasında "8 sayfadan 1 ile 5 arası gösteriliyor" ifadesi, İngilizce dil dosyasında ise "Showing 1 to 5 in a trees" şeklinde çevrilmiştir.
- Çeviri yapmak için "table pagination detail" ifadesi kullanılarak, aktif dil durumuna göre uygun dil dosyasından karşılık alınmaktadır.
- 03:43Dinamik Çeviri Yapma
- Pagination detayının dinamik olması için "table pagination detail" ifadesine bir obje eklenerek toplam sayfa sayısı, başlangıç ve bitiş değerleri gönderilmektedir.
- Çeviri dosyasında süslü parantezler kullanılarak "total", "from" ve "to" değerleri dinamik olarak yerleştirilmektedir.
- Sayfa değiştirildiğinde, "9 sayfadan 1 ile 5 arası gösteriliyor" ifadesi dinamik olarak güncellenmektedir.
- 05:49İçerik İnterpolasyonu ile Özel Stil Uygulama
- Çeviri metninin sadece düz metin olarak değil, farklı kalınlıklarda gösterilmesi istenmektedir.
- HTML kullanarak kalınlık eklemek güvenlik zafiyeti oluşturacağından, alternatif bir çözüm aranmaktadır.
- i18nt komponenti kullanılarak içerik interpolasyonu yapılarak, çeviri metninin üzerine özel stil uygulanabilmektedir.
- 08:44Slot Kullanımı ile Dinamik İçerik Ekleme
- i18nt komponentinin dökümantasyonunda belirtildiği gibi, çeviri metninin içindeki değişkenler için ayrı slotlar oluşturulmalıdır.
- "Total", "from" ve "to" değerleri için slotlar oluşturulup, veri aktarımı yapılmaktadır.
- Slotlar kullanılarak HTML elementleri (örneğin bold) eklenerek çeviri metninin üzerine özel stil uygulanabilmektedir.