Nuxt の究極の国際化ソリューション: I18n+Nuxt コンテンツ
海外進出の流れに伴い、中国で広く使われているVueやNuxtは国際化の問題に直面することが多い。
WordPress の場合は簡単で、プラグインをインストールし、Google の翻訳インターフェイスを設定すると、システムが毎日新しいコンテンツをさまざまな言語バージョンに自動的に翻訳します。
しかし、他のシステムでは、それほど便利ではありません。
コードはオープンソースです: https://github.com/aigc-projects/nuxt-i18n-starter
1. 基本的な国際化 - I18n
nuxt-i18n
1. I18n とは何ですか?
Nuxt の国際化には I18n が必須です。主に、国際化ルーティングや国際化ルーティングに基づいて言語を変更する方法など、国際化ソリューションの完全なセットを提供します。
2.I18nをインストールする
以下はすべて問題ありません。
糸追加 @nuxtjs/i18n # 糸 npm i @nuxtjs/i18n # npm pnpm i @nuxtjs/i18n pnpm 追加 @nuxtjs/i18n@next --save-dev3. nuxt.config.ts を構成する
modules: [ '@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", detectBrowserLanguage: false, // 👇 Vue I18n を参照構成ファイル vueI18n: "./i18n.config.js", }, 4. i18n.config.ts を設定する
新しい i18n.config.ts または i18n.config.js を作成します
このファイルは、翻訳フィールドを構成するために使用されます。
エクスポートデフォルトdefineI18nConfig(() => ({ Legacy: false, // 👇 翻訳メッセージの追加: { "en": { nav_about: "概要", }, "es": { nav_about: "sobre", }, "ar ": { nav_about: "نبذة عنا", }, "fr": { nav_about: "概要", }, }, }))
5. コンポーネントをリンクする
コード
使用法
{{ $t('nav_home') }}
6. 言語切り替えコンポーネント
コード
<!-- 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">
{{ 場所名 }}
</option>
</select>
</div>
</template>
使用法
ページまたはレイアウトでタグを使用します。
7. 現在の言語を取得する
context.app.i18n.locale // NuxtContext にアクセスできる場所 this.$i18n.locale // コンポーネント $i18n.locale // テンプレート内2. 文書内容の国際化
I18n のみを使用するだけで、サイト全体の国際化を完全に実現できます。しかし、記事が多いWebサイトの場合、i18n.config.tsに多数の設定項目を記述する必要があり、非常に面倒です。
もちろん、記事のコンテンツがバックエンド データベースから取得されている場合は、これを考慮する必要はなく、翻訳されたコンテンツをデータベースに保存し、異なる言語のページに対応する言語で記事のバージョンを取得するだけで済みます。
ここで言われているのは、記事のコンテンツはバックエンド データベースにあるのではなく、フロントエンドにあるということです。
nuxt の場合、nuxt コンテンツを使用するのが最善の方法です。簡単に言うと、すべての記事はマークダウン ファイルに保存されており、特定のルートが開かれると、そのルートに対応するページとマークダウン ファイルが読み込まれます。
ホームページなどの同じページが、異なる言語で異なるルートを使用するためです。
たとえば、デフォルトは英語です。ホームページは www.xxx.com、スペイン語版は www.xxx.com/es です。
そのため、www.xxx.com は、pages ディレクトリ内のindex.vue を呼び出し、content ディレクトリ内のindex.md をロードします。ただし、www.xxx.com/es は、pages ディレクトリ内のindex.vue を呼び出し、コンテンツ ディレクトリ内の es.md ドキュメントをロードします。
したがって、同じ記事の異なる言語バージョンの場合は、コンテンツ ディレクトリ内のルートに従って、対応するバージョンの翻訳ファイルを作成するだけで済みます。
1. nuxt コンテンツをインストールする
pnpm 追加 @nuxt/content
2. nuxt.config.ts の設定
モジュール: [ '@nuxt/content' ]、コンテンツ: { // ... オプション }3. ページ上の対応する翻訳ドキュメントを呼び出します。
ホームページはデフォルトで英語に設定されており、スペイン語のルートとページが構成されています。
最終的なルートはこんな感じです。
デフォルトのホームページ (英語): www.xxx.com
スペイン語のホームページ: www.xxx.com/es
まず、コンテンツ ファイルのディレクトリを設計します。
//コンテンツ ディレクトリの設計 | ページ .index.vue コンテンツ .index.md .es.md
次に、記事を呼び出す必要があるホームページの部分にタグを追加します。
<ContentDoc />3. 国際ルーティングのベスト プラクティス
en-US、en は英語を意味し、US は国: 米国を意味します。これは標準の言語コードです。ルートは次のように直接記述できます: www.xxx.com/en-US
ただし、ほとんどの場合、国レベルまで細分化する必要はなく、言語レベルだけで十分です。したがって、次のように記述するのが最も適切です: www.xxx.com/en
もちろん、これは中国語には当てはまりません。中国語には、zh-CN (簡体字中国語)、zh-HK (香港繁体字)、zh-TW (繁体字中国語) が含まれます。
したがって、中国語の場合、これが唯一の方法です: www.xxx.com/zh-cn
4. 付録: 国際標準言語コード
| 言語コード | 言語の国 |
|---|---|
| AF | アフリカーンス語 |
| af-ZA | アフリカーンス語 |
| あーる | アラビア語 |
| ar-AE | アラビア語 (UAE) |
| ar-BH | アラビア語 (バーレーン) |
| ar-DZ | アラビア語 (アルジェリア) |
| ar-EG | アラビア語 (エジプト) |
| ar-IQ | アラビア語 (イラク) |
| ar-JO | アラビア語 (ヨルダン) |
| ar-KW | アラビア語 (クウェート) |
| ar-LB | アラビア語 (レバノン) |
| ar-LY | アラビア語 (リビア) |
| ar-MA | アラビア語 (モロッコ) |
| ar-OM | アラビア語 (オマーン) |
| ar-QA | アラビア語 (カタール) |
| ar-SA | アラビア語 (サウジアラビア) |
| ar-SY | アラビア語 (シリア) |
| ar-TN | アラビア語 (チュニジア) |
| ar-YE | アラビア語 (イエメン) |
| az | アゼルバイジャン語 |
| az-AZ | アゼルバイジャン語 (ラテン語) |
| az-AZ | アゼルバイジャン語 (キリル文字) |
| なれ | ベルギーの |
| ビーバイ | ベルギーの |
| バックグラウンド | ブルガリア語 |
| BG-BG | ブルガリア語 |
| bs-BA | ボスニア語 (ラテン語、ボスニア・ヘルツェゴビナ) |
| およそ | カタルーニャ語 |
| ca-ES | カタルーニャ語 |
| cs | チェコ語 |
| cs-CZ | チェコ語 |
| サイ | ウェールズ語 |
| cy-GB | ウェールズ語 |
| だ | デンマーク語 |
| ダ・DK | デンマーク語 |
| デ | ドイツ人 |
| AT解除 | ドイツ語(オーストリア) |
| 脱CH | ドイツ語 (スイス) |
| 脱DE | ドイツ語(ドイツ) |
| デリ | ドイツ語 (リヒテンシュタイン) |
| デ・ルー | ドイツ語 (ルクセンブルク) |
| DV | ティヴィーゼ |
| dv-MV | ティヴィーゼ |
| エル | ギリシャ語 |
| エル-GR | ギリシャ語 |
| jp | 英語 |
| en-AU | 英語 (オーストラリア) |
| en-BZ | 英語(ベリーズ) |
| en-CA | 英語 (カナダ) |
| en-CB | 英語(カリブ海) |
| 英語版 | 英語(イギリス) |
| en-IE | 英語 (アイルランド) |
| en-JM | 英語 (ジャマイカ) |
| ニュージーランド | 英語 (ニュージーランド) |
| en-PH | 英語（フィリピン） |
| en-TT | 英語 (トリニダード) |
| en-US | 英語 (米国) |
| en-ZA | 英語 (南アフリカ) |
| en-ZW | 英語 (ジンバブエ) |
| エオ | エスペラント |
| エス | スペイン語 |
| エスアール | スペイン語 (アルゼンチン) |
| エスボ | スペイン語 (ボリビア) |
| エス-CL | スペイン語 (チリ) |
| エスコ | スペイン語 (コロンビア) |
| エス-CR | スペイン語 (コスタリカ) |
| エス・ドゥ | スペイン語 (ドミニカ共和国) |
| エスEC | スペイン語 (エクアドル) |
| エスエス | スペイン語 (繁体字) |
| エスエス | スペイン語(インターナショナル) |
| エスGT | スペイン語 (グアテマラ) |
| エス・HN | スペイン語 (ホンジュラス) |
| エスMX | スペイン語 (メキシコ) |
| エスニ | スペイン語(ニカラグア) |
| エス・パ | スペイン語(パナマ) |
| エスペ | スペイン語 (ペルー) |
| エスPR | スペイン語(プエルトリコ(米国)) |
| エスピー | スペイン語(パラグアイ) |
| エス-SV | スペイン語(エルサルバドル) |
| エス-UY | スペイン語 (ウルグアイ) |
| エス-VE | スペイン語 (ベネズエラ) |
| など | エストニア語 |
| et-EE | エストニア語 |
| 欧州連合 | バスク語 |
| EU-ES | バスク語 |
| ファ | フランス語 |
| モミ | フランス語 |
| フィ | フィンランド語 |
| ファイファイ | フィンランド語 |
| フォ | フェロー語 |
| フォ・フォ | フェロー語 |
| フランス | フランス語 |
| フランス-BE | フランス語(ベルギー) |
| カリフォルニア州フランス | フランス語 (カナダ) |
| フランス-CH | フランス語 (スイス) |
| フランス-フランス | フランス語(フランス) |
| fr-LU | フランス語 (ルクセンブルク) |
| MC前 | フランス語(モナコ) |
| GL | ガリシア語 |
| gl-ES | ガリシア語 |
| ぐ | グジャラート語 |
| グイン | グジャラート語 |
| 彼 | ヘブライ語 |
| 彼-イル | ヘブライ語 |
| こんにちは | ヒンディー語 |
| こんにちは | ヒンディー語 |
| 時 | クロアチア語 |
| hr-BA | クロアチア語 (ボスニア・ヘルツェゴビナ) |
| 時-HR | クロアチア語 |
| ふー | ハンガリー語 |
| ふーふー | ハンガリー語 |
| こんにちは。 | アルメニア語 |
| ハイAM | アルメニア語 |
| ID | インドネシア語 |
| やった | インドネシア語 |
| は | アイスランド語 |
| は-IS | アイスランド語 |
| それ | イタリアの |
| かゆみ | イタリア語 (スイス) |
| IT-IT | イタリア語 (イタリア) |
| じゃ | 日本語 |
| 日本 | 日本語 |
| カ | ジョージア語 |
| カ・ゲ | ジョージア語 |
| ｋｋ | カザフ語 |
| kk-KZ | カザフ語 |
| 知っている | カナラ |
| kn-IN | カナラ |
| こ | 韓国語 |
| コ-KR | 韓国語 |
| コック | コンカニ |
| コクイン | コンカニ |
| きー | キルギス |
| ky-KG | キルギス語 (キリル文字) |
| それ | リトアニア語 |
| LT-LT | リトアニア語 |
| レベル | ラトビア語 |
| LV-LV | ラトビア語 |
| 私 | マオリ語 |
| ミ・ニュージーランド | マオリ語 |
| mk | マケドニアの |
| mk-MK | マケドニア語 (FYROM) |
| ん | モンゴル語 |
| MN-MN | モンゴル語 (キリル文字) |
| 氏 | マラーティー語 |
| ミスターイン | マラーティー語 |
| MS | マレー語 |
| ms-BN | マレー語(ブルネイ ダルサラーム) |
| ms-MY | マレー語 (マレーシア) |
| 山 | マルタ語 |
| MT-MT | マルタ語 |
| 注意 | ノルウェー語 (バーケマイヤー) |
| 注：いいえ | ノルウェー語 (バーケマイヤー) (ノルウェー) |
| nl | オランダの |
| nl-BE | オランダ語(ベルギー) |
| NL-NL | オランダ語 (オランダ) |
| n-NO | ノルウェー語 (ニーノスク) (ノルウェー) |
| ns | 北ソト語 |
| n-ZA | 北ソト語 |
| パ | パンジャブ語 |
| 痛み | パンジャブ語 |
| お願いします | 研磨 |
| PL-PL | 研磨 |
| ポイント | ポルトガル語 |
| pt-BR | ポルトガル語 (ブラジル) |
| pt-PT | ポルトガル語(ポルトガル) |
| くー | ケチュア語 |
| クボ | ケチュア語 (ボリビア) |
| qu-EC | ケチュア語 (エクアドル) |
| qu-PE | ケチュア語 (ペルー) |
| ロ | ルーマニア語 |
| ロロ | ルーマニア語 |
| る | ロシア |
| るる | ロシア |
| さ | サンスクリット |
| サイン | サンスクリット |
| せ | サモス島北部 |
| セ-FI | 北サモア語 (フィンランド) |
| セ-FI | スコット・サモス（フィンランド） |
| セ-FI | イナリ サモス (フィンランド) |
| せーの | 北サモア語 (ノルウェー) |
| せーの | ルレア・サモス (ノルウェー) |
| せーの | 南サモス島 (ノルウェー) |
| セ-SE | サミアン北部 (スウェーデン) |
| セ-SE | ルレア・サモス (スウェーデン) |
| セ-SE | 南サモス島 (スウェーデン) |
| スク | スロバキア語 |
| sk-SK | スロバキア語 |
| sl | スロベニア語 |
| sl-SI | スロベニア語 |
| 平方 | アルバニア人 |
| 平方AL | アルバニア人 |
| sr-BA | セルビア語 (ラテン語、ボスニア・ヘルツェゴビナ) |
| sr-BA | セルビア語 (キリル文字、ボスニア ヘルツェゴビナ) |
| sr-SP | セルビア (ラテン語) |
| sr-SP | セルビア (キリル文字) |
| SV | スウェーデンの |
| SV-FI | スウェーデン語 (フィンランド) |
| SV-SE | スウェーデンの |
| スイス | スワヒリ語 |
| sw-KE | スワヒリ語 |
| 先生 | シリア語 |
| syr-SY | シリア語 |
| た | タミル語 |
| たーいん | タミル語 |
| テ | テルグ語 |
| テイン | テルグ語 |
| 番目 | タイ語 |
| th-TH | タイ語 |
| TL | タガログ語 |
| TL-PH | タガログ語 (フィリピン) |
| トン | ツワナ |
| tn-ZA | ツワナ |
| tr | トルコ語 |
| tr-TR | トルコ語 |
| ts | ゾンガ |
| って | タタール語 |
| tt-RU | タタール語 |
| イギリス | ウクライナ語 |
| 英国-UA | ウクライナ語 |
| あなたは | ウルドゥー語 |
| ウルPK | ウルドゥー語 |
| うず | ウズベク語 |
| ウズウズ | ウズベク語 (ラテン語) |
| ウズウズ | ウズベク語 (キリル文字) |
| ヴィ | ベトナム語 |
| vi-VN | ベトナム語 |
| xh | バンツー語 |
| xh-ZA | バンツー語 |
| zh | 中国語 |
| zh-CN | 中国語（簡体字） |
| zh-香港 | 中国語 (香港) |
| zh-MO | 中国語(マカオ) |
| zh-SG | 中国語 (シンガポール) |
| zh-TW | 繁体字中国語） |
| ず | ズールー語 |
| ずーざ | ズールー語 |
リンク
https://github.com/aigc-projects/nuxt-i18n-starter
