Nuxt'un nihai uluslararasılaştırma çözümü: I18n+Nuxt İçeriği
Yurt dışına açılma dalgasıyla birlikte Çin'de yaygın olarak kullanılan Vue ve Nuxt, sıklıkla uluslararasılaşma sorunlarıyla karşı karşıya kalıyor.
Eğer WordPress ise, basittir. Bir eklenti yükleyin, Google'ın çeviri arayüzünü yapılandırın ve ardından sistem her gün yeni içeriği otomatik olarak çeşitli dil sürümlerine çevirecektir.
Ancak diğer sistemler için bu o kadar uygun değil.
Kod açık kaynaktır: https://github.com/aigc-projects/nuxt-i18n-starter
1. Temel uluslararasılaşma-I18n
nuxt-i18n
1. I18n nedir?
I18n, Nuxt'un uluslararasılaşması için bir zorunluluktur. Esas olarak, uluslararasılaştırma yönlendirmesi ve uluslararasılaştırma yönlendirmesine dayalı dil değiştirme yöntemleri de dahil olmak üzere eksiksiz bir uluslararasılaştırma çözümleri seti sağlar.
2. I18n'yi yükleyin
Aşağıdakilerin hepsi iyi.
iplik add @nuxtjs/i18n # iplik npm i @nuxtjs/i18n # npm pnpm i @nuxtjs/i18n pnpm add @nuxtjs/i18n@next --save-dev3. nuxt.config.ts'yi yapılandırın
modüller: [ '@nuxtjs/i18n', ], i18n: { locales: [ { name: "English",code: "en", iso: "en-US", dir: "ltr" }, { name: " español",kod: "es", iso: "es-LA", dir: "ltr" }, { name: "En français",code: "fr", iso: "fr-FR", dir: "ltr " }, { name: "العربية", code: "ar", iso: "ar-EG", dir: "rtl" },], defaultLocale: "en", tespitBrowserLanguage: false, // 👇 Vue I18n'ye referans verin yapılandırma dosyası vueI18n: "./i18n.config.js", }, 4. i18n.config.ts'yi yapılandırın
Yeni i18n.config.ts veya i18n.config.js oluşturun
Bu dosya çeviri alanlarını yapılandırmak için kullanılır.
varsayılanı dışa aktar defineI18nConfig(() => ({ eski: yanlış, // 👇 Çeviri mesajlarını ekle: { "en": { nav_about: "Hakkında", }, "es": { nav_about: "sobre", }, "ar ": { nav_about: "Yeni Bilgiler", }, "fr": { nav_about: "Hakkında", }, }, }))
5. Bileşenleri bağlayın
kod
kullanım
{{ $t('nav_home') }}
6. Dil değiştirme bileşeni
kod
<!-- components/LangSwitcher.vue -->
<script setup lang="ts">
// Used for type casting
// Used for type casting
import type { LocaleObject } from "@nuxtjs/i18n/dist/runtime/composables";
// Get active locale and supported locales
const { locale, locales } = useI18n()
// Cast to avoid TypeScript errors in template
const supportedLocales = locales.value as Array<LocaleObject>
const router = useRouter()
const switchLocalePath = useSwitchLocalePath()
// When the visitor selects a new locale, route to
// to the new locale's path e.g. /en-CA/foo → /ar-EG/foo
function onLocaleChanged(event: Event) {
const target = event.target as HTMLInputElement
// switchLocalePath('ar-EG') will return Arabic equivalent
// for the *current* URL path e.g. if we're at /en-CA/about,
// switchLocalePath('ar-EG') will return '/ar-EG/about'
router.push({ path: switchLocalePath(target.value) })
}
</script>
<template>
<div>
🌐
<select :value="locale" @change="onLocaleChanged">
<option v-for="loc in supportedLocales" :key="loc.code" :value="loc.code">
{{ konum.adı }}
</option>
</select>
</div>
</template>
kullanım
Etiketleri bir sayfada veya düzende kullanma:
7. Mevcut dili edinin
context.app.i18n.locale // NuxtContext'e erişebileceğiniz yer this.$i18n.locale // şablondaki $i18n.locale bileşeninde //2. Belge içeriğinin uluslararasılaştırılması
I18n'yi tek başına kullanmak, tüm sitenin tamamen uluslararası hale getirilmesini sağlayabilir. Ancak web sitesinde çok sayıda makale varsa, i18n.config.ts dosyasına çok sayıda yapılandırma öğesinin yazılması gerekir ve bu oldukça zahmetlidir.
Elbette makale içeriği arka uç veritabanından geliyorsa, bunu dikkate almanıza gerek yoktur. Yalnızca çevrilmiş içeriği veritabanında saklamanız ve farklı dildeki sayfalar için ilgili dilde makale sürümünü almanız gerekir.
Burada söylenen, makale içeriğinin back-end veritabanında değil, front-end'de olduğudur.
Nuxt için en iyi yol nuxt içeriğini kullanmaktır. Basitçe söylemek gerekirse, tüm makaleler işaretleme dosyalarında saklanır ve ardından belirli bir rota açıldığında bu rotaya karşılık gelen sayfa ve işaretleme dosyası yüklenir.
Çünkü aynı sayfa, örneğin ana sayfa, farklı dillerde farklı rotalar kullanıyor.
Örneğin, varsayılan İngilizce'dir. Ana sayfa www.xxx.com'dur ve İspanyolca versiyonu www.xxx.com/es'dir.
Yani www.xxx.com, sayfalar dizininde index.vue'yu çağıracak ve içerik dizinine index.md'yi yükleyecektir. Ancak www.xxx.com/es, sayfalar dizininde index.vue'yu çağıracak ve es.md belgesini içerik dizinine yükleyecektir.
Bu nedenle aynı makalenin farklı dil versiyonları için içerik dizinindeki rotaya göre çeviri dosyasının karşılık gelen versiyonunu oluşturmanız yeterlidir.
1. Nuxt içeriğini yükleyin
pnpm @nuxt/içerik ekle
2. nuxt.config.ts yapılandırması
modüller: [ '@nuxt/content' ], içerik: { // ... seçenekler }3. Sayfadaki ilgili çeviri belgesini çağırın
Ana sayfa varsayılan olarak İngilizce'dir ve İspanyolca rotalar ve sayfalar yapılandırılmıştır.
Son rota şu şekilde:
Varsayılan ana sayfa (İngilizce): www.xxx.com
İspanyolca ana sayfası: www.xxx.com/es
İlk olarak içerik dosyası dizinini tasarlayın
//içerik dizini tasarımı | index.vue içeriği .
Daha sonra ana sayfanın makalenin çağrılması gereken kısmına etiketler ekleyin.
<ContentDoc />3. Uluslararası yönlendirme için en iyi uygulamalar
en-US, en İngilizce, US ise ülke anlamına gelir: Amerika Birleşik Devletleri. Bu standart bir dil kodudur. Rota doğrudan şu şekilde yazılabilir: www.xxx.com/en-US
Ancak çoğu zaman bunu ülke düzeyine ayırmamıza gerek kalmıyor, yalnızca dil düzeyi yeterli oluyor. Bu nedenle şu şekilde yazmak en doğrusu: www.xxx.com/en
Tabii ki, bu durum aşağıdakileri içeren Çince için geçerli olamaz: zh-CN (Basitleştirilmiş Çince), zh-HK (Geleneksel Hong Kong), zh-TW (Geleneksel Tayvan).
Yani Çinliler için tek yol bu: www.xxx.com/zh-cn
4. Ek: Uluslararası Standart Dil Kodları
| dil kodu | dil ülkesi |
|---|---|
| af | Afrikaans |
| af-ZA | Afrikaans |
| ar | Arapça |
| ar-AE | Arapça (BAE) |
| ar-BH | Arapça (Bahreyn) |
| ar-DZ | Arapça (Cezayir) |
| ar-EG | Arapça (Mısır) |
| ar-IQ | Arapça (Irak) |
| ar-JO | Arapça (Ürdün) |
| ar-KW | Arapça (Kuveyt) |
| ar-LB | Arapça (Lübnan) |
| ar-LY | Arapça (Libya) |
| ar-MA | Arapça (Fas) |
| ar-OM | Arapça (Umman) |
| ar-QA | Arapça (Katar) |
| ar-SA | Arapça (Suudi Arabistan) |
| ar-SY | Arapça (Suriye) |
| ar-TN | Arapça (Tunus) |
| ar-YE | Arapça (Yemen) |
| az | Azerice |
| az-AZ | Azerice (Latince) |
| az-AZ | Azerice (Kiril) |
| olmak | Belçikalı |
| be-BY | Belçikalı |
| bg | Bulgarca |
| bg-BG | Bulgarca |
| bs-BA | Boşnakça (Latince, Bosna-Hersek) |
| CA | Katalanca |
| ca-ES | Katalanca |
| CS | Çek |
| cs-CZ | Çek |
| cy | Galce |
| cy-GB | Galce |
| da | Danimarkalı |
| da-DK | Danimarkalı |
| de | Almanca |
| de-AT | Almanca(Avusturya) |
| de-CH | Almanca (İsviçre) |
| de-DE | Almanca(Almanya) |
| Şarküteri | Almanca (Lihtenştayn) |
| de-LU | Almanca (Lüksemburg) |
| dv | Tiwiese |
| dv-MV | Tiwiese |
| el | Yunan |
| el-GR | Yunan |
| tr | İngilizce |
| tr-AU | İngilizce (Avustralya) |
| tr-BZ | İngilizce(Belize) |
| tr-CA | İngilizce (Kanada) |
| tr-CB | İngilizce(Karayipler) |
| tr-TR | İngilizce(İngiltere) |
| tr-IE | İngilizce (İrlanda) |
| tr-JM | İngilizce (Jamaika) |
| tr-NZ | İngilizce (Yeni Zelanda) |
| tr-PH | İngilizce (Filipinler) |
| tr-TT | İngilizce (Trinidad) |
| tr-TR | İngilizce (Amerika Birleşik Devletleri) |
| tr-ZA | İngilizce(Güney Afrika) |
| tr-ZW | İngilizce (Zimbabve) |
| eo | Esperanto |
| es | İspanyol |
| es-AR | İspanyolca (Arjantin) |
| es-BO | İspanyolca (Bolivya) |
| es-CL | İspanyolca (Şili) |
| es-CO | İspanyolca (Kolombiya) |
| es-CR | İspanyolca (Kosta Rika) |
| es-DO | İspanyolca (Dominik Cumhuriyeti) |
| es-EC | İspanyolca (Ekvador) |
| es-ES | İspanyolca (Geleneksel) |
| es-ES | İspanyolca(Uluslararası) |
| es-GT | İspanyolca (Guatemala) |
| es-HN | İspanyolca (Honduras) |
| es-MX | İspanyolca (Meksika) |
| es-NI | İspanyolca(Nikaragua) |
| es-PA | İspanyolca(Panama) |
| es-PE | İspanyolca (Peru) |
| es-PR | İspanyolca(Porto Riko(ABD)) |
| es-PY | İspanyolca (Paraguay) |
| es-SV | İspanyolca (El Salvador) |
| es-UY | İspanyolca (Uruguay) |
| es-VE | İspanyolca (Venezuela) |
| ve | Estonyalı |
| et-EE | Estonyalı |
| AB | Bask |
| AB-ES | Bask |
| fa | Fransızca |
| köknar | Fransızca |
| fi | Fince |
| fi-FI | Fince |
| fo | Faroe dili |
| fo-FO | Faroe dili |
| Fr | Fransızca |
| fr-BE | Fransızca(Belçika) |
| fr-CA | Fransızca (Kanada) |
| fr-CH | Fransızca (İsviçre) |
| fr-FR | Fransızca Fransa) |
| fr-LU | Fransızca (Lüksemburg) |
| fr-MC | Fransızca(Monako) |
| güzel | Galiçyaca |
| gl-ES | Galiçyaca |
| gu | gujarati dili |
| gu-IN | gujarati dili |
| O | İbranice |
| o-IL | İbranice |
| MERHABA | Hintçe |
| Merhaba | Hintçe |
| saat | Hırvat |
| saat-BA | Hırvatça (Bosna Hersek) |
| saat-İK | Hırvat |
| ha | Macarca |
| hu-HU | Macarca |
| selam | Ermeni |
| selam-AM | Ermeni |
| İD | Endonezya dili |
| yaptım | Endonezya dili |
| dır-dir | İzlandaca |
| is-IS | İzlandaca |
| BT | İtalyan |
| kaşıntı | İtalyanca (İsviçre) |
| o-BT | İtalyanca (İtalya) |
| evet | Japonca |
| ja-JP | Japonca |
| ka | Gürcüce |
| ka-GE | Gürcüce |
| kk | Kazak |
| kk-KZ | Kazak |
| biliyorum | kanara |
| kn-IN | kanara |
| evet | Korece |
| ko-KR | Korece |
| kok | Konkani |
| kok-IN | Konkani |
| ky | Kırgız |
| ky-KG | Kırgız (Kiril) |
| lt | Litvanyalı |
| lt-LT | Litvanyalı |
| seviye | Letonca |
| seviye-LV | Letonca |
| mi | Maori dili |
| mi-Yeni Zelanda | Maori dili |
| mk | Makedonca |
| mk-MK | Makedonca (FYROM) |
| milyon | Moğolca |
| mn-MN | Moğolca (Kiril) |
| Bay | marathi dili |
| Bay-IN | marathi dili |
| Hanım | Malayca |
| ms-BN | Malayca (Brunei Sultanlığı) |
| ms-benim | Malayca (Malezya) |
| mt | malta dili |
| mt-MT | malta dili |
| not | Norveççe (Berkemeier) |
| nb-HAYIR | Norveççe (Berkemeier) (Norveç) |
| nl | Flemenkçe |
| nl-BE | Hollandaca (Belçika) |
| nl-NL | Felemenkçe (Hollanda) |
| n-HAYIR | Norveççe (Nynosk) (Norveç) |
| ns | Kuzey Sotho |
| n-ZA | Kuzey Sotho |
| baba | Pencap |
| ağrı | Pencap |
| lütfen | Lehçe |
| pl-PL | Lehçe |
| puan | Portekizce |
| pt-BR | Portekiz Brezilyası) |
| pt-PT | Portekizce (Portekiz) |
| peki | Keçuva |
| qu-BO | Quechua (Bolivya) |
| qu-EC | Quechua (Ekvador) |
| qu-PE | Keçuva (Peru) |
| ro | Romen |
| Ro-RO | Romen |
| ru | Rusça |
| ru-RU | Rusça |
| sa | Sanskritçe |
| sa-IN | Sanskritçe |
| se | Kuzey Samos |
| se-FI | Kuzey Samoa (Finlandiya) |
| se-FI | Scott Samos (Finlandiya) |
| se-FI | Inari Samos (Finlandiya) |
| se-HAYIR | Kuzey Samoa (Norveç) |
| se-HAYIR | Lulea Samos (Norveç) |
| se-HAYIR | Güney Samos (Norveç) |
| se-SE | Kuzey Samian (İsveç) |
| se-SE | Lulea Samos (İsveç) |
| se-SE | Güney Samos (İsveç) |
| Sk | Slovak |
| sk-SK | Slovak |
| sl | Sloven |
| sl-SI | Sloven |
| metrekare | Arnavut |
| kare-AL | Arnavut |
| sr-BA | Sırpça (Latince, Bosna-Hersek) |
| sr-BA | Sırpça (Kiril, Bosna-Hersek) |
| sr-SP | Sırbistan (Latince) |
| sr-SP | Sırbistan (Kiril) |
| sv | İsveççe |
| sv-FI | İsveççe (Finlandiya) |
| sv-SE | İsveççe |
| sw | Svahili |
| sw-KE | Svahili |
| efendim | Süryanice |
| syr-SY | Süryanice |
| ta | tamilce |
| ta-IN | tamilce |
| Te | telugu dili |
| te-IN | telugu dili |
| bu | Tay dili |
| th-TH | Tay dili |
| TL | Tagalogca |
| tl-PH | Tagalogca (Filipinler) |
| tn | Tsvana |
| tn-ZA | Tsvana |
| TR | Türkçe |
| tr-TR | Türkçe |
| ts | Dzonga |
| tt | Tatar |
| tt-RU | Tatar |
| İngiltere | Ukrayna |
| İngiltere-BA | Ukrayna |
| senin | Urduca |
| ur-PK | Urduca |
| uz | Özbekçe |
| uz-UZ | Özbekçe (Latince) |
| uz-UZ | Özbekçe (Kiril) |
| vi | Vietnam |
| vi-VN | Vietnam |
| xh | bantu dili |
| xh-ZA | bantu dili |
| zh | Çince |
| zh-CN | Basitleştirilmiş Çince) |
| zh-HK | Çince (Hong Kong) |
| zh-MO | Çince(Makao) |
| zh-SG | Çince (Singapur) |
| zh-TW | Geleneksel çince) |
| zu | Zuluca |
| zu-ZA | Zuluca |
