Как лучше реализовать многоязычность сайта, работающего без CMS, на голом HTML/CSS?

Question

[saveTibet]

Я сверстал одностраничник, решил не привязываьт его к движкам, т.к. проект небольшой и контента мало. Требуется сделать еще 2 языковые версии. Правильно ли будет сделать просто еще 2 копии, заменить на них контент и навесить каждой копии переключатель языков? Как быть с URL? Какими они должны быть — site.com/lang1, site.com/lang1, site.com/lang1? Если да, то как сделать, чтобы по дефолту открывался site.com/delault_lang, а не site.com? Через .htaccess?

Answer 1

[Вася Петров]

Правильно ли будет сделать просто еще 2 копии, заменить на них контент и навесить каждой копии переключатель языков?

Правильно.

Как быть с URL? Какими они должны быть — site.com/lang1, site.com/lang1, site.com/lang1?

site.com - дефолтный
site.com/langN- дополнительные.

Если совсем по уму, то нужно определять язык браузера (не IP юзера) и отправлять его на его язык. Но для одностраничника ИМХО это нецелесообразно. Переключатель должен быть в любом случае.

Comments

[saveTibet]

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

[Вася Петров]

saveTibet: куки

[saveTibet]

Вася Петров: как это реализовать фактически?

[Вася Петров]

saveTibet: изучить как работать с куками. Это невозможно в 2х словах рассказать, да дать готовое решение. Но в целом это не сложно.

Answer 2

[Андрей]

site.com может быть язык по дефолту
en.site.com или site.com/en может быть другой язык
вот скрин из моей сборки тоже лэндинг как раз на нескольких языках делаю

Comments

[Андрей]

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

var language = (navigator.language || navigator.browserLanguage).split('-')[0];
if (language !== "ru") {
    if (language == "ge") window.location = "/ge";
    else window.location = "/en"
}

[saveTibet]

Андрей: спасибо! А есть принципиальная разница между en.site.com и site.com/en, кроме того, что в одном случае это домен третьего уровня, а в другом — поддомен?

Answer 3

[Евгений]

либо для каждого блока с текстовым контентом создать дубль на втором языке. для всех блоков с текстовым контентом прописать в классах класс для определенного языка (lang-ru, lang-en). и в куках сохранять язык, выбранный пользователям, скриптами скрывать/отображать нужные классы.

но это более геморный вариант. проще разделить языковые версии на директории или на поддомены вынести

Comments

[saveTibet]

Понял, спасибо.

Answer 4

[Григорий Васильков]

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

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

Comments

[saveTibet]

У меня нет задачи, чтобы язык выбирался автоматом. Сайт очень простой, ссылок на нем одна или две. Максимум, что может понадобиться впоследствии, это запоминание выбранного языка для последующих посещений.

[Григорий Васильков]

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

[saveTibet]

Григорий Васильков: найти ее, это кого?

[Григорий Васильков]

Клиент хочет посмотреть страницу 'vacancy.html'.
У тебя есть vacancy_ru.html, _en, _fr, _de
У него в куках есть [en]

Вроде бы логично что нужно просто перенаправить его с vacancy на vacancy_en
Но вот беда - на английской странице вакансии есть ссылки на главную, в футер и еще много куда.
И эти ссылки зараза такая - сразу делают 302 редирект постоянно, чем говорят поисковой системе "мой сайт говно", а некоторые браузеры 10 раз проходят по 302му и меняют статус на 301, сообщая всем ботам, кого встречают, что там видели 301, что опять же приходит к поисковикам и потом боль.

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

Опять же редирект по сути должен быть один - на английскую версию страницы, которая все href-ссылки имеет с префиксом /en/

При этом пользователь должен иметь возможно при любом раскладе нажать "сбросить язык" или просто выбрать другой и редиректы вдруг должны начать работать в другую сторону

[Григорий Васильков]

Многоязычность без ЧПУ не принесет пользы, тогда как чтобы сделать с ней - нужно куда больше бабла, чем вы взяли. Это не самая простая задача, как может показаться - дескать создай 10 страничек и все заработало. Ты убьешь чуваку историю домена.

[saveTibet]

Григорий Васильков: если бы сайт был хотя бы из нескольких страниц, я бы повесил его на cms и делал бы многоязычность средствами системы, но у меня простейший одностраничник — контента мало, из ссылок только mailto, линки на соцсети/мессенджеры и все.
Сделаю все просто — с ручным выбором языка, не буду заморачиваться по запоминанию куками.

Answer 5

[altrus]

Что за глупые ответы про копии сайта для каждого языка?
А если надо будет менять в дизайне что-то?
А если будет 5-10 языков?
Для одной страницы "I am Vasja" подойдет, а для PWA?

Как вариант, для каждого тэга со строковым содержимым устанавливать какой-нибудь lang-string-id атрибут, и javascript'ом после построения DOM дерева вставлять туда нужную строку из ресурса (массива строк для каждого языка)