De ultieme internationaliseringsoplossing van Nuxt: I18n+Nuxt Content
Nu Vue en Nuxt, die op grote schaal in China worden gebruikt, steeds meer naar het buitenland gaan, worden ze vaak geconfronteerd met internationaliseringsproblemen.
Als het WordPress is, is het eenvoudig. Installeer een plug-in, configureer de vertaalinterface van Google en het systeem vertaalt elke dag automatisch nieuwe inhoud in verschillende taalversies.
Maar voor andere systemen is het niet zo handig.
De code is open source: https://github.com/aigc-projects/nuxt-i18n-starter
1. Fundamentele internationalisering-I18n
nuxt-i18n
1. Wat is I18n?
I18n is een must voor de internationalisering van Nuxt. Het biedt voornamelijk een complete set internationaliseringsoplossingen, inclusief internationaliseringsroutering en methoden voor het veranderen van talen op basis van internationaliseringsroutering.
2. Installeer I18n
Al het volgende is prima.
garen toevoegen @nuxtjs/i18n # garen npm i @nuxtjs/i18n # npm pnpm i @nuxtjs/i18n pnpm toevoegen @nuxtjs/i18n@next --save-dev3. Configureer nuxt.config.ts
modules: [ '@nuxtjs/i18n', ], i18n: { locales: [ { naam: "Engels", code: "en", iso: "en-US", dir: "ltr" }, { naam: " español",code: "es", iso: "es-LA", map: "ltr" }, { naam: "En français",code: "fr", iso: "fr-FR", map: "ltr " }, { name: "العربية", code: "ar", iso: "ar-EG", dir: "rtl" },], defaultLocale: "en", detectBrowserLanguage: false, // 👇 Verwijs naar de Vue I18n configuratiebestand vueI18n: "./i18n.config.js", }, 4. Configureer i18n.config.ts
Maak een nieuwe i18n.config.ts of i18n.config.js
Dit bestand wordt gebruikt om vertaalvelden te configureren.
export standaard definitionI18nConfig(() => ({ legacy: false, // 👇 Vertalingen berichten toevoegen: { "en": { nav_about: "Over", }, "es": { nav_about: "sobre", }, "ar ": { nav_about: "نبذة عنا", }, "fr": { nav_about: "Over", }, }, }))
5. Koppel componenten
code
gebruik
{{ $t('nav_home') }}
6. Component voor taalwisseling
code
<!-- 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">
{{ loc.naam }}
</option>
</select>
</div>
</template>
gebruik
Gebruik tags op een pagina of lay-out:
7. Haal de huidige taal op
context.app.i18n.locale // waar u toegang heeft tot NuxtContext this.$i18n.locale //in component $i18n.locale // in sjabloon2. Internationalisering van documentinhoud
Door alleen I18n te gebruiken, kan de internationalisering van de hele site volledig worden bereikt. Maar als de website veel artikelen bevat, moet er een groot aantal configuratie-items in i18n.config.ts worden geschreven, wat behoorlijk lastig is.
Als de artikelinhoud uit de back-enddatabase komt, hoeft u hier uiteraard geen rekening mee te houden. U hoeft alleen de vertaalde inhoud in de database op te slaan en de artikelversie in de overeenkomstige taal voor verschillende taalpagina's op te halen.
Wat hier wordt gezegd, is dat de artikelinhoud niet in de back-end database staat, maar aan de front-end.
Voor nuxt is de beste manier om nuxt-inhoud te gebruiken. Simpel gezegd worden alle artikelen opgeslagen in markdown-bestanden, en wanneer een bepaalde route wordt geopend, worden de pagina en het markdown-bestand geladen die bij deze route horen.
Omdat dezelfde pagina, zoals de homepage, verschillende routes in verschillende talen gebruikt.
De standaardinstelling is bijvoorbeeld Engels. De startpagina is www.xxx.com en de Spaanse versie is www.xxx.com/es.
Dus www.xxx.com zal index.vue aanroepen in de paginamap en index.md laden in de inhoudsmap. www.xxx.com/es zal echter index.vue aanroepen in de paginamap en het es.md-document laden in de inhoudsmap.
Daarom hoeft u voor verschillende taalversies van hetzelfde artikel alleen de overeenkomstige versie van het vertaalbestand te maken volgens de route in de inhoudsmap.
1. Installeer nux-inhoud
pnpm voeg @nuxt/content toe
2. nuxt.config.ts-configuratie
modules: ['@nuxt/content'], inhoud: { // ... opties }3. Roep het bijbehorende vertaaldocument op de pagina op
De startpagina is standaard Engels en Spaanse routes en pagina's zijn geconfigureerd.
De uiteindelijke route is als volgt:
Standaard startpagina (Engels): www.xxx.com
Spaanse startpagina: www.xxx.com/es
Ontwerp eerst de map met inhoudsbestanden
//inhoud mapontwerp |. index.vue inhoud
Voeg vervolgens tags toe aan het gedeelte van de startpagina waar het artikel moet worden genoemd
<ContentDoc />3. Beste praktijken voor internationale routering
en-US, en betekent Engels, US betekent land: Verenigde Staten. Dit is een standaardtaalcode. De route kan direct als volgt worden geschreven: www.xxx.com/en-US
Meestal hoeven we het echter niet op landniveau uit te splitsen; alleen het taalniveau is voldoende. Daarom is het het meest geschikt om het als volgt te schrijven: www.xxx.com/en
Dit kan natuurlijk niet het geval zijn voor Chinees, inclusief: zh-CN (Vereenvoudigd Chinees), zh-HK (Traditioneel Hong Kong), zh-TW (Traditioneel Taiwan).
Voor Chinezen is dit dus de enige manier: www.xxx.com/zh-cn
4. Bijlage: Internationale standaardtaalcodes
| taalcode | taal land |
|---|---|
| af | Afrikaans |
| af-ZA | Afrikaans |
| ar | Arabisch |
| ar-AE | Arabisch (VAE) |
| ar-BH | Arabisch (Bahrein) |
| ar-DZ | Arabisch (Algerije) |
| ar-EG | Arabisch (Egypte) |
| ar-IQ | Arabisch (Irak) |
| ar-JO | Arabisch (Jordanië) |
| ar-KW | Arabisch (Koeweit) |
| ar-LB | Arabisch (Libanon) |
| ar-LY | Arabisch (Libië) |
| ar-MA | Arabisch (Marokko) |
| ar-OM | Arabisch (Oman) |
| ar-QA | Arabisch (Qatar) |
| ar-SA | Arabisch (Saoedi-Arabië) |
| ar-SY | Arabisch (Syrië) |
| ar-TN | Arabisch (Tunesië) |
| ar-GIJ | Arabisch (Jemen) |
| az | Azerbeidzjaans |
| az-AZ | Azerbeidzjaans (Latijn) |
| az-AZ | Azerbeidzjaans (Cyrillisch) |
| zijn | Belg |
| wees-BY | Belg |
| bg | Bulgaars |
| bg-BG | Bulgaars |
| bs-BA | Bosnisch (Latijn, Bosnië en Herzegovina) |
| ca | Catalaans |
| ca-ES | Catalaans |
| cs | Tsjechisch |
| cs-CZ | Tsjechisch |
| cy | Welsh |
| cy-GB | Welsh |
| da | Deens |
| da-DK | Deens |
| de | Duits |
| de-AT | Duits (Oostenrijk) |
| de-CH | Duits (Zwitserland) |
| de-DE | Duits duitsland) |
| deli | Duits (Liechtenstein) |
| de-LU | Duits (Luxemburg) |
| dv | Tiwiese |
| dv-MV | Tiwiese |
| el | Grieks |
| el-GR | Grieks |
| nl | Engels |
| nl-AU | Engels (Australië) |
| nl-BZ | Engels (Belize) |
| nl-CA | Engels (Canada) |
| nl-CB | Engels (Caribisch) |
| nl-NL | Engels (VK) |
| nl-IE | Engels (Ierland) |
| nl-JM | Engels (Jamaicaans) |
| nl-NZ | Engels (Nieuw-Zeeland) |
| nl-PH | Engels (Filippijnen) |
| nl-TT | Engels (Trinidad) |
| nl-VS | Engels Verenigde Staten) |
| nl-ZA | Engels (Zuid-Afrika) |
| nl-ZW | Engels (Zimbabwe) |
| ee | Esperanto |
| es | Spaans |
| es-AR | Spaans (Argentinië) |
| es-BO | Spaans (Bolivia) |
| es-CL | Spaans (Chili) |
| es-CO | Spaans (Colombia) |
| es-CR | Spaans (Costa Rica) |
| es-DO | Spaans (Dominicaanse Republiek) |
| es-EC | Spaans (Ecuador) |
| es-ES | Spaans (traditioneel) |
| es-ES | Spaans (internationaal) |
| es-GT | Spaans (Guatemala) |
| es-HN | Spaans (Honduras) |
| es-MX | Spaans (Mexico) |
| es-NI | Spaans (Nicaragua) |
| es-PA | Spaans (Panama) |
| es-PE | Spaans (Peru) |
| es-PR | Spaans (Puerto Rico (VS)) |
| es-PY | Spaans (Paraguay) |
| es-SV | Spaans (El Salvador) |
| es-UY | Spaans (Uruguay) |
| es-VE | Spaans (Venezuela) |
| enz | Ests |
| et-EE | Ests |
| EU | baskisch |
| eu-ES | baskisch |
| fa | Frans |
| Spar | Frans |
| fi | Fins |
| fi-FI | Fins |
| voor | Faeröer |
| fo-FO | Faeröer |
| fr | Frans |
| fr-BE | Frans (België) |
| fr-CA | Frans (Canada) |
| fr-CH | Frans (Zwitserland) |
| fr-FR | Frans Frankrijk) |
| fr-LU | Frans (Luxemburg) |
| fr-MC | Frans (Monaco) |
| gl | Galicisch |
| gl-ES | Galicisch |
| gu | gujarati |
| gu-IN | gujarati |
| Hij | Hebreeuws |
| hij-IL | Hebreeuws |
| Hoi | Hindi |
| hallo-IN | Hindi |
| uur | Kroatisch |
| uur-BA | Kroatisch (Bosnië en Herzegovina) |
| uur-HR | Kroatisch |
| he | Hongaars |
| hu-HU | Hongaars |
| hoi | Armeens |
| hy-AM | Armeens |
| ID kaart | Indonesisch |
| ik deed | Indonesisch |
| is | IJslands |
| is-IS | IJslands |
| Het | Italiaans |
| jeuk | Italiaans (Zwitserland) |
| het-IT | Italiaans (Italië) |
| ja | Japans |
| ja-JP | Japans |
| ka | Georgisch |
| ka-GE | Georgisch |
| kk | Kazachs |
| kk-KZ | Kazachs |
| kn | kanara |
| kn-IN | kanara |
| ko | Koreaanse taal |
| ko-KR | Koreaanse taal |
| kok | Konkani |
| kok-IN | Konkani |
| ky | Kirgizisch |
| ky-KG | Kirgizisch (Cyrillisch) |
| Het | Litouws |
| lt-LT | Litouws |
| lv | Lets |
| lv-LV | Lets |
| mi | Maori |
| mi-NZ | Maori |
| mk | Macedonisch |
| mk-MK | Macedonisch (FYROM) |
| mn | Mongools |
| mn-MN | Mongools (Cyrillisch) |
| Dhr | marathi |
| meneer-IN | marathi |
| Mevr | Maleis |
| ms-BN | Maleis (Brunei Darussalam) |
| mevrouw-MIJN | Maleis (Maleisië) |
| mt | Maltees |
| MT-MT | Maltees |
| nb | Noors (Berkemeier) |
| nb-NEE | Noors (Berkemeier) (Noorwegen) |
| nl | Nederlands |
| nl-BE | Nederlands(België) |
| nl-NL | Nederlands (Nederland) |
| n-NEE | Noors (Nynosk) (Noorwegen) |
| NS | Noord-Sotho |
| n-ZA | Noord-Sotho |
| vader | Punjabi |
| pijn | Punjabi |
| pl | Pools |
| pl-PL | Pools |
| pt | Portugees |
| pt-BR | Portugees (Brazilië) |
| pt-PT | Portugees (Portugal) |
| qu | Quechua |
| qu-BO | Quechua (Bolivia) |
| qu-EC | Quechua (Ecuador) |
| qu-PE | Quechua (Peru) |
| ro | Roemeense |
| ro-RO | Roemeense |
| Ru | Russisch |
| ru-RU | Russisch |
| za | Sanskriet |
| sa-IN | Sanskriet |
| z | Noord-Samos |
| se-FI | Noord-Samoaans (Finland) |
| se-FI | Scott Samos (Finland) |
| se-FI | Inari Samos (Finland) |
| se-NEE | Noord-Samoaans (Noorwegen) |
| se-NEE | Luleå Samos (Noorwegen) |
| se-NEE | Zuid-Samos (Noorwegen) |
| se-SE | Noord-Samoaans (Zweden) |
| se-SE | Luleå Samos (Zweden) |
| se-SE | Zuid-Samos (Zweden) |
| sk | Slowaaks |
| sk-SK | Slowaaks |
| sl | Sloveens |
| sl-SI | Sloveens |
| vierkante meter | Albanees |
| sq-AL | Albanees |
| sr-BA | Servisch (Latijn, Bosnië en Herzegovina) |
| sr-BA | Servisch (Cyrillisch, Bosnië en Herzegovina) |
| sr-SP | Servië (Latijn) |
| sr-SP | Servië (Cyrillisch) |
| sv | Zweeds |
| sv-FI | Zweeds (Finland) |
| sv-SE | Zweeds |
| zw | Swahili |
| sw-KE | Swahili |
| syr | Syrisch |
| syr-SY | Syrisch |
| ta | Tamil |
| ta-IN | Tamil |
| Te | telugu |
| te-IN | telugu |
| e | Thais |
| th-TH | Thais |
| tl | Tagalog |
| tl-PH | Tagalog (Filippijnen) |
| tn | Tswana |
| tn-ZA | Tswana |
| tr | Turks |
| tr-TR | Turks |
| ts | Dzonga |
| tt | Tataars |
| tt-RU | Tataars |
| VK | Oekraïens |
| VK-UA | Oekraïens |
| jij | Urdu |
| uw-PK | Urdu |
| uz | Oezbeeks |
| uz-UZ | Oezbeeks (Latijn) |
| uz-UZ | Oezbeeks (Cyrillisch) |
| vi | Vietnamees |
| vi-VN | Vietnamees |
| xh | bantu-taal |
| xh-ZA | bantu-taal |
| z | Chinese |
| zh-CN | Versimpeld Chinees) |
| zh-HK | Chinees (Hongkong) |
| zh-MO | Chinees (Macau) |
| zh-SG | Chinees (Singapore) |
| zh-TW | traditioneel Chinees) |
| zo | Zoeloe |
| zu-ZA | Zoeloe |
Koppeling
https://github.com/aigc-projects/nuxt-i18n-starter
