Nuxts ultimative Internationalisierungslösung: I18n+Nuxt Content

Autor:Neo-Yang Zeit:2023/12/06 Lesen: 7656

---

Da Vue und Nuxt, die in China weit verbreitet sind, zunehmend ins Ausland gehen, stehen sie häufig vor Internationalisierungsproblemen.

Wenn es sich um WordPress handelt, ist es ganz einfach: Installieren Sie ein Plug-in, konfigurieren Sie die Übersetzungsschnittstelle von Google und dann übersetzt das System jeden Tag automatisch neue Inhalte in verschiedene Sprachversionen.

Aber für andere Systeme ist es nicht so praktisch.

Der Code ist Open Source: https://github.com/aigc-projects/nuxt-i18n-starter

1. Grundlegende Internationalisierung-I18n

nuxt-i18n

1. Was ist I18n?

I18n ist ein Muss für die Nuxt-Internationalisierung. Es bietet hauptsächlich einen vollständigen Satz von Internationalisierungslösungen, einschließlich Internationalisierungsrouting und Methoden zum Ändern von Sprachen basierend auf Internationalisierungsrouting.

2. Installieren Sie I18n

Alles Folgende ist in Ordnung.

Garn add @nuxtjs/i18n # Garn npm i @nuxtjs/i18n # npm pnpm i @nuxtjs/i18n pnpm add @nuxtjs/i18n@next --save-dev

3. Konfigurieren Sie nuxt.config.ts

 module: [ '@nuxtjs/i18n', ], i18n: { locales: [ { name: "English",code: "en", iso: "en-US", dir: "ltr" }, { name: " español",code: "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", discoverBrowserLanguage: false, // 👇 Referenzieren Sie den Vue I18n Konfigurationsdatei vueI18n: „./i18n.config.js“, }, 

4. Konfigurieren Sie i18n.config.ts

Erstellen Sie eine neue i18n.config.ts oder i18n.config.js

Diese Datei wird zum Konfigurieren von Übersetzungsfeldern verwendet.

export default defineI18nConfig(() => ({ Legacy: false, // 👇 Übersetzungen hinzufügen message: { "en": { nav_about: "About", }, "es": { nav_about: "sobre", }, "ar ": { nav_about: "About", }, "fr": { nav_about: "About", }, }, }))

5. Komponenten verknüpfen

Code

Verwendung

{{ $t('nav_home') }}

6. Sprachumschaltkomponente

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.name }}
      </option>
    </select>
  </div>
</template>

Verwendung

Verwenden Sie Tags auf einer Seite oder einem Layout:

7. Holen Sie sich die aktuelle Sprache

context.app.i18n.locale // wo Sie Zugriff auf NuxtContext haben this.$i18n.locale //in Komponente $i18n.locale // in Vorlage

2. Internationalisierung des Dokumentinhalts

Allein durch die Verwendung von I18n kann die Internationalisierung der gesamten Website vollständig erreicht werden. Wenn die Website jedoch viele Artikel enthält, müssen viele Konfigurationselemente in i18n.config.ts geschrieben werden, was ziemlich mühsam ist.

Wenn der Artikelinhalt aus der Back-End-Datenbank stammt, muss dies natürlich nicht berücksichtigt werden. Sie müssen lediglich den übersetzten Inhalt in der Datenbank speichern und die Artikelversion in der entsprechenden Sprache für verschiedene Sprachseiten abrufen.

Hier wird gesagt, dass der Inhalt des Artikels nicht in der Back-End-Datenbank, sondern im Front-End liegt.

Für Nuxt ist es am besten, Nuxt-Inhalte zu verwenden. Einfach ausgedrückt werden alle Artikel in Markdown-Dateien gespeichert. Wenn dann eine bestimmte Route geöffnet wird, werden die Seite und die Markdown-Datei geladen, die dieser Route entsprechen.

Denn die gleiche Seite, etwa die Homepage, nutzt unterschiedliche Routen in unterschiedlichen Sprachen.

Die Standardeinstellung ist beispielsweise Englisch. Die Homepage ist www.xxx.com und die spanische Version ist www.xxx.com/es.

Daher ruft www.xxx.com index.vue im Seitenverzeichnis auf und lädt index.md im Inhaltsverzeichnis. Allerdings ruft www.xxx.com/es index.vue im Seitenverzeichnis auf und lädt das es.md-Dokument in das Inhaltsverzeichnis.

Daher müssen Sie für verschiedene Sprachversionen desselben Artikels nur die entsprechende Version der Übersetzungsdatei entsprechend der Route im Inhaltsverzeichnis erstellen.

1. Nuxt-Inhalte installieren

pnpm @nuxt/content hinzufügen

2. nuxt.config.ts-Konfiguration

Module: [ '@nuxt/content' ], Inhalt: { // ... Optionen }

3. Rufen Sie auf der Seite das entsprechende Übersetzungsdokument auf

Die Startseite ist standardmäßig auf Englisch eingestellt und spanische Routen und Seiten sind konfiguriert.

Die endgültige Route sieht so aus:

Standard-Homepage (Englisch): www.xxx.com

Spanische Homepage: www.xxx.com/es

Entwerfen Sie zunächst das Inhaltsdateiverzeichnis

//Inhaltsverzeichnisdesign | Seiten .index.vue Inhalt .index.md .es.md

Fügen Sie dann Tags zu dem Teil der Homepage hinzu, in dem der Artikel aufgerufen werden soll

 <ContentDoc />

3. Best Practices für internationales Routing

en-US, en bedeutet Englisch, US bedeutet Land: Vereinigte Staaten. Dies ist ein Standard-Sprachcode. Die Route kann direkt so geschrieben werden: www.xxx.com/en-US

Meistens müssen wir es jedoch nicht auf die Länderebene herunterbrechen, es reicht nur das Sprachniveau. Daher ist es am besten, es so zu schreiben: www.xxx.com/en

Dies kann natürlich nicht auf Chinesisch zutreffen. Chinesisch umfasst: zh-CN (vereinfachtes Chinesisch), zh-HK (traditionelles Hongkong), zh-TW (traditionelles Taiwan)

Für Chinesen ist dies also der einzige Weg: www.xxx.com/zh-cn

4. Anhang: Internationale Standardsprachencodes

Sprachcode	Sprachland
af	Afrikaans
af-ZA	Afrikaans
ar	Arabisch
ar-AE	Arabisch (VAE)
ar-BH	Arabisch (Bahrain)
ar-DZ	Arabisch (Algerien)
ar-EG	Arabisch (Ägypten)
ar-IQ	Arabisch (Irak)
ar-JO	Arabisch (Jordanien)
ar-KW	Arabisch (Kuwait)
ar-LB	Arabisch (Libanon)
ar-LY	Arabisch (Libyen)
ar-MA	Arabisch (Marokko)
ar-OM	Arabisch (Oman)
ar-QA	Arabisch (Katar)
ar-SA	Arabisch (Saudi-Arabien)
ar-SY	Arabisch (Syrien)
ar-TN	Arabisch (Tunesien)
ar-YE	Arabisch (Jemen)
az	Aserbaidschanisch
az-AZ	Aserbaidschanisch (Latein)
az-AZ	Aserbaidschanisch (Kyrillisch)
Sei	Belgier
be-BY	Belgier
bg	bulgarisch
bg-BG	bulgarisch
bs-BA	Bosnisch (Latein, Bosnien und Herzegowina)
ca	katalanisch
ca-ES	katalanisch
cs	Tschechisch
cs-CZ	Tschechisch
cy	Walisisch
cy-GB	Walisisch
da	dänisch
da-Weiß nicht	dänisch
de	Deutsch
de-AT	Deutsch (Österreich)
de-CH	Deutsch (Schweiz)
de-DE	Deutsches Deutschland)
Delikatessen	Deutsch (Liechtenstein)
de-LU	Deutsch (Luxemburg)
dv	Tiwiese
dv-MV	Tiwiese
el	griechisch
el-GR	griechisch
de	Englisch
en-AU	Englisch (Australien)
de-BZ	Englisch (Belize)
en-CA	Englisch (Kanada)
en-CB	Englisch (Karibik)
en-GB	Englisch UK)
en-IE	Englisch (Irland)
de-JM	Englisch (Jamaikanisch)
en-NZ	Englisch (Neuseeland)
en-PH	Englisch (Philippinen)
de-TT	Englisch (Trinidad)
en-US	Englisch (USA)
de-ZA	Englisch (Südafrika)
de-ZW	Englisch (Simbabwe)
eo	Esperanto
es	Spanisch
es-AR	Spanisch (Argentinien)
es-BO	Spanisch (Bolivien)
es-CL	Spanisch (Chile)
es-CO	Spanisch (Kolumbien)
es-CR	Spanisch (Costa Rica)
es-DO	Spanisch (Dominikanische Republik)
es-EC	Spanisch (Ecuador)
es-ES	Spanisch (traditionell)
es-ES	Spanisch (International)
es-GT	Spanisch (Guatemala)
es-HN	Spanisch (Honduras)
es-MX	Spanisch (Mexiko)
es-NI	Spanisch (Nicaragua)
es-PA	Spanisch (Panama)
es-PE	Spanisch (Peru)
es-PR	Spanisch (Puerto Rico (USA))
erspähen	Spanisch (Paraguay)
es-SV	Spanisch (El Salvador)
es-UY	Spanisch (Uruguay)
es-VE	Spanisch (Venezuela)
et	estnisch
et-EE	estnisch
EU	baskisch
eu-ES	baskisch
Fa	Französisch
Tanne	Französisch
fi	finnisch
fi-FI	finnisch
fo	färöisch
fo-FO	färöisch
fr	Französisch
fr-BE	Französisch (Belgien)
fr-CA	Französisch (Kanada)
fr-CH	Französisch (Schweiz)
fr-FR	Französisch Frankreich)
fr-LU	Französisch (Luxemburg)
fr-MC	Französisch (Monaco)
gl	galizisch
gl-ES	galizisch
gu	Gujarati
gu-IN	Gujarati
Er	hebräisch
er-IL	hebräisch
Hi	Hindi
Hallo-IN	Hindi
Std	kroatisch
hr-BA	Kroatisch (Bosnien und Herzegowina)
HR-HR	kroatisch
Hu	ungarisch
Hu-HU	ungarisch
hy	Armenisch
hy-AM	Armenisch
AUSWEIS	Indonesisch
Ich tat	Indonesisch
Ist	isländisch
ist-IST	isländisch
Es	Italienisch
jucken	Italienisch (Schweiz)
es es	Italienisch (Italien)
ja	japanisch
ja-JP	japanisch
ka	georgisch
ka-GE	georgisch
kk	Kasachisch
kk-KZ	Kasachisch
kn	Canara
kn-IN	Canara
ko	koreanische Sprache
ko-KR	koreanische Sprache
kok	Konkani
kok-IN	Konkani
ky	Kirgisisch
ky-KG	Kirgisisch (Kyrillisch)
lt	litauisch
lt-LT	litauisch
lv	lettisch
lv-LV	lettisch
mi	Maori
mi-NZ	Maori
mk	mazedonisch
mk-MK	Mazedonisch (EJRM)
mn	mongolisch
mn-MN	Mongolisch (Kyrillisch)
Herr	Marathi
Herr-IN	Marathi
MS	malaiisch
ms-BN	Malaiisch (Brunei Darussalam)
ms-MY	Malaiisch (Malaysia)
mt	maltesisch
mt-MT	maltesisch
nb	Norwegisch (Berkemeier)
Hinweis: Nein	Norwegisch (Berkemeier) (Norwegen)
nl	Niederländisch
nl-BE	Niederländisch (Belgien)
nl-NL	Niederländisch (Niederlande)
n-NEIN	Norwegisch (Nynosk) (Norwegen)
ns	Nord-Sotho
n-ZA	Nord-Sotho
pa	Punjabi
Schmerz	Punjabi
pl	Polieren
pl-PL	Polieren
pt	Portugiesisch
pt-BR	Portugiesisch (Brasilien)
pt-PT	Portugiesisch (Portugal)
qu	Quechua
qu-BO	Quechua (Bolivien)
que C	Quechua (Ecuador)
qu-PE	Quechua (Peru)
ro	rumänisch
ro-RO	rumänisch
ru	Russisch
ru-RU	Russisch
sa	Sanskrit
sa-IN	Sanskrit
se	Nördliches Samos
se-FI	Nord-Samoan (Finnland)
se-FI	Scott Samos (Finnland)
se-FI	Inari Samos (Finnland)
se-NR	Nordsamoan (Norwegen)
se-NR	Lulea Samos (Norwegen)
se-NR	Süd-Samos (Norwegen)
se-SE	Nordsamian (Schweden)
se-SE	Lulea Samos (Schweden)
se-SE	Süd-Samos (Schweden)
sk	slowakisch
sk-SK	slowakisch
sl	Slowenisch
sl-SI	Slowenisch
Quadrat	albanisch
sq-AL	albanisch
SR-BA	Serbisch (Latein, Bosnien und Herzegowina)
SR-BA	Serbisch (Kyrillisch, Bosnien und Herzegowina)
SR-SP	Serbien (Latein)
SR-SP	Serbien (Kyrillisch)
sv	Schwedisch
SV-FI	Schwedisch (Finnland)
SV-SE	Schwedisch
sw	Suaheli
sw-KE	Suaheli
Sir	Syrisch
syr-SY	Syrisch
ta	Tamil
ta-IN	Tamil
Te	Telugu
te-IN	Telugu
Th	Thailändisch
Th-TH	Thailändisch
tl	Tagalog
tl-PH	Tagalog (Philippinen)
tn	Tswana
tn-ZA	Tswana
tr	Türkisch
tr-TR	Türkisch
ts	Dzonga
tt	Tatarisch
tt-RU	Tatarisch
Vereinigtes Königreich	ukrainisch
UK-UA	ukrainisch
ur	Urdu
ur-PK	Urdu
uz	Usbekisch
uz-UZ	Usbekisch (Latein)
uz-UZ	Usbekisch (Kyrillisch)
vi	Vietnamesisch
vi-VN	Vietnamesisch
xh	Bantusprache
xh-ZA	Bantusprache
zh	Chinesisch
zh-CN	Vereinfachtes Chinesisch)
zh-HK	Chinesisch (Hongkong)
zh-MO	Chinesisch (Macao)
zh-SG	Chinesisch (Singapur)
zh-TW	traditionelles Chinesisch)
zu	Zulu
zu-ZA	Zulu

Verknüpfung

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