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-dev
3. 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 | カザフ語 |
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 | 繁体字中国語) |
ず | ズールー語 |
ずーざ | ズールー語 |