Nuxt.js app от UI-кита до деплоя. Часть 3: Мультиязычность

Привет!

Это третья часть цикла статей о создании современного блога на Nuxt.js. Сегодня реализуем мультиязычность в приложении, которое мы написали в первой и второй частях.

Обратите внимание, что код каждой части можно найти в собственной ветке на Github, а в master доступна версия приложения из последней опубликованной статьи.

Зачем нужен мультиязычный сайт?

Преимущества будут различны и зависят от сферы вашего бизнеса, конкретного продукта или услуги. Однако приведем самые значимые, на наш взгляд, плюсы, которые может дать мультиязычный сайт:

• привлечение к продукту более широкой аудитории,
• уменьшение отказов и повышение конверсии,
• установление конкурентного преимущества,
• международная поисковая оптимизация,
• развитие бренда.

Многоязычный веб-сайт может изменить бизнес и помочь продукту стать более конкурентоспособным на мировом рынке.

@nuxtjs/i18n

Для реализации мультиязычности мы будем использовать модуль @nuxtjs/i18n, который предоставляет нам следующие возможности:

• автоматическая генерация маршрутов и создание настраиваемых путей,
• поисковая оптимизация,
• “ленивая” загрузка переводов для отдельных языков,
• автоматическое определение языка браузера пользователя и перенаправление на нужную версию сайта,
• разные доменные имена для разных языков (в данном приложении мы не будем это использовать),
• сохранение текущей локали и переводов с помощью Vuex (в данном приложении мы не будем это использовать).

Для начала установим модуль:

npm i nuxt-i18n

Теперь создадим в корне проекта директорию locales. Эта директория будет содержать файл конфигурации nuxt-i18n, а также файлы с переводами.

Создадим файл конфигурации i18n-nuxt-config.js со следующим содержимым:

export const i18n = {   locales: [     {       code: 'en',       iso: 'en-US',       name: 'EN',       file: 'en.js',     },     {       code: 'ru',       iso: 'ru-RU',       name: 'RU',       file: 'ru.js',     },   ],   lazy: true,   langDir: '/locales/',   defaultLocale: 'en',   detectBrowserLanguage: {     alwaysRedirect: true,     fallbackLocale: 'en',     onlyOnRoot: true,   }, }

Здесь мы указываем ряд опций, которые должны быть переданы в явном виде или отличаться от значений по умолчанию. Полный список доступных опций можно найти по ссылке.

Давайте рассмотрим некоторые из них поподробнее:

1. locales — список языков, которые будут реализованы в нашем приложении. Как вы видите, в качестве второго языка был выбран русский (RU), но можно также указать любой другой язык или несколько языков. Обратите внимание, что в каждом элементе массива указано свойство file. Это обязательное свойство, если мы хотим использовать “ленивую” загрузку переводов.

2. lazy — признак, что мы хотим использовать “ленивую” загрузку переводов. В этом случае после открытия пользователем нашего приложения он скачает с сервера только файл с переводом для установленного у него языка, что положительно скажется на скорости загрузки сайта.

3. langDir — эта директория будет использоваться как корневая при поиске файлов с переводами.

4. defaultLocale — локаль, которая будет использоваться по умолчанию. Для этого языка в строке URL не будет использован префикс, а для других — будет.

То есть в нашем случае для английского языка адрес в браузере будет выглядеть следующим образом: https://nuxt-blog.hostman.site, а для русского так: https://nuxt-blog.hostman.site/ru.

5. detectBrowserLanguage — с помощью этих опций мы говорим приложению использовать при первом заходе пользователя в приложение язык, установленный в браузер, чтобы отобразить сайт на нужном языке, а если этот язык в приложении не реализован, то открыть английскую версию.

Отлично! Мы разобрались с опциями и готовы двигаться дальше.

Нам нужно создать файлы en.js и ru.js, которые будут содержать переводы на эти языки. Файлы имеют одинаковую структуру и отличаются только переводом, поэтому достаточно рассмотреть подробно один из них. Например, en.js:

export default {   home: {     title: 'Nuxt blog',     subtitle: 'The best blog you can find on the global internet',     postCount: 'Total posts: ',   },   post: {     linkHome: 'Home',   },   footer: {     feedback: 'Contact us',     copyright: 'All rights reserved',   }, }

Как можно заметить, здесь мы сгруппировали переводы по логическим группам, что позволит в дальнейшем удобно обращаться к нужным свойствам.

В нашем случае используем всего один файл для одного языка, но для больших приложений удобно создавать отдельную директорию для каждого языка и разделять перевод на несколько файлов по определенному принципу. Например, одна страница — один файл, объединяя затем все эти файлы в один объект с помощью стандартного механизма импортов.

Итоговая структура директории locales должна иметь следующий вид:

locales/ -- i18n-nuxt-config.js -- en.js -- ru.js

Директория locales на Github.

Всё, что нам остаётся сделать, — добавить информацию об этом модуле в секцию modules в файле nuxt.config.js:

{   modules: [     ['nuxt-i18n', i18n],   ] }

Не забудьте добавить в начало файла импорт переменной i18n, которую мы использовали выше, с нашей конфигурации:

import { i18n } from './locales/i18n-nuxt-config'

Использование в компонентах

Мы подготовили переводы для разных языков, и теперь самое время начать использовать их в наших компонентах.

Модуль @nuxtjs/i18n добавляет к экземпляру Vue несколько функций (будут доступны из контекста this). Мы будем использовать следующие:

1. $t(<key>) — с помощью этой функции мы можем получить доступ к любому свойству перевода, указанному в наших файлах en и ru. Например, $t('home.title').

2. localePath(<path>, ...) — возвращает локализованный URL-адрес для запрашиваемой страницы. Первым параметром может быть либо путь, либо имя маршрута, либо объект для более сложных маршрутов. Узнать подробнее об этой функции и посмотреть примеры её использования можно здесь.

Поскольку использование во всех компонентах будет однотипное, то для примера рассмотрим компонент LinkToHome, а остальные можно рассмотреть самостоятельно на Github.

Шаблон компонента LinkToHome после изменений будет выглядеть следующим образом:

<template lang="pug"> section.section   .content     nuxt-link.lth__link(       class="primary"       :to="localePath('/')"     )       img.lth__link-icon(         src="~/assets/icons/home.svg"         alt="icon-home"       )       | {{ $t('post.linkHome') }} </template>

Мы заменили прямое указание маршрута в nuxt-link на вызов функции localePath, передав в качестве параметра нужный нам маршрут. Точно так же прямое указание названия ссылки мы заменили на вызов функции $t, передав параметром нужное нам свойство.

→ Компонент LinkToHome на Github

Также изменения были выполнены в компонентах DbFooter, PostCard, PostList, HomePage.

Посты на разных языках

Вы, наверное, обратили внимание, что в файлах en.js и ru.js не было никакой информации о постах, которые мы храним в отдельных файлах в директории content/posts. Настало время поговорить об этом!

До этого в файле posts.ts мы хранили и экспортировали информацию о наших постах следующим образом:

export default [     {     id: 1,       title: 'Post 1',       desc:         'A short description of the post to keep the user interested.' +         ' Description can be of different lengths, blocks are aligned' +         ' to the height of the block with the longest description',       file: 'content/posts/1.md',     img: 'assets/images/1.svg',   },    ...  ] as Post[]

Но в таком варианте мы не можем указывать разные файлы и метаинформацию для одного поста на разных языках. Исправим это и приведём наш файл к следующему виду:

const en = [     {     id: 1,       title: 'Post 1',       desc:         'A short description of the post to keep the user interested.' +         ' Description can be of different lengths, blocks are aligned' +         ' to the height of the block with the longest description',       file: 'content/posts/1.md',     img: 'assets/images/1.svg',   },    ...  ] as Post[]  const ru = [     {     id: 1,     title: 'Пост 1',     desc:       'Краткое описание поста, чтобы заинтересовать пользователя.' +       ' Описание может быть разной длины, блоки выровнены' +       ' по высоте блока с самым длинным описанием',     file: 'content/posts/1.md',     img: 'assets/images/1.svg',   },    ...  ] as Post[]  export default { en, ru }

Теперь у нас есть две переменных en и ru, каждая из которых хранит собственный список постов для своего языка.

→ Файл на Github

В данном случае для обоих языков будут использованы одни и те же файлы, так как это демонстрационное приложение, и здесь мы хотим показать сам подход к реализации. В реальном приложении файлы, конечно, должны быть разные.

Давайте теперь немного изменим реализацию компонентов, где используется эта информация.

Компонент PostList

В компоненте PostList требуется заменить свойство posts объекта data на вычисляемое свойство с таким же названием, которое будет выглядеть следующим образом:

 computed: {     posts(): Post[] {       const { locale } = (this as any).$i18n        return posts[locale as 'en' | 'ru']     },   },

→ Компонент на Github

Отдельная страница поста post/_id

На отдельной странице поста реализовано вычисляемое свойство currentPost, давайте немного изменим его, чтобы оно выглядело следующим образом:

 computed: {     currentPost(): Post | undefined {       const { locale } = (this as any).$i18n        return posts[locale as 'en' | 'ru'].find(         (post: Post) => post.id === this.currentId       )     },   },

→ Файл на Github

Теперь наши посты на всех страницах будут корректно загружаться в зависимости от выбранного языка.

В данном случае мы не учитываем сценарий, когда пост с конкретным id существует только на одном языке, так как наше приложение демонстрационное и мы можем этим пренебречь. Не забудьте учесть этот сценарий, если будете реализовывать подобную логику в реальном приложении.

Переключатель языка

На этом этапе реализуем переключатель, который позволит выбирать нужный нам язык на сайте.

В прошлой части мы создали компонент AppOptions, который служит обёрткой для переключателей темы и языка.

Давайте создадим компонент SwitcherLang в директории components/AppOptions и приведём шаблон компонента AppOptions к следующему виду:

<template lang="pug"> section.section   .content     .app-options       switcher-lang       switcher-color-mode </template>

Взглянем на шаблон компонента SwitcherLang:

<template lang="pug"> select(   v-model="selected"   class="body3 medium"   @change="changeLocale" )   option(     v-for="locale in $i18n.locales"     :key="locale.code"     :value="locale.code"   ) {{ locale.name }} </template>

Как вы видите, мы просто реализуем стандартный select, в котором показываем доступные в приложении языки. При изменении значения в этом select мы будем вызывать метод changeLocale.

Далее посмотрим на секцию script:

<script lang="ts"> import Vue from 'vue'  export default Vue.extend({   name: 'SwitcherLang',    data: () => ({     selected: '' as 'en' | 'ru',   }),    created() {     this.selected = (this as any).$i18n.locale   },    methods: {     changeLocale() {       const switchPath = (this as any).switchLocalePath(this.selected)       this.$router.push(switchPath)     },   }, }) </script>

В методе changeLocale мы используем ещё одну функцию, которую предоставляет нам модуль @nuxt/i18n, — switchLocalePath. Эта функция возвращает ссылку на текущую страницу на выбранном языке.

Также обратите внимание, что мы храним значение выбранного языка в локальной переменной selected и при создании экземпляра Vue в хуке created синхронизируем её значение с глобальным значением, которое хранится в $i18n.

→ Компонент на Github

Заключение

Что у нас получилось:

• дизайн,
• Github,
• демо.

Пишите в комментариях, если будут вопросы или непонятные моменты. До встречи в следующей части!