Руководство по созданию мультиязычного сайта с Nuxt.js

Руководство по созданию мультиязычного сайта с Nuxt.js

От автора: это руководство предназначено для начинающих и профессионалов, которые хотят создать полноценный многоязычный веб-сайт с помощью Nuxt.js. С использованием этого пошагового руководства вы получите динамический веб-сайт Nuxt.js, работающий на сервере now, с использованием API для многоязычного контента.

Если вы спешите, то можете скачать весь проект (nuxtblok.now.sh) на Github.

Настройка среды

Что вам потребуется:

Базовое понимание NuxtJs

VueJs и их CLI

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

NodeJS

NPM

NPX

CLI now.sh для хостинга

Аккаунт на Storyblok.com для управления контентом

Если это еще не сделано, установите NodeJs, NPM и NPX. Начнем с инициализации проекта с помощью начального шаблона nuxt.js.

Nuxt.js по умолчанию запускает свой сервер на порту 3000, поэтому после запуска npm запустите dev и откройте браузер по адресу http://localhost:3000.

Руководство по созданию мультиязычного сайта с Nuxt.js

Поскольку мы будем использовать SCSS для организации CSS, нам также нужно установить sass-загрузчик.

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

Построение каркаса

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

Глобальный SCSS в Nuxt.js

На шаге 1 мы установили загрузчик SCSS, поэтому давайте создадим некоторые глобальные стили и определим переменные scss. Мы создадим папку для стилизации общих HTML-тегов assets/scss/elements/ и другую папку для служебного компонента assets/scss/components/.

Создайте файл assets/scss/styles.scss и добавьте следующий в него код.

Вместо того, чтобы помещать стили всех HTML элементов в один файл, я предпочитаю создавать отдельные файлы, чтобы сделать проект структурированным и масштабируемым. Создайте файл assets/scss/elements/body.scss для определения базовых стилей шрифтов.

В папке components мы управляем глобальными компонентами css и вспомогательными классами. Создайте файл assets/scss/components/util.scss для определения глобальных служебных классов.

Добавление Google font в Nuxt.js

В файле body.scss мы определили Zilla Slab как шрифт. Поскольку это не системный шрифт, мы должны добавить его в раздел заголовка документа. Здесь в игру вступает файл конфигурации Nuxt.js. Откройте nuxt.config.js и добавьте таблицу стилей шрифта в раздел head.

Определение макета по умолчанию

Теперь, когда у нас есть SCSS, нам нужно добавить его в проект. Убедитесь, что вы установили загрузчик sass на первом этапе и замените код в layouts/default.vue на следующий.

Вы увидите сообщение об ошибке, гласящее, что компоненты TopHeader.vue и BottomFooter.vue еще не существуют. Итак, давайте создадим их.

Создание компонента заголовка

Обратите внимание на атрибут lang=»scss» в теге style. Он позволяет использовать SCSS в компонентах Vue.js.

Создание компонента футера

Добавьте в папку ./components файл BottomFooter.vue.

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

Руководство по созданию мультиязычного сайта с Nuxt.js

Теперь давайте передадим это в Git. Смотрите для справки мой коммит GitHub.

Создание главной страницы

Установите модуль Nuxt.js Storyblok. Модуль Storyblok установит $storyapi и $storyblok в экземпляр Vue.

После установки модуля вам необходимо инициализировать его токеном предварительного просмотра вашего пространства Storyblok. Зарегистрируйтесь или войдите на app.storyblok.com и создайте новое пространство. Добавьте следующее в файл nuxt.config.js и замените PREVIEW_TOKEN на токен предварительного просмотра.

Обновите компонент домашней страницы

Теперь замените содержимое по умолчанию pages/index.vue следующим:

Метод asyncData загрузит JSON, который определяет, какие компоненты мы будем отображать на домашней странице.

Создание компонентов домашней страницы

Чтобы отобразить полную домашнюю страницу, нам нужно создать несколько компонентов. Добавьте файл components.js в папку plugins.

Nuxt.js не выбирает файлы в плагинах автоматически, поэтому нам нужно добавить их components.js в nuxt.config.js.

Затем создайте компоненты Vue внутри папки components.

Page.vue

Teaser.vue

Grid.vue

Feature.vue

При перезагрузке http://localhost:3000/ вы должны увидеть следующее.

Руководство по созданию мультиязычного сайта с Nuxt.js

Создайте свой первый блок в Storyblok

Мы только что загрузили демонстрационный контент Storyblok, и теперь мы расширим компонент тизера интерактивными слайдами. Для этого начните с подключения среды к композитору Storyblok и вставьте хост разработки localhost:3000.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

ВАЖНО: после вставки хоста вам нужно изменить поле реального пути (см. следующий шаг), в противном случае вы получите страницу 404.

Руководство по созданию мультиязычного сайта с Nuxt.js

Изменение поля реального пути

Теперь вы должны увидеть свой сайт на предварительном просмотре. Но он покажет страницу 404, потому что Storyblok по умолчанию использует путь к домашней странице /home. Чтобы это изменить, вам нужно будет перейти на вкладку Конфигурация и указать поле Реальный путь — / .

Руководство по созданию мультиязычного сайта с Nuxt.js

Итак, давайте определим схему нового блока слайдов компонента /. После добавления схемы и содержимого в Storyblok нам нужно добавить в проект компонент Vue.js slide. Создайте файл components/Slide.vue со следующим содержимым.

Добавьте новый компонент в файл component.js.

Конечно, мы не хотим отображать все слайды одновременно. Итак, давайте расширим логику Teaser.vue , чтобы показать точечную навигацию. Вы можете использовать любой плагин слайдера Vue.js, чтобы создать более продвинутый слайдер, но мы сделаем это просто.

После сохранения у вас должен быть следующий результат.

Руководство по созданию мультиязычного сайта с Nuxt.js

Расширение раздела функций

Раздел функций в настоящее время содержит только заголовок. Теперь мы расширим его текстом описания и иконками. Нажмите на блок функций и добавьте поля description (с типом textarea) и icon (с типом изображения), нажав Определить схему.

Руководство по созданию мультиязычного сайта с Nuxt.js

Откройте компонент Feature (components/Feature.vue) и добавьте в него новые поля, а также некоторые базовые стили CSS.

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

Руководство по созданию мультиязычного сайта с Nuxt.js

Создание меню навигации

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

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

Руководство по созданию мультиязычного сайта с Nuxt.js

Создание элемента контента глобальных настроек

Внутри папки en мы создаем элемент контента Settings с новым типом контента settings. Это будет элемент контента, в который мы помещаем элементы навигации и другие глобальные конфигурации сайта.

Руководство по созданию мультиязычного сайта с Nuxt.js

Измените реальный путь на / и создайте схему для основной навигации, определяющую ключ main_navi с типом Blocks.
Добавьте блок для элемента навигации с типом name — Text и типом link — Link. В конце элемент контента Settings должен выглядеть следующим образом:

Руководство по созданию мультиязычного сайта с Nuxt.js

Получение глобальных настроек в хранилище Vuex

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

После отправки действия loadSettings в middleware у нас будут доступны элементы навигации по адресу $store.state.settings.main_navi.

Добавление middleware

Middleware в Nuxt.js позволяет определить функцию, которая запускается перед отображением страницы. Функция может быть асинхронной и возвращать промис, поэтому она идеально подходит для загрузки настроек из API.

Кроме того, middleware должно быть зарегистрировано в nuxt.config.js.

Доступ к данным в компоненте TopHeader

Теперь в $store.state.settings.main_navi мы можем легко получить доступ к элементам навигации и циклически перемещать их, чтобы отобразить в components/TopHeader.vue.

Перезагрузив страницу, мы должны увидеть заголовок навигации с настраиваемыми элементами навигации от Storyblok.

Руководство по созданию мультиязычного сайта с Nuxt.js

Создание раздела блога

Общей задачей при создании веб-сайта является разработка обзорной страницы коллекций, таких как новости, сообщения в блогах или товары. В нашем примере мы создадим простой блог. В Nuxt.js вы можете определить динамические маршруты, создавая папки с добавлением подчеркивания «_», и Nuxt автоматически преобразует их в маршруты Vue.js.

Окончательный URL должен выглядеть следующим образом /:language/blog/:slug, поэтому нам нужно создать следующую структуру папок.

Добавление страницы с описанием блога

Мы начнем со страницы описания блога pages/_language/blog/_slug.vue, на которой будем извлекать контент из API, а затем выведем запись блога через markdown с использованием в качестве парсера marked. Итак, сначала нам нужно установить парсер markdown.

Затем мы создадим файл pages/_language/blog/_slug.vue для динамического маршрута постов в блоге.

Создание страницы обзора

Чтобы составить список записей в блоге, мы создадим маршрут, /:language/blog, просто сохранив файл index.vue в папке blog.

API Storyblok может перечислять все элементы содержимого определенной папки с параметром starts_with. Количество возвращаемых элементов содержимого по умолчанию составляет 25, но вы можете изменить это с помощью параметра per_page и перейти к другим страницам с помощью параметра page.

Создание папки с содержимым блога

После создания компонентов Vue.js для отображения блога нам нужно создать в Storyblok новую папку для создания страниц блога. Создайте папку en/blog и выберите для этой папки тип содержимого по умолчанию blog.

Руководство по созданию мультиязычного сайта с Nuxt.js

Создание статьи в блоге

Когда вы заходите в папку блога и создаете новый элемент контента, blog автоматически выбирается в качестве типа контента. Добавьте поля схемы intro (Textarea), name (Text) и body (Markdown) и создайте некоторый демонстрационный контент.

Руководство по созданию мультиязычного сайта с Nuxt.js

В обзоре вы должны увидеть список статей блога.

Руководство по созданию мультиязычного сайта с Nuxt.js

Создание карты сайта

Для создания карты сайта или дерева навигации всех страниц с помощью Nuxt.js мы будем вызывать API ссылок Storyblok. API включает отношения родитель-потомок через parent_id, и поэтому нам просто нужно сгенерировать дерево, используя вычисляемое свойство.

Для карты сайта в виде дерева с бесконечными узлами мы создаем компонент SitemapItem.vue и включаем его при циклическом переходе по дочерним элементам дерева.

Не забудьте добавить новый компонент SitemapItem в файл components.js.

В конце у нас должна получиться следующая страница.

Руководство по созданию мультиязычного сайта с Nuxt.js

Добавление другого языка

Со Storyblok у вас есть два варианта создания многоязычных проектов — перевод на уровне поля и перевод с несколькими деревьями. Перевод на уровне поля — хорошее решение, если большая часть контента переведена. Подумайте об использовании перевода с несколькими деревьями, если дерево содержимого отличается на каждом языке. Если вы не уверены, что выбрать, прочитайте наше руководство о i18n.

Руководство по созданию мультиязычного сайта с Nuxt.js

Разворачивание в реальной среде

Теперь пришло время показать ваш проект миру. Для простого, развертывание с нулевой настройкой вы можете использовать now. После того, как вы скачали и установили их настольное приложение, вы можете развернуть Nuxt.js с помощью одной команды.

Вы получите уникальный URL-адрес, который затем можно будет связать через now alias со своим пользовательским доменом.

Заключение

Создать полноценный веб-сайт с помощью Nuxt.js невероятно просто, Nuxt.js обладает великолепной экосистемой. Мне очень нравится, как он абстрагирует общие задачи, которые вы обычно выполняете в конфигурации Webpack. Это немного похоже на Ruby on Rails, где соглашения идут поверх конфигурации. Для больших проектов эти соглашения облегчают подбор новых членов команды и делают проекты более удобными в обслуживании.

Источник: https://dev.to

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: