Идеальное решение Nuxt для интернационализации: I18n+Nuxt Content
С ростом популярности за рубежом Vue и Nuxt, широко используемые в Китае, часто сталкиваются с проблемами интернационализации.
Если это WordPress, то все просто. Установите плагин, настройте интерфейс перевода Google, и тогда система будет каждый день автоматически переводить новый контент на различные языковые версии.
Но для других систем это не так удобно.
Код с открытым исходным кодом: https://github.com/aigc-projects/nuxt-i18n-starter.
1. Базовая интернационализация-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-dev3. Настройте nuxt.config.ts
модули: [ '@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.
Этот файл используется для настройки полей перевода.
Export default defineI18nConfig(() => ({ Legacy: false, // 👇 Добавить сообщения о переводах: { "en": { nav_about: "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, можно полностью добиться интернационализации всего сайта. Но если на сайте много статей, то в i18n.config.ts нужно прописывать большое количество элементов конфигурации, что довольно хлопотно.
Конечно, если контент статьи поступает из внутренней базы данных, то нет необходимости это учитывать. Вам нужно только хранить переведенный контент в базе данных и получать версию статьи на соответствующем языке для разных языковых страниц.
Здесь сказано, что содержимое статьи находится не во внутренней базе данных, а во внешней.
Для nuxt лучший способ — использовать контент nuxt. Проще говоря, все статьи хранятся в файлах уценки, а затем при открытии определенного маршрута будет загружена страница и файл уценки, соответствующие этому маршруту.
Потому что одна и та же страница, например домашняя, использует разные маршруты на разных языках.
Например, по умолчанию используется английский. Домашняя страница — www.xxx.com, испанская версия — www.xxx.com/es.
Таким образом, www.xxx.com вызовет index.vue в каталоге страниц и загрузит index.md в каталоге содержимого. Однако www.xxx.com/es вызовет index.vue в каталоге страниц и загрузит документ es.md в каталог контента.
Поэтому для разных языковых версий одной и той же статьи вам нужно лишь создать соответствующую версию файла перевода по маршруту в каталоге контента.
1. Установите новый контент
pnpm добавить @nuxt/content
2. конфигурация nuxt.config.ts
модули: [ '@nuxt/content' ], контент: { // ... параметры }3. Вызовите соответствующий документ перевода на странице.
По умолчанию домашняя страница настроена на английском языке, а маршруты и страницы настроены на испанском языке.
Конечный маршрут такой:
Домашняя страница по умолчанию (на английском языке): www.xxx.com.
Домашняя страница на испанском языке: www.xxx.com/es
Сначала создайте каталог файлов содержимого.
// дизайн каталога контента | index.vue content index.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. Приложение: Международные стандартные языковые коды
| код языка | языковая страна |
|---|---|
| аф | африкаанс |
| аф-ЗА | африкаанс |
| ар | арабский |
| ар-АЭ | Арабский (ОАЭ) |
| ар-БХ | Арабский (Бахрейн) |
| ар-ДЗ | Арабский (Алжир) |
| ар-ЭГ | Арабский (Египет) |
| ar-IQ | Арабский (Ирак) |
| ар-Джо | Арабский (Иордания) |
| ар-КВ | Арабский (Кувейт) |
| ар-ЛБ | Арабский (Ливан) |
| ар-ЛИ | Арабский (Ливия) |
| ар-МА | Арабский (Марокко) |
| ар-ОМ | Арабский (Оман) |
| ар-QA | Арабский (Катар) |
| ар-СА | Арабский (Саудовская Аравия) |
| ар-СЫ | Арабский (Сирия) |
| ар-ТН | Арабский (Тунис) |
| ар-ЙЕ | Арабский (Йемен) |
| аз | азербайджанский |
| А-Я-Я | Азербайджанский (латиница) |
| А-Я-Я | Азербайджанский (кириллица) |
| быть | бельгийский |
| быть-BY | бельгийский |
| бг | болгарский |
| бг-БГ | болгарский |
| БС-БА | Боснийский (латиница, Босния и Герцеговина) |
| Калифорния | каталанский |
| Калифорния-ES | каталанский |
| CS | Чешский |
| cs-CZ | Чешский |
| сай | валлийский |
| сай-ГБ | валлийский |
| да | датский |
| да-ДК | датский |
| де | Немецкий |
| де-АТ | Немецкий (Австрия) |
| де-CH | Немецкий (Швейцария) |
| де-DE | Немецкий (Германия) |
| гастроном | Немецкий (Лихтенштейн) |
| де-ЛУ | Немецкий (Люксембург) |
| дв | Тивизе |
| ДВ-МВ | Тивизе |
| эль | Греческий |
| эль-ГР | Греческий |
| ru | Английский |
| ru-AU | английский (Австралия) |
| ru-BZ | английский(Белиз) |
| ru-CA | английский (Канада) |
| ru-CB | Английский (Карибский) |
| ru-GB | английский (Великобритания) |
| ru-IE | английский (Ирландия) |
| ru-JM | Английский (Ямайский) |
| ru-Новая Зеландия | Английский (Новая Зеландия) |
| ru-PH | Английский (Филиппины) |
| эн-ТТ | английский (Тринидад) |
| ru-US | Английский Соединенные Штаты) |
| ru-ZA | английский (Южная Африка) |
| ru-ZW | Английский (Зимбабве) |
| эо | эсперанто |
| эс | испанский |
| эс-АР | Испанский (Аргентина) |
| эс-БО | Испанский (Боливия) |
| es-CL | Испанский (Чили) |
| эс-CO | Испанский (Колумбия) |
| эс-CR | Испанский (Коста-Рика) |
| эс-ДО | Испанский (Доминиканская Республика) |
| es-EC | Испанский (Эквадор) |
| эс-ES | Испанский (традиционный) |
| эс-ES | Испанский (международный) |
| эс-GT | Испанский (Гватемала) |
| эс-HN | Испанский (Гондурас) |
| es-MX | Испанский (Мексика) |
| эс-НИ | Испанский (Никарагуа) |
| эс-ПА | Испанский (Панама) |
| es-PE | Испанский (Перу) |
| эс-пиар | Испанский (Пуэрто-Рико (США)) |
| эс-PY | Испанский (Парагвай) |
| эс-СВ | Испанский (Сальвадор) |
| эс-УЙ | Испанский (Уругвай) |
| эс-VE | Испанский (Венесуэла) |
| и др. | эстонский |
| et-EE | эстонский |
| Евросоюз | Баскский |
| ЕС-ЕС | Баскский |
| фа | Французский |
| ф-ИК | Французский |
| фи | финский |
| фи-ФИ | финский |
| фо | фарерский |
| фо-ФО | фарерский |
| фр. | Французский |
| фр-BE | Французский (Бельгия) |
| фр-Калифорния | Французский (Канада) |
| фр-Швейцария | Французский (Швейцария) |
| а как | Французский (Франция) |
| пт-LU | Французский (Люксембург) |
| фр-MC | Французский(Монако) |
| гл | галисийский |
| гл-ES | галисийский |
| гу | Гуджарати |
| гу-ИН | Гуджарати |
| он | иврит |
| он-ИЛ | иврит |
| привет | хинди |
| привет-IN | хинди |
| час | хорватский |
| HR-BA | Хорватский (Босния и Герцеговина) |
| HR-HR | хорватский |
| ху | Венгерский |
| ху-ху | Венгерский |
| хи | Армянский |
| хай-АМ | Армянский |
| ИДЕНТИФИКАТОР | индонезийский |
| я сделал | индонезийский |
| является | исландский |
| есть-есть | исландский |
| это | итальянский |
| зуд | Итальянский (Швейцария) |
| это-ИТ | Итальянский (Италия) |
| да | Японский |
| ja-JP | Японский |
| ка | грузинский |
| ка-GE | грузинский |
| ок | казахский |
| kk-KZ | казахский |
| знать | Канара |
| кн-ИН | Канара |
| ко | корейский язык |
| ко-КР | корейский язык |
| кок | Конкани |
| кок-ИН | Конкани |
| окей | киргизский |
| ky-KG | Кыргызский (кириллица) |
| лт | Литовский |
| лт-LT | Литовский |
| лв | Латышский |
| НН-НН | Латышский |
| ми | маори |
| ми-Новая Зеландия | маори |
| мк | македонский |
| мк-МК | Македонский (БЮРМ) |
| минута | Монгольский |
| мн-мн | Монгольский (кириллица) |
| Мистер | маратхи |
| г-н-ИН | маратхи |
| РС | малайский |
| мс-БН | Малайский (Бруней-Даруссалам) |
| мс-МОЙ | Малайский (Малайзия) |
| тонна | мальтийский |
| мт-МТ | мальтийский |
| обратите внимание | Норвежский (Беркемайер) |
| нб-НЕТ | Норвежский (Беркемайер) (Норвегия) |
| Нидерланды | Голландский |
| nl-BE | Голландский (Бельгия) |
| НЛ-НЛ | Голландский (Нидерланды) |
| н-НЕТ | Норвежский (Нюноск) (Норвегия) |
| нс | Северный Сото |
| н-ЗА | Северный Сото |
| год | пенджабский |
| боль | пенджабский |
| пожалуйста | Польский |
| пл-ПЛ | Польский |
| пт | португальский |
| пт-БР | Португальский (Бразилия) |
| пт-ПТ | Португальский (Португалия) |
| Цюй | кечуа |
| Цюй-БО | Кечуа (Боливия) |
| Цюй-EC | Кечуа (Эквадор) |
| Цюй-PE | Кечуа (Перу) |
| ро | румынский |
| ро-ро | румынский |
| RU | Русский |
| ру-RU | Русский |
| са | санскрит |
| са-ИН | санскрит |
| видишь | Северный Самос |
| se-FI | Северное Самоа (Финляндия) |
| se-FI | Скотт Самос (Финляндия) |
| se-FI | Инари Самос (Финляндия) |
| се-НЕТ | Северное Самоа (Норвегия) |
| се-НЕТ | Лулео Самос (Норвегия) |
| се-НЕТ | Южный Самос (Норвегия) |
| se-SE | Северный Самиан (Швеция) |
| se-SE | Лулео Самос (Швеция) |
| se-SE | Южный Самос (Швеция) |
| ск | словацкий |
| ск-СК | словацкий |
| сл | словенский |
| сл-СИ | словенский |
| кв. | албанский |
| кв-АЛ | албанский |
| ср-БА | Сербский (латиница, Босния и Герцеговина) |
| ср-БА | Сербский (кириллица, Босния и Герцеговина) |
| ср-СП | Сербия (латиница) |
| ср-СП | Сербия (кириллица) |
| св | Шведский |
| св-ФИ | Шведский (Финляндия) |
| св-ЮВ | Шведский |
| SW | суахили |
| SW-KE | суахили |
| сэр | сирийский |
| сыр-СЫ | сирийский |
| та | тамильский |
| та-ИН | тамильский |
| Те | телугу |
| те-ИН | телугу |
| й | тайский |
| эт-ТН | тайский |
| ТЛ | Тагальский |
| tl-PH | Тагальский (Филиппины) |
| ТН | Тсвана |
| тн-ЗА | Тсвана |
| тр | турецкий |
| тр-ТР | турецкий |
| тс | Дзонга |
| тт | татарский |
| тт-RU | татарский |
| Великобритания | украинец |
| Великобритания-UA | украинец |
| ты | урду |
| ур-ПК | урду |
| уз | Узбекский |
| уз-УЗ | Узбекский (латиница) |
| уз-УЗ | Узбекский (кириллица) |
| ви | вьетнамский |
| ви-ВН | вьетнамский |
| хх | язык банту |
| xh-ZA | язык банту |
| ж | Китайский |
| ж-CN | Китайский упрощенный) |
| ж-ГК | Китайский (Гонконг) |
| ж-МО | Китайский (Макао) |
| ж-СГ | Китайский (Сингапур) |
| ж-TW | традиционный китайский) |
| цу | Зулу |
| зу-ЗА | Зулу |
Связь
https://github.com/aigc-projects/nuxt-i18n-starter
