Как верстать сайты на двух языках?

Question

[powerg1980]

Подскажите как верстаются сайты на 2-х языках? для каждого языка своя страница? или как?

Comments

[mahmudchon]

Англоязычные сайты верстаются так:

<div>
    <p>text</p>
</div>

Русскоязычные так:

<блок>
    <параграф>текст</параграф>
</блок>

[powerg1980]

mahmudchon, так я не понимаю, мне тоесть отдельный html нужно делать для русского и для английского языка? Или все в одном html делать нужно?

[mahmudchon]

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

[Aetae]

Если вёрстка чистый html+css без всего, то да - просто две страницы.
Однако обычно есть какой-то фреймворк на котором всё равботает, либо на бэке либо на фронте, и там практически гарантировано уже есть встроенная система i18n(а если нет - есть плагин), и, соответственно, исходить надо из конкретных технологий.

[Deita]

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

Answer 1

[Василий Банников]

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

Шаблонизатор потом уже либо сгенерирует тебе N файлов для разных языков, и тебе нужно будет на стороне веб-сервера разрулить, какие файлы отдавать, либо этим будет заниматься бэкенд, либо фронтовый фреймворк.

Код в итоге будет что-то типа:

index.html:

<div>
  <p>{{text}}</p>
</div>

i8n/ru.json:

{
  "text": "Привет мир!"
}

i18n/en.json:

{
  "text": "Hello world!"
}

i18n/es.json

{
  "text": "Hola mundo!"
}

Но если у тебя появляются динамические данные, нужна поддержка right-to-left языков, и вообще нужна адаптация под разные регионы (типа чтобы условный Американец и условный Китаец получали разный UX), то всё будет немного сложнее. Гугли дальше по словам "Интернационализация" и "Локализация"

Comments

[powerg1980]

А если я не занимаюсь Беком?
У меня только верстка, как мне верстать англ и русский язык? Все равно не понимаю
Мне создать home.html для русского и home-en.html для английского и просто поменять текст?

[Deita]

powerg1980, Способов много, бывает сначала оформляют версию на главном языке, а потом тупо копируют страницы в другую папку, и локализируют. Но лучше подсмотрите как это реализовано в WordPress или любой другой CMS например Joomla, плагинов масса. Из которых можно узнать минимум теории. И вообще вопрос лучше начинать с бекенда, то как данные будут храниться, а потом делать UI. Есть разные технологии построения веб-сайтов, статическими генераторами, шаблонизаторами, системами управления контента. Это тоже самое как и сказать мне надо поменять топливный насос, а в каком агрегате не уточнить, вдруг это вообще самолёт с реактивным топливом. Узнайте у бекендера как он работает, ваша задача как фронтендера уметь хотябы поверхностно разбираться в бекенде, иначе вы дизайнер если не хотите вникать в бекенд. И дизайнеры кстати нередко зарабатывают больше бекендеров.

[Василий Банников]

powerg1980, если только верстаешь, то поспрашивай у своей команды.
Если команды нет, то поизучай тему генераторов статических сайтов

[powerg1980]

Василий Банников, Deita, лендинг на wp, больше они пока нечего не знают, и как на wp у лендинга реализуется смена языка не подскажите?прочитал про плагины, но какой будет так же незнаю

[Василий Банников]

powerg1980, в wp есть разные плагины для интернационализации.
Больше ничего сказать не могу

Answer 2

[GC8]

Если используются фреймворки по типу NextJS, то можно использовать i18n и ссылаться на ответ Василий Банников. В других случаях когда просто используется html, то да лучше использовать разный маршрут и рендерить свою верстку. Это будет полезно для SSR.