Log in

De ultieme internationaliseringsoplossing van Nuxt: I18n+Nuxt Content

Auteur:neo yang Tijd:2023/12/06 Lezen: 7459
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 [...]

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-dev

3. 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 sjabloon

2. 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

taalcodetaal land
afAfrikaans
af-ZAAfrikaans
arArabisch
ar-AEArabisch (VAE)
ar-BHArabisch (Bahrein)
ar-DZArabisch (Algerije)
ar-EGArabisch (Egypte)
ar-IQArabisch (Irak)
ar-JOArabisch (Jordanië)
ar-KWArabisch (Koeweit)
ar-LBArabisch (Libanon)
ar-LYArabisch (Libië)
ar-MAArabisch (Marokko)
ar-OMArabisch (Oman)
ar-QAArabisch (Qatar)
ar-SAArabisch (Saoedi-Arabië)
ar-SYArabisch (Syrië)
ar-TNArabisch (Tunesië)
ar-GIJArabisch (Jemen)
azAzerbeidzjaans
az-AZAzerbeidzjaans (Latijn)
az-AZAzerbeidzjaans (Cyrillisch)
zijnBelg
wees-BYBelg
bgBulgaars
bg-BGBulgaars
bs-BABosnisch (Latijn, Bosnië en Herzegovina)
caCatalaans
ca-ESCatalaans
csTsjechisch
cs-CZTsjechisch
cyWelsh
cy-GBWelsh
daDeens
da-DKDeens
deDuits
de-ATDuits (Oostenrijk)
de-CHDuits (Zwitserland)
de-DEDuits duitsland)
deliDuits (Liechtenstein)
de-LUDuits (Luxemburg)
dvTiwiese
dv-MVTiwiese
elGrieks
el-GRGrieks
nlEngels
nl-AUEngels (Australië)
nl-BZEngels (Belize)
nl-CAEngels (Canada)
nl-CBEngels (Caribisch)
nl-NLEngels (VK)
nl-IEEngels (Ierland)
nl-JMEngels (Jamaicaans)
nl-NZEngels (Nieuw-Zeeland)
nl-PHEngels (Filippijnen)
nl-TTEngels (Trinidad)
nl-VSEngels Verenigde Staten)
nl-ZAEngels (Zuid-Afrika)
nl-ZWEngels (Zimbabwe)
eeEsperanto
esSpaans
es-ARSpaans (Argentinië)
es-BOSpaans (Bolivia)
es-CLSpaans (Chili)
es-COSpaans (Colombia)
es-CRSpaans (Costa Rica)
es-DOSpaans (Dominicaanse Republiek)
es-ECSpaans (Ecuador)
es-ESSpaans (traditioneel)
es-ESSpaans (internationaal)
es-GTSpaans (Guatemala)
es-HNSpaans (Honduras)
es-MXSpaans (Mexico)
es-NISpaans (Nicaragua)
es-PASpaans (Panama)
es-PESpaans (Peru)
es-PRSpaans (Puerto Rico (VS))
es-PYSpaans (Paraguay)
es-SVSpaans (El Salvador)
es-UYSpaans (Uruguay)
es-VESpaans (Venezuela)
enzEsts
et-EEEsts
EUbaskisch
eu-ESbaskisch
faFrans
SparFrans
fiFins
fi-FIFins
voorFaeröer
fo-FOFaeröer
frFrans
fr-BEFrans (België)
fr-CAFrans (Canada)
fr-CHFrans (Zwitserland)
fr-FRFrans Frankrijk)
fr-LUFrans (Luxemburg)
fr-MCFrans (Monaco)
glGalicisch
gl-ESGalicisch
gugujarati
gu-INgujarati
HijHebreeuws
hij-ILHebreeuws
HoiHindi
hallo-INHindi
uurKroatisch
uur-BAKroatisch (Bosnië en Herzegovina)
uur-HRKroatisch
heHongaars
hu-HUHongaars
hoiArmeens
hy-AMArmeens
ID kaartIndonesisch
ik deedIndonesisch
isIJslands
is-ISIJslands
HetItaliaans
jeukItaliaans (Zwitserland)
het-ITItaliaans (Italië)
jaJapans
ja-JPJapans
kaGeorgisch
ka-GEGeorgisch
kkKazachs
kk-KZKazachs
knkanara
kn-INkanara
koKoreaanse taal
ko-KRKoreaanse taal
kokKonkani
kok-INKonkani
kyKirgizisch
ky-KGKirgizisch (Cyrillisch)
HetLitouws
lt-LTLitouws
lvLets
lv-LVLets
miMaori
mi-NZMaori
mkMacedonisch
mk-MKMacedonisch (FYROM)
mnMongools
mn-MNMongools (Cyrillisch)
Dhrmarathi
meneer-INmarathi
MevrMaleis
ms-BNMaleis (Brunei Darussalam)
mevrouw-MIJNMaleis (Maleisië)
mtMaltees
MT-MTMaltees
nbNoors (Berkemeier)
nb-NEENoors (Berkemeier) (Noorwegen)
nlNederlands
nl-BENederlands(België)
nl-NLNederlands (Nederland)
n-NEENoors (Nynosk) (Noorwegen)
NSNoord-Sotho
n-ZANoord-Sotho
vaderPunjabi
pijnPunjabi
plPools
pl-PLPools
ptPortugees
pt-BRPortugees (Brazilië)
pt-PTPortugees (Portugal)
quQuechua
qu-BOQuechua (Bolivia)
qu-ECQuechua (Ecuador)
qu-PEQuechua (Peru)
roRoemeense
ro-RORoemeense
RuRussisch
ru-RURussisch
zaSanskriet
sa-INSanskriet
zNoord-Samos
se-FINoord-Samoaans (Finland)
se-FIScott Samos (Finland)
se-FIInari Samos (Finland)
se-NEENoord-Samoaans (Noorwegen)
se-NEELuleå Samos (Noorwegen)
se-NEEZuid-Samos (Noorwegen)
se-SENoord-Samoaans (Zweden)
se-SELuleå Samos (Zweden)
se-SEZuid-Samos (Zweden)
skSlowaaks
sk-SKSlowaaks
slSloveens
sl-SISloveens
vierkante meterAlbanees
sq-ALAlbanees
sr-BAServisch (Latijn, Bosnië en Herzegovina)
sr-BAServisch (Cyrillisch, Bosnië en Herzegovina)
sr-SPServië (Latijn)
sr-SPServië (Cyrillisch)
svZweeds
sv-FIZweeds (Finland)
sv-SEZweeds
zwSwahili
sw-KESwahili
syrSyrisch
syr-SYSyrisch
taTamil
ta-INTamil
Tetelugu
te-INtelugu
eThais
th-THThais
tlTagalog
tl-PHTagalog (Filippijnen)
tnTswana
tn-ZATswana
trTurks
tr-TRTurks
tsDzonga
ttTataars
tt-RUTataars
VKOekraïens
VK-UAOekraïens
jijUrdu
uw-PKUrdu
uzOezbeeks
uz-UZOezbeeks (Latijn)
uz-UZOezbeeks (Cyrillisch)
viVietnamees
vi-VNVietnamees
xhbantu-taal
xh-ZAbantu-taal
zChinese
zh-CNVersimpeld Chinees)
zh-HKChinees (Hongkong)
zh-MOChinees (Macau)
zh-SGChinees (Singapore)
zh-TWtraditioneel Chinees)
zoZoeloe
zu-ZAZoeloe

Koppeling

https://github.com/aigc-projects/nuxt-i18n-starter



copyright © www.lyustu.com alle rechten voorbehouden.
Thema: TheMoon V3.0. Auteur: neo yang