Авторизоваться

Идеальное решение Nuxt для интернационализации: I18n+Nuxt Content

Автор:нео Ян Время:2023/12/06 Читать: 7661
С ростом популярности за рубежом Vue и Nuxt, широко используемые в Китае, часто сталкиваются с проблемами интернационализации. Если это WordPress, все просто: установите […]

С ростом популярности за рубежом 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традиционный китайский)
цуЗулу
зу-ЗАЗулу

Связь

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



авторские права © www.lyustu.com, все права защищены.
Тема: TheMoon V3.0 Автор: neo yang