Создание многоязычного статического веб-сайта: пошаговое руководство

Многоязычный веб-сайт — это веб-сайт, который предлагает контент более чем на одном языке. Это может быть отличным способом охватить более широкую аудиторию и улучшить SEO вашего сайта.

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

Настройка основ

Начнем с того, что заложим основу для нашего многоязычного веб-сайта. В HTML-файл обязательно включите соответствующий языковой атрибут в тег <html>, чтобы указать язык по умолчанию. Например, чтобы установить английский в качестве языка по умолчанию:

<html lang="en">
<!-- Your website content here -->
</html>

Кроме того, включите необходимые теги <meta> для кодировки символов и настроек области просмотра:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Other meta tags and stylesheets -->
</head>

Создание параметров языка

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

<nav>
    <ul>
        <li><a href="index.html" onclick="changeLanguage('en')">English</a></li>
        <li><a href="index.html" onclick="changeLanguage('ar')">عربي</a></li>
    </ul>
</nav>

Обновление основного контента

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

В вашем HTML-коде вы структурировали основной контент следующим образом:

<main>
    <h1 data-i18n="welcome_message"></h1>
    <p data-i18n="about_us"></p>
</main>

Здесь атрибут data-i18n в тегах <h1> и <p> помечает эти элементы для контента, зависящего от языка. Чтобы эти элементы отображали соответствующие переводы, приведенный позже код JavaScript сработает.

Языковые данные и файлы JSON

Для каждого языка создайте файл JSON для хранения переводов различных элементов на вашем веб-сайте. Например, у вас может быть файл en.json для английского языка и файл ar.json для арабского языка. Вот упрощенный пример структуры этих файлов:

/* en.json */
{
    "welcome_message": "Welcome to Our Website!",
    "about_us": "Learn more about us...",
    "footer_text": "© 2023 All rights reserved."
}

/* ar.json */
{
    "welcome_message": "مرحبًا بكم في موقعنا!",
    "about_us": "اعرف المزيد عنا...",
    "footer_text": "© 2023 جميع الحقوق محفوظة."
}

Динамическое обновление контента

Для динамического обновления контента на основе выбранного языка мы будем использовать JavaScript. Вот как вы можете этого добиться:

// Function to update content based on selected language
function updateContent(langData) {
    document.querySelectorAll('[data-i18n]').forEach(element => {
        const key = element.getAttribute('data-i18n');
        element.textContent = langData[key];
    });
}

Функция updateContent перебирает элементы с атрибутом data-i18n и обновляет их текстовое содержимое, используя соответствующий перевод из языковых данных.

Настройка языковых предпочтений

Чтобы запомнить языковые предпочтения пользователя, мы будем использовать localStorage API. Это позволяет нам хранить и извлекать данные локально в браузере пользователя:

// Function to set the language preference
function setLanguagePreference(lang) {
    localStorage.setItem('language', lang);
    location.reload();
}

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

Получение языковых данных

Чтобы ваш многоязычный статический веб-сайт работал, вам нужен способ получения содержимого для конкретного языка, хранящегося в ваших файлах JSON. Здесь в игру вступает функция fetchLanguageData.

// Function to fetch language data
async function fetchLanguageData(lang) {
    const response = await fetch(`languages/${lang}.json`);
    return response.json();
}

Эта функция принимает выбранный язык в качестве аргумента и создает URL-адрес для получения соответствующего файла JSON из каталога languages/. Когда делается запрос fetch, он возвращает обещание, которое разрешается в объект Response. Затем метод response.json() используется для анализа содержимого JSON из объекта Response.

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

Изменение языка дисплея

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

// Function to change language
async function changeLanguage(lang) {
    await setLanguagePreference(lang);
    
    const langData = await fetchLanguageData(lang);
    updateContent(langData);
    toggleArabicStylesheet(lang); // Toggle Arabic stylesheet
}

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

await setLanguagePreference(lang): Эта строка сначала устанавливает языковые предпочтения пользователя с помощью функции setLanguagePreference, которую мы обсуждали ранее. Сохранив это предпочтение в localStorage, вы гарантируете, что выбранный пользователем язык сохранится даже после того, как он покинет веб-сайт.
const langData = await fetchLanguageData(lang): Функция fetchLanguageData используется для получения содержимого для выбранного языка. Этот контент, хранящийся в файлах JSON, включает в себя переводы различных элементов на вашем веб-сайте.

Связывание таблиц стилей и JavaScript

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

Связывание таблиц стилей

В разделе <head> у вас есть ссылка на основную таблицу стилей:

<link rel="stylesheet" href="./assets/css/style.css">

Эта строка соединяет ваш файл HTML с файлом style.css, расположенным в каталоге assets/css/. Эта таблица стилей, вероятно, содержит основные стили для макета и внешнего вида вашего веб-сайта.

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

Связывание JavaScript

Точно так же ваш файл JavaScript связан в конце раздела <body>:

<script src="assets/js/script.js"></script>

Эта строка соединяет ваш HTML-код с файлом script.js, расположенным в каталоге assets/js/. Этот файл JavaScript содержит функции, которые делают возможными ваши многоязычные функции и обновления содержимого.

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

Динамическое переключение таблиц стилей

Разные языки часто требуют разных стилей для обеспечения правильной типографики и макета. Давайте создадим функцию для переключения арабской таблицы стилей на основе выбора языка:

// Function to toggle Arabic stylesheet based on language selection
function toggleArabicStylesheet(lang) {
    const head = document.querySelector('head');
    const link = document.querySelector('#styles-link');

    if (link) {
        head.removeChild(link); // Remove the old stylesheet link
    } else if (lang === 'ar') {
        const newLink = document.createElement('link');
        newLink.id = 'styles-link';
        newLink.rel = 'stylesheet';
        newLink.href = './assets/css/style-ar.css'; // Path to Arabic stylesheet
        head.appendChild(newLink);
    }
}

Примечание. Здесь я создал еще одну таблицу стилей для арабского языка «style-ar.css».

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

Инициализация страницы

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

// Call updateContent() on page load
window.addEventListener('DOMContentLoaded', async () => {
    const userPreferredLanguage = localStorage.getItem('language') || 'en';
    const langData = await fetchLanguageData(userPreferredLanguage);
    updateContent(langData);
    toggleArabicStylesheet(userPreferredLanguage);
});

Событие DOMContentLoaded запускает код после полной загрузки HTML-содержимого страницы. Он извлекает предпочтительный язык пользователя из localStorage, обновляет содержимое и соответствующим образом переключает таблицу стилей.

Весь проект можно найти на Github Здесь.

Заключение

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

Создание многоязычного статического веб-сайта требует внимательного отношения к деталям и глубокого понимания HTML, CSS и JavaScript. Тем не менее, усилия того стоят, поскольку вы повышаете доступность и вовлеченность пользователей из разных языков.