Как организовать l10n элементов UI на странице с помощью javascript?

Question

[Роман Кофф]

На странице в теге HTML прописан язык сайта.

Как правильно организовать локализацию элементов пользовательского интерфейса (подписи кнопок, всплывающие подсказки элементов управления и т.д.) на основе значения атрибута lang тега HTML?

Каким образом лучше хранить языковые ресурсы (для js) для таких элементов (желательно в виде отдельных файлов на локаль)?

Answer 1

[MoralGray]

Если нету бека, для хранения используй json-server. Там в формате .json опишешь для разных языков тексты.

Подтягивай языки жсом.
Храни текущий язык и саму дату.

У элементов в html, где будет выводиться текст относительно языка дай всем дату аттрибут, что-то вроде: data-lang-key="some-key"

В жсе сделай метод, который находит все эти даты атрибуты.
По этим ключам сможешь найти текст из джсон файла.
Ну и сможешь там же вставить этот текст. Т.к. текст уже есть и сам элемент тоже.

Comments

[Роман Кофф]

Разработка бека есть, можно реализовать любой функционал...
Про кодирование с помощью data- понял. Такой вариант подойдет. Достаточно гибко.
Осталось решить, как проще организовать ресурсные файлы.
(общая идея понятна)

[MoralGray]

Осталось решить, как проще организовать ресурсные файлы.

Возвращать джосон в нужном формате?
Я бы так сделал.

"langs": {
      "en": {
        "page-home": {
          "title": "Home",
          "title_sub": "Home Sub"
        },
        "blank": {
          "title": "Blank",
          "title_sub": "Blank sub"
        }
      },
      "ru": {
        "page-home": {
          "title": "Хоум",
          "title_sub": "Хоум саб"
        },
        "page-blank": {
          "title": "Бланк",
          "title_sub": "Бланк саб"
        }
      }
    },