Глава 10: Сайт для всего мира. Многоязычность.

10.1 Простой метод: флажки-переключатели в шапке

Самый понятный для пользователя способ — разместить в шапке сайта флажки или надписи "EN", "RU", "DE" для переключения языка.

Шаг 1: Создаём структуру папок для языков.

cd /var/www/html
sudo mkdir -p en ru de

Шаг 2: Создаём главные страницы на разных языках. Скопируй основную страницу в каждую папку:

sudo cp index.html en/
sudo cp index.html ru/
sudo cp index.html de/

Теперь отредактируй каждую копию, переводя контент на соответствующий язык. Оставь структуру и CSS-классы неизменными!

Шаг 3: Создаём переключатель языков в шапке. Открой index.html (и другие HTML-файлы в корне) и добавь в шапку, рядом с меню:

<div class="language-switcher">
    <a href="/en/" class="lang-btn">EN</a>
    <a href="/ru/" class="lang-btn active">RU</a>
    <a href="/de/" class="lang-btn">DE</a>
</div>

Для страниц внутри языковых папок пути должны быть абсолютными:

<a href="/en/" class="lang-btn">EN</a>
<a href="/ru/" class="lang-btn">RU</a>
<a href="/de/" class="lang-btn">DE</a>

Шаг 4: Стилизуем переключатель. Добавь в style.css:

10.2 Умное перенаправление: определяем язык браузера

Хороший тон — при первом заходе на сайт автоматически определить язык браузера пользователя и показать ему подходящую версию.

Это можно сделать с помощью немного PHP (самый простой способ) или JavaScript.

Способ: Простой PHP-скрипт для определения языка.

  1. Установи PHP на сервер:

  2. В корне сайта создай файл index.php вместо index.html:

  3. Вставь код:

  4. Теперь при заходе на главную страницу (https://твой-домен.ру/) пользователь будет автоматически перенаправлен на /ru/, /en/ или /de/ в зависимости от языка его браузера.

10.3 Поддержка SEO для разных языков

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

В каждую страницу добавь в <head>:

Создай карту сайта sitemap.xml (можно сгенерировать через онлайн-генератор) и включи туда все языковые версии.

10.4 Продвинутая настройка: единый движок с переводами

Для серьёзных проектов лучше использовать единую структуру, где текст хранится в отдельных файлах-словарях, а страницы формируются динамически. Это можно сделать с помощью PHP или статических генераторов сайтов (Hugo, Jekyll), но это тема для отдельной книги.

Простой пример структуры:

В файлах типа ru.php:


Практическое задание к главе 10:

  1. Обязательно: Получи SSL-сертификат через Certbot для своего домена (или DuckDNS). Убедись, что работает перенаправление HTTP → HTTPS.

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

  3. Настрой автоматическое определение языка с помощью PHP-скрипта index.php в корне сайта.

  4. Проверь SEO-разметку: Убедись, что на всех языковых версиях правильно указаны html lang="..." и теги hreflang.

Вывод главы: Ты прошёл полный путь от локального тестового сервера до полноценного сайта в интернете. Теперь твой сайт:

  1. Безопасен: Работает по HTTPS с автоматически обновляемым SSL-сертификатом.

  2. Профессионален: Имеет собственное доменное имя.

  3. Доступен миру: Поддерживает несколько языков с умным определением и SEO-оптимизацией.

Это уровень коммерческого проекта. Ты создал не просто "страничку", а полноценный веб-сайт.

Последнее обновление