Hugo — это мощный и быстрый генератор статических сайтов, который идеально подходит для создания многоязычных сайтов. В этом руководстве мы рассмотрим, как создать сайт, на котором пользователи смогут переключаться между двумя языками: русским и английским.
Установка Hugo
Если у вас еще не установлен Hugo, следуйте инструкциям на официальном сайте Hugo для установки: Hugo Installation Guide.
Создание нового сайта
Начнем с создания нового сайта:
1hugo new site mymultilangsite
2cd mymultilangsite
Выбор или создание темы
Для нашего сайта нам понадобится тема, поддерживающая многоязычность. Можно выбрать тему из каталога тем Hugo или адаптировать любую другую тему. Например, используем тему Ananke:
1git init
2git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
Настройка файла конфигурации
Откроем файл config.toml и добавим настройки для многоязычности:
1baseURL = "https://example.org/"
2languageCode = "en-us"
3title = "My Multilingual Site"
4defaultContentLanguage = "en"
5defaultContentLanguageInSubdir = true
6
7[languages]
8 [languages.en]
9 languageName = "English"
10 weight = 1
11 [languages.ru]
12 languageName = "Русский"
13 weight = 2
14
15theme = "ananke"
Создание контента для каждого языка
Hugo ожидает, что контент для каждого языка будет находиться в отдельных директориях. Создадим директории для русского и английского языков:
1mkdir -p content/en
2mkdir -p content/ru
Создание статей
Создадим статьи в соответствующих директориях:
1hugo new en/my-first-post.md
2hugo new ru/my-first-post.md
Напишем статьи на английском и русском языках в соответствующих файлах.
Настройка меню для переключения языков
Обновим config.toml, чтобы добавить меню для переключения языков:
1[menu]
2 [[menu.main]]
3 name = "Home"
4 url = "/"
5 weight = 1
6 [[menu.main]]
7 identifier = "en"
8 name = "English"
9 url = "/en/"
10 weight = 2
11 [[menu.main]]
12 identifier = "ru"
13 name = "Русский"
14 url = "/ru/"
15 weight = 3
Запуск локального сервера
Запустим локальный сервер для просмотра сайта:
1hugo server
Откроем браузер и перейдем по адресу http://localhost:1313/, чтобы увидеть наш многоязычный сайт.
Размещение сайта
После того как сайт готов, его можно разместить на любом хостинге, поддерживающем статические сайты. Например, вы можете использовать Netlify, Vercel или GitHub Pages.
Заключение
Создание многоязычного сайта с помощью Hugo — это простой и эффективный процесс, который включает настройку конфигурационного файла, создание контента для каждого языка и настройку меню для переключения языков. Следуя этому руководству, вы сможете создать сайт, который будет удобен для пользователей, говорящих на разных языках.
