Как создавать многоязычные статические страницы без фреймворков

Время от времени мы сталкиваемся с необходимостью создания веб-сайтов без фреймворков, таких как Angular, Vue.js или React. Возможно, для развлечения, мы новички или просто хотим чего-то предельно простого.

В моем случае я начал создавать свой личный сайт несколько лет назад. В те дни я не знал Angular и был немного не в состоянии поддерживать все, что мне было нужно. Я не считал себя front-end разработчиком. Это было скорее моим хобби.

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

У меня есть два файла, один для английского, другой для испанского, где я храню переводы в JSON в виде констант. Если вам интересно, почему я не храню только JSON, то у меня было несколько проблем с последующим использованием файлов. Я получил несколько ошибок, и большинство решений было только для Node.js.

lang-en.js

const translations = {
    "telephone": "Telephone",
    "email": "Email",
    "contactMe": "Contact me"
};

lang-es.js

const translations = {
    "telephone": "Teléfono",
    "email": "Email",
    "contactMe": "Contáctame"
};

Следующий скрипт предназначен для чтения скриптов:

get-script.js

const getScript = url => new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;

    script.onerror = reject;

    script.onload = script.onreadystatechange = function() {
      const loadState = this.readyState;

      if (loadState && loadState !== 'loaded' && loadState !== 'complete') return;

      script.onload = script.onreadystatechange = null;

      resolve();
    }

    document.head.appendChild(script);
});

И последний скрипт предназначен для установки значений в вашем HTML:

translations.js

let lang = 'en';

let nLang = (navigator.languages
    ? navigator.languages[0]
    : (navigator.language || navigator.userLanguage)).split('-')[0];

let supportedLang = ['en', 'es'];

lang = supportedLang.includes(nLang) ? nLang : lang;

getScript(`lang-${lang}.js`)
.then(() => {
    document.querySelectorAll('[data-translation]').forEach(item => {
        item.innerHTML = translations[`${item.dataset.translation}`];
    });
})
.catch((e) => {
  console.error(e);
});

Итак, как вы используете конфигурацию в HTML? Вы определяете атрибут data-* под названием data-translation со значением, которое вы ожидаете получить из «JSON», вот так:

<script src="get-script.js"></script>
<script src="translations.js"></script>

<p data-translation="contactMe"></p>
<p data-translation="telephone"></p>
<p data-translation="email"></p>

И это все. Теперь вы можете создавать свои статические многоязычные страницы без фреймворков.

Следите за мной на:

LinkedIn	YouTube	Instagram	Киберпророки	Делимся своими историями