Глава 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:

.language-switcher {
    display: flex;
    gap: 5px;
    margin-left: 2rem;
}

.lang-btn {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    background: rgba(255,255,255,0.1);
    color: #e6d2b9;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.lang-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

.lang-btn.active {
    background: #c9a769;
    color: #2c1810;
}

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

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

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

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

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

sudo apt install php libapache2-mod-php
sudo systemctl restart apache2

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

sudo mv /var/www/html/index.html /var/www/html/index.html.backup
sudo nano /var/www/html/index.php

Вставь код:

<?php
// Получаем язык браузера
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);

// Список поддерживаемых языков
$supported = ['en', 'ru', 'de'];

// Проверяем, поддерживается ли язык
if (in_array($lang, $supported)) {
    // Перенаправляем на соответствующую папку
    header("Location: /$lang/");
} else {
    // Если язык не поддерживается, используем английский по умолчанию
    header("Location: /en/");
}

exit();
?>

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

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

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

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

<!-- Для русской версии -->
<link rel="alternate" hreflang="ru" href="https://твой-домен.ру/ru/" />
<link rel="alternate" hreflang="en" href="https://твой-домен.ру/en/" />
<link rel="alternate" hreflang="de" href="https://твой-домен.ру/de/" />
<link rel="alternate" hreflang="x-default" href="https://твой-домен.ру/" />

<!-- И укажи язык текущей страницы -->
<html lang="ru">

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

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

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

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

/var/www/html/
├── index.php (перенаправляет на язык)
├── lang/
│   ├── en.php
│   ├── ru.php
│   └── de.php
├── templates/
│   └── main.php
└── pages/
    ├── about.php
    └── contacts.php

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

<?php
$lang = [
    'title' => 'Деревянная Мастерская',
    'welcome' => 'Добро пожаловать на наш сайт!',
    // ... остальные фразы
];
?>

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

Обязательно: Получи SSL-сертификат через Certbot для своего домена (или DuckDNS). Убедись, что работает перенаправление HTTP → HTTPS.
Добавь языковой переключатель на все страницы своего сайта. Создай хотя бы английскую версию главной страницы.
Настрой автоматическое определение языка с помощью PHP-скрипта index.php в корне сайта.
Проверь SEO-разметку: Убедись, что на всех языковых версиях правильно указаны html lang="..." и теги hreflang.

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

Безопасен: Работает по HTTPS с автоматически обновляемым SSL-сертификатом.
Профессионален: Имеет собственное доменное имя.
Доступен миру: Поддерживает несколько языков с умным определением и SEO-оптимизацией.

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

ПредыдущаяГлава 9: Бесплатный SSL-сертификат от Let's Encrypt с помощью Certbot СледующаяГлава 11: Перенос сайта на VPS (виртуальный сервер в интернете)

Последнее обновление 1 месяц назад