ログイン

Nuxt の究極の国際化ソリューション: I18n+Nuxt コンテンツ

著者:ネオヤン 時間:2023/12/06 読む: 7604
海外進出の流れに伴い、中国で広く使われているVueやNuxtは国際化の問題に直面することが多い。 WordPress の場合は簡単で、プラグインをインストールし、Google の翻訳インターフェイスを設定すると、システムが毎日新しいコンテンツをさまざまな言語バージョンに自動的に翻訳します。ただし、他のシステムの場合は、[…]

海外進出の流れに伴い、中国で広く使われている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繁体字中国語)
ズールー語
ずーざズールー語

リンク

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



著作権 © www.lyustu.com 全著作権所有。
テーマ: TheMoon V3.0 著者:neo yang