Идеальное решение 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-dev
3. Настройте 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 | традиционный китайский) |
цу | Зулу |
зу-ЗА | Зулу |