登入

Nuxt的國際化終極解決方案:I18n+Nuxt Content

作者:neo yang 時間:2023/12/06 讀: 7398
出海大潮,國內用得多的Vue和Nuxt也常要面對國際化的問題。如果是wordpress的話,就簡單了,裝[…]

出海大潮,國內用得多的Vue和Nuxt也常要面對國際化的問題。

如果是wordpress的話,就簡單了,裝一個插件,配置好Google的翻譯接口,然後系統就會每天將新的內容自動翻譯成各種語言版本。

但對於其它的系統,就不那麼方便了。

程式碼已開源:https://github.com/aigc-projects/nuxt-i18n-starter

一、基本的國際化—I18n

nuxt-i18n

1、什麼是I18n?

I18n是Nuxt國際化的必須的東西。它主要是提供了一套完整的國際化的解決方案,包括國際化路由、和基於國際化路由改變語言的方法。

2、安裝I18n

以下都可以。

yarn add @nuxtjs/i18n # yarn npm i @nuxtjs/i18n # npm pnpm i @nuxtjs/i18n pnpm add @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, // 👇 Reference the Vue I18nserLanguage: false, // 👇 Reference the Vue I18nserLanguage: config file vueI18n: "./i18n.config.js", }, 

4、設定i18n.config.ts

新建i18n.config.ts或i18n.config.js

這個文件是用來配置翻譯字段的。

export default defineI18nConfig(() => ({ legacy: false, // 👇 Add translations messages: { "en": { nav_about: "About", }, "es": { nav_about: "sobre", }, "ar ": { nav_about: "نبذة عنا", }, "fr": { nav_about: "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">
        {{ loc.name }}
      </option>
    </select>
  </div>
</template>

用法

在頁面或佈局中使用標籤:

7、取得目前的語言

context.app.i18n.locale // where you have access to NuxtContext this.$i18n.locale //in component $i18n.locale // in template

二、文檔內容的國際化

單獨使用I18n完全可以實現全站的國際化。但如果網站有很多文章,那就需要在i18n.config.ts中寫入大量的配置項,相當麻煩。

當然,如果文章內容來自後端資料庫,那麼就不用考慮這個了,只需要將翻譯好的內容存入資料庫,不同的語言頁面取對應語言的文章版本就可以了。

這裡說的是,文章內容不是在後端資料庫,而是放在前端。

對nuxt來說,最好的方法就是使用nuxt content。簡單來說,就是將文章都存在markdown檔案中,然後,開啟某個路由就會載入這個路由對應的頁面和markdown檔案。

因為同樣的頁面,例如首頁,不同的語言,使用的路由是不同的。

比如,預設英語。首頁是www.xxx.com, 西班牙文版就是www.xxx.com/es。

所以www.xxx.com會呼叫pages目錄下的index.vue,並且載入content目錄下的index.md。而,www.xxx.com/es會呼叫pages目錄下的index.vue,並載入content目錄下的es.md文件。

所以,同一篇文章的不同語言的版本,只需要在content目錄下依照路由建造對應版本的翻譯檔案。

1、安裝nuxt content

pnpm add @nuxt/content

2、nuxt.config.ts配置

modules: [ '@nuxt/content' ], content: { // ... options }

3、在頁面呼叫對應翻譯文檔

首頁預設英語,配置西班牙語路由和頁面。

最後的路由是這樣的:

預設首頁(英文):www.xxx.com

西班牙文首頁:www.xxx.com/es

首先,設計content的檔案目錄

//content目錄設計| pages . index.vue content . index.md . es.md

然後,在首頁中需要呼叫文章的部分加標籤

 <ContentDoc />

三、國際化路由的最佳實踐

en-US,en表示英語,US表示國家:美國。這是一個標準的語言代碼。路由可以直接這樣來寫:www.xxx.com/en-US

但是,大多時候,我們不需要細分到國家的層次,只需要到語言的層次就夠了。所以,這樣寫,反而是最適合的:www.xxx.com/en

當然,對於中文,就不能這樣了,中文有:zh-CN(簡體中文),zh-HK(香港繁體),zh-TW(台灣繁體)

所以,對於中文,只能這樣:www.xxx.com/zh-cn

四、附錄:國際標準的語言代碼

語言程式碼語言國家
af南非語
af-ZA南非語
ar阿拉伯語
ar-AE阿拉伯語(阿聯酋)
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亞塞拜然語(西里爾文)
be比利時語
be-BY比利時語
bg保加利亞語
bg-BG保加利亞語
bs-BA波士尼亞語(拉丁文,波士尼亞與赫塞哥維納)
ca加泰隆語
ca-ES加泰隆語
cs捷克語
cs-CZ捷克語
cy威爾斯語
cy-GB威爾斯語
da丹麥語
da-DK丹麥語
de德文
de-AT德語(奧地利)
de-CH德語(瑞士)
de-DE德語(德)
de-LI德文(列支敦斯登)
de-LU德語(盧森堡)
dv第維埃語
dv-MV第維埃語
el希臘文
el-GR希臘文
en英語
en-AU英語(澳洲)
en-BZ英語(伯利茲)
en-CA英語(加拿大)
en-CB英文(加勒比海)
en-GB英語(英國)
en-IE英語(愛爾蘭)
en-JM英文(牙買加)
en-NZ英語(紐西蘭)
en-PH英語(菲律賓)
en-TT英語(特立尼達)
en-US英語(美國)
en-ZA英語(南非)
en-ZW英語(津巴布韋)
eo世界語
es西班牙語
es-AR西班牙文(阿根廷)
es-BO西班牙文(玻利維亞)
es-CL西班牙文(智利)
es-CO西班牙文(哥倫比亞)
es-CR西班牙文(哥斯大黎加)
es-DO西班牙文(多明尼加共和國)
es-EC西班牙文(厄瓜多)
es-ES西班牙文(傳統)
es-ES西班牙語(國際)
es-GT西班牙語(危地馬拉)
es-HN西班牙語(洪都拉斯)
es-MX西班牙語(墨西哥)
es-NI西班牙語(尼加拉瓜)
es-PA西班牙文(巴拿馬)
es-PE西班牙語(秘魯)
es-PR西班牙文(波多黎各(美))
es-PY西班牙語(巴拉圭)
es-SV西班牙文(薩爾瓦多)
es-UY西班牙文(烏拉圭)
es-VE西班牙文(委內瑞拉)
et愛沙尼亞語
et-EE愛沙尼亞語
eu巴士克語
eu-ES巴士克語
fa法斯語
fa-IR法斯語
fi芬蘭語
fi-FI芬蘭語
fo法羅語
fo-FO法羅語
fr法語
fr-BE法語(比利時)
fr-CA法文(加拿大)
fr-CH法文(瑞士)
fr-FR法文(法國)
fr-LU法文(盧森堡)
fr-MC法文(摩納哥)
gl加里西亞語
gl-ES加里西亞語
gu古吉拉特語
gu-IN古吉拉特語
he希伯來文
he-IL希伯來文
hi印地語
hi-IN印地語
hr克羅埃西亞語
hr-BA克羅埃西亞語(波士尼亞與赫塞哥維納)
hr-HR克羅埃西亞語
hu匈牙利語
hu-HU匈牙利語
hy亞美尼亞語
hy-AM亞美尼亞語
id印尼語
id-ID印尼語
is冰島語
is-IS冰島語
it義大利語
it-CH義大利語(瑞士)
it-IT義大利語(義大利)
ja日語
ja-JP日語
ka喬治亞語
ka-GE喬治亞語
kk哈薩克語
kk-KZ哈薩克語
kn卡納拉語
kn-IN卡納拉語
ko韓語
ko-KR韓語
kok孔卡尼語
kok-IN孔卡尼語
ky吉爾吉斯語
ky-KG吉爾吉斯語(西里爾文)
lt立陶宛語
lt-LT立陶宛語
lv拉脫維亞語
lv-LV拉脫維亞語
mi毛利語
mi-NZ毛利語
mk馬其頓語
mk-MK馬其頓語(FYROM)
mn蒙古語
mn-MN蒙古語(西里爾文)
mr馬拉地語
mr-IN馬拉地語
ms馬來語
ms-BN馬來語(汶萊達魯薩蘭)
ms-MY馬來語(馬來西亞)
mt馬爾他語
mt-MT馬爾他語
nb挪威語(伯克梅爾)
nb-NO挪威語(伯克梅爾)(挪威)
nl荷蘭語
nl-BE荷蘭語(比利時)
nl-NL荷蘭語(荷蘭)
nn-NO挪威語(尼諾斯克)(挪威)
ns北梭托語
ns-ZA北梭托語
pa旁遮普語
pa-IN旁遮普語
pl波蘭語
pl-PL波蘭語
pt葡萄牙語
pt-BR葡萄牙語(巴西)
pt-PT葡萄牙語(葡萄牙)
qu克丘亞語
qu-BO克丘亞語(玻利維亞)
qu-EC克丘亞語(厄瓜多)
qu-PE克丘亞語(秘魯)
ro羅馬尼亞語
ro-RO羅馬尼亞語
ru俄文
ru-RU俄文
sa梵文
sa-IN梵文
se北薩摩斯語
se-FI北薩摩斯語(芬蘭)
se-FI斯科特薩摩斯語(芬蘭)
se-FI伊薩薩摩斯語(芬蘭)
se-NO北薩摩斯語(挪威)
se-NO律勒歐薩摩斯語(挪威)
se-NO南薩摩斯語(挪威)
se-SE北薩摩斯語(瑞典)
se-SE律勒歐薩摩斯語(瑞典)
se-SE南薩摩斯語(瑞典)
sk斯洛伐克語
sk-SK斯洛伐克語
sl斯洛維尼亞語
sl-SI斯洛維尼亞語
sq阿爾巴尼亞語
sq-AL阿爾巴尼亞語
sr-BA塞爾維亞語(拉丁文,波士尼亞與赫塞哥維納)
sr-BA塞爾維亞語(西里爾文,波士尼亞和黑塞哥維那)
sr-SP塞爾維亞(拉丁)
sr-SP塞爾維亞(西里爾文)
sv瑞典語
sv-FI瑞典語(芬蘭)
sv-SE瑞典語
sw斯瓦希里語
sw-KE斯瓦希里語
syr敘利亞語
syr-SY敘利亞語
ta泰米爾語
ta-IN泰米爾語
te泰盧固語
te-IN泰盧固語
th泰語
th-TH泰語
tl塔加路語
tl-PH塔加路語(菲律賓)
tn茨瓦納語
tn-ZA茨瓦納語
tr土耳其語
tr-TR土耳其語
ts宗加語
tt韃靼語
tt-RU韃靼語
uk烏克蘭語
uk-UA烏克蘭語
ur烏都語
ur-PK烏都語
uz烏茲別克語
uz-UZ烏茲別克語(拉丁文)
uz-UZ烏茲別克語(西里爾文)
vi越南語
vi-VN越南語
xh班圖語
xh-ZA班圖語
zh中文
zh-CN中文(簡體)
zh-HK中文(香港)
zh-MO中文(澳門)
zh-SG中文(新加坡)
zh-TW中文(繁體)
zu祖魯語
zu-ZA祖魯語

連結

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



copyright © www.lyustu.com all rights reserve.
Theme: TheMoon V3.0. Author:neo yang