Пошаговое руководство для начинающих

Возможность изменить тему вашего веб-сайта значительно повышает удобство работы пользователей (т. е. дает этим бедным глазам темную тему). А возможность изменять переводы может значительно расширить вашу пользовательскую базу. Существует множество библиотек JavaScript с множеством решений, но они могут быть довольно сложными или запутанными, особенно для новых разработчиков.

Если вы зашли так далеко, вы, вероятно, видели несколько библиотек для локализации (переводов) и выбора нескольких тем CSS (включая довольно много статей на Medium). Но есть много причин, по которым вы можете захотеть написать свой собственный код для управления этими функциями. Может быть, вы не хотите слишком много абстракций в своем коде, или вам нужна большая гибкость и прозрачность, чтобы упростить настройку, или вы просто хотите знать, как: здесь мы создадим простое приложение React с несколькими языками и темами, шаг за шагом (без внешних библиотек, кроме React и Bootstrap).

Предпосылки

  • Базовые знания React
  • npm установлен и добавлен к вашему системному пути

Предварительный просмотр

Полный код можно найти на GitHub здесь

1. Создайте приложение React (необязательно)

(Если у вас уже есть кодовая база React с CSS, перейдите к шагу 4)

Самый простой и быстрый способ запустить полнофункциональное приложение React всего за несколько секунд — это Create-React-App.

2. Начальная загрузка (необязательно)

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

  • Скачайте скомпилированный CSS с основного сайта (bootstrap.css)
  • Создайте новую папку под общим названием «темы» и вставьте туда bootstrap.css.
  • Для запуска Bootstrap требуется этот файл CSS и некоторый JavaScript, который мы можем установить как зависимости npm с помощью этих команд (запускаемых из корневого каталога):
npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

3. Дополнительные темы (необязательно)

Вы также можете получить больше тем из разных мест (или написать их самостоятельно)

  • Bootswatch имеет множество (бесплатных) тем Bootstrap для использования
  • Загрузите и включите файл CSS для каждой темы в папку тем.

4. Локальное хранилище

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

  • Создайте новый файл в src с именем storage.js и включите следующий код (включая методы для получения и установки LocalStorage, а также установки значений по умолчанию для первого доступа):

5. Обновите App.js и index.html для динамических тем.

Далее в App.js мы будем:

  • Импорт методов LocalStorage и Bootstrap
  • Добавить тему в состояние со значением по умолчанию из LocalStorage
  • Добавьте функцию changeTheme для обновления темы в LocalStorage и обновления страницы (обновление необходимо для правильного переопределения предыдущих стилей)
  • Добавьте раскрывающийся список тем (со значениями, соответствующими именам файлов из папки стилей) и несколько кнопок для отображения разных классов.

Затем мы обновим файл index.html с помощью этого скрипта, который добавит правильный файл CSS темы в «шапку» приложения на основе темы, сохраненной в LocalStorage:

Вы можете повторно запустить приложение сейчас (запуск npm) и использовать раскрывающийся список для динамического изменения тем!

6. Переводы

Далее мы создадим несколько файлов с разными переводами.

  • Создайте папку «translations» в src и создайте файл en.js. Включите любые переводы на английский язык, которые вам нужны, а затем создайте другие файлы с переведенными значениями (обратите внимание, что значения языкового перевода остаются одинаковыми в нескольких файлах перевода, но остальные значения меняются).

7. Обновите App.js для динамических переводов

Теперь мы добавим еще один раскрывающийся список для смены языка, включим необходимые методы для динамического изменения файла, на который ссылаются (аналогично тому, что мы сделали для динамических стилей), и изменим весь жестко закодированный текст, чтобы использовать объект перевода:

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

Расширенный (необязательно)

Если вы не знакомы с «Syntactically Awesome Style Sheets», я настоятельно рекомендую ознакомиться с ним для написания собственных стилей.

  • Вы можете легко добавить поддержку SASS, запустив:
npm install node-sass --save
  • Теперь вы можете добавлять файлы с расширением .scss и импортировать их в свои компоненты.