Как лучше сделать переключение языков на многостр. сайте?(без бэка)?
Есть многостраничный сайт, страниц 7-9, надо сделать переключение языков по кнопкам. Нашёл способ сделать такое на чистом JS, если коротко: для каждой страницы делаешь свой .json файл, в котором для каждой отдельной строчки текста пишешь перевод. И потом по кнопке - происходит вставка этих строчек перевода во все текста на сайте
Но минусы такого способа понятны сразу - чтобы он работал, мне нужно для КАЖДОЙ строчки текста на сайте написать её перевод в .json файле, как на 1м скрине. Мне кажется это костыль, и на реальных проектах делают как-то по другому.
Прочитал ещё про "заголовок Accept-Language", типо это заголовок запроса, и можно там как-то отслеживать язык пользователя. Но нормальной инфы как использовать этот способ я не нашёл, я даже не понял на чём это делается: Node.js, PHP или можно на обычном JS, в ру сегменте вообще ничего, в анг. большинство статей за 2012-2014 годы
В общем, расскажите пж, каким способом стоит делать мультиязычность среднего по размеру сайта?(без бэка)
Everything_is_bad, DevMan, шалунишки, я же вроде в скобках написал - это чисто для примера, глазами пробежаться. Не нужно вникать, это к теме вопроса не относится
Everything_is_bad, не расстраивайся, иногда такое бывает. 1й скрин вообще видос, как я тебе текстом прикреплю. А 2й скрин там код большой
а к теме вопроса это ОПЯТЬ ЖЕ не относится, просто примеры
DevMan, в данном случае код не важен. Картинка отражает принцип. Этого достаточно.
В любом случае как ни организовывай перевод должен быть для любой строчки или кнопки или ссылки %)
Froggyweb, Понимаю, что это как бы отдельный вопрос, но он тоже про перевод, буду благодарен за ответ)
У меня на сайте есть карточки, и по клику на каждую карточку - показывается попап с контентом именно той карточки, на которую кликнули.
Ну и принцип такой, что карточкам я добавил data-атрибуты: data-title='Заголовок №1' data-text='Текст 1й карточки' data-img='' ну и тд. И типо при клике на карточку - данные из data-атрибутов этой карточки подставляются в попап, ну и выходит "динамический" попап
<div class="patners__slide swiper-slide popup-btn"
data-title="SergievPossad"
data-descr="Кондитерская фабрика(конфеты)"
data-work="Tools to help you schedule and earn on your own terms–customize exactly how and when clients can.Tools to help you schedule and earn on your own terms–customize."
data-link="#">
<img src="images/components/partners-logo/sergievposad.webp" alt="">
<h4 class="partners__slide-title">SergievPossad</h4>
<div class="partners__product-info">
<p>Мягкие игрушки</p>
<p>Бластеры</p>
<p>Часы</p>
</div>
</div>
Ну и вопрос: а как мне в json файл добавлять переводы тех текстов, которые у меня лежат в data-атрибутах карточек? Типо для всех остальных текстов я в теги хотел добавить какой-то дата-атрибут или класс, data-lang='title№2', например. И по этим атрибутам уже в .json записывать.
А как мне записывать в .json текста карточек? Они же не в отдельных тегах, а как значения в data-атрибутах. Вот например текст "Кондитерская фабрика(конфеты)" - как мне его перевод записать в json файле?
Danila232, Можно посмотреть на шаблонизаторы вроде https://mozilla.github.io/nunjucks/
но уже понадобится сборка проекта. Vite webpack gulp
если идти дальше, то VUE, React .....
Froggyweb, я работаю на gulp/webpack, но как сборщики тут помогут? Или помогут? я думал тут сама логика, по которой я сделал - приводит к тому, что для этих текстов в data*- уже переводы не сделать..
Модифицируй роутер или mod rewrite веб сервера таким образом, чтобы идентификатор выбранного языка был в ссылке (например my.site.com/fr/blablabla ), при отсутствии этого идентификатора проводи проверку по заголовку (например для apache, главное идея). Это позволит в интерфейсе дать пользователю выбор языка и одновременно без этого выбора делать его автоматически.
да, перевод нужно размещать поэлементным и прописывать в своем json.
Так же есть сервисы типа гугла или yandex, устанавливаются на сайт и делают автоматический перевод (не рекомендую)
про роутер и т.д я так ещё не умею, могу на ванильке сделать чтобы по переключению языка в адресе страницы добавлялась приписка, какой язык сейчас используется на сайте. Но если в общем, я правильно понял - в любом случае нужно каждый текст.элемент на сайте прописывать в .json файлах?? У меня большая главная страница, и ещё 7 отдельных, это мне типо сидеть и каждую строчку перебивать по json файлам?
Не понимаю вопроса.
Тебе, вне зависимости от того, как у тебя реализован сайт, нужно будет 'каждую строчку' перевести на другие языки и прописать это в каком-либо виде, пусть и в json.
Другой разговор, что если блок текста, даже если он состоит из нескольких элементов, по смыслу и логике не требует при переводе делить его на части, то и записывать его нужно в json как один элемент.
Но, обычно текст могут делить на html элементы исключительно из дизайнерских соображений, в этом случае у тебя два варианта - либо каждый кусок записывать в joson отдельной строчкой, выдумывая имена типа SITE_ELEMENT_1,SITE_ELEMENT_2,... либо придумать свой 'птичий язык', специальные символы-разделители, которые будут вставлены в строку с переводом, и уже в коде, который подставляет перевод, расставляться в соответствующие места. Беда второго метода в том что это добавляет мест возникновения ошибок, например если разделитель будет только делить строку на части, не описывая ее реальное расположение в html, а в html эти элементы должны размещаться например в двух измерениях (и по строчкам и по столбцам, т.е. слева направо и сверху вниз) то достаточно ошибиться с порядком строк в переводе и размещение поедет... такие ошибки очень грустно отлавливать, это не автоматизировать.
p.s. советую автоматизировать процесс создания json
тупой пример - добавь на сайт особый режим для переводчика, при котором каждый элемент, который может быть переведен, должен быть снабжен интерфейсом его редактирования (пример - добавляешь ивент ctrl+right-mouse-click, при котором открывается форма редактирования всех вариантов перевода), который будет автоматически уходить в json на сервере. Плюс к этому добавь глобальный хоткей (или gui меню) подсветки тех строк на странице, для которых не задан указанный перевод. Это повысит удобство перевода и отслеживания ошибок на порядок. И еще, имена элементов в переводчике по умолчанию предлагай сгенерированными из имен форм, html идентификаторов, классов и стилей, можешь даже в интерфейсе редактирования перевода добавть соответствующие кнопки, типа добавить номер, добавить информацию из стиля bold/strike/italic, из классов и т.п. это достаточно легко автоматизируется именно средствами браузерного javascript
Wispik, rPman, понял, спасибо. Я просто надеялся есть какой-то более автоматизированный способ, чем переводить и записывать в .json каждую строчку/блок текста. Это выходит, довольно долгое занятие будет
Danila232, я добавил в комментарий p.s.
такая автоматизиация если и есть то идет в поставке с каким-нибудь фреймоврком/сайтконструктором, а у тебя как я понял самописный
rPman, Понимаю, что это не совсем по теме, но у меня такой вопрос. У меня на сайте есть карточки, и по клику на каждую карточку - показывается попап с контентом именно той карточки, на которую кликнули.
Ну и принцип такой, что карточкам я добавил data-атрибуты: data-title='Заголовок №1' data-text='Текст 1й карточки' data-img='' ну и тд. И типо при клике на карточку - данные из data-атрибутов этой карточки подставляются в попап, ну и выходит "динамический" попап
<div class="patners__slide swiper-slide popup-btn"
data-title="SergievPossad"
data-descr="Кондитерская фабрика(конфеты)"
data-work="Tools to help you schedule and earn on your own terms–customize exactly how and when clients can.Tools to help you schedule and earn on your own terms–customize."
data-link="#">
<img src="images/components/partners-logo/sergievposad.webp" alt="">
<h4 class="partners__slide-title">SergievPossad</h4>
<div class="partners__product-info">
<p>Мягкие игрушки</p>
<p>Бластеры</p>
<p>Часы</p>
</div>
</div>
Ну и вопрос: а как мне переводить на другой язык те текста, которые у меня лежат в data-атрибутах карточек? Типо для всех остальных текстов я в теги хотел добавить какой-то дата-атрибут или класс, data-lang='title№2', по такому принципу. И по этим атрибутам уже в .json записывать.
А как мне записывать в .json текста карточек? Они же не в отдельных тегах, а как значения в data-атрибутах. Вот например текст "Кондитерская фабрика(конфеты)" - как мне его перевод записать в json файле?
Понимаю, что вопрос не совсем по теме, но буду рад если подскажете
Концепция перевода в json подразумевает что ВЕСЬ текст должен там храниться.
Это значит на html везде, включая кастомные теги и атрибуты (и javascript если честно) должны содержать не сам текст а ссылку на элементы из language json.
Придумай свой шаблонный язык описания текста (скорее всего тебе хватит просто подмены типа {ELEMENT_NAME} и пропускай весь текст, который ты собираешь на странице, через этот шаблонизатор, он же будет подставлять правильный перевод.
Т.е. в data-descr у тебя будет что то типа "{PARTNERS_SLIDE_DATA_DESCR}"
p.s. недостаток, предполагается что у тебя не будет дефолтного языка, при котором один из языков уже присутствует на странице, т.е. вся страница превращается в {ELEMENT_TEXT} но это не обязательно само собой и это можно распространять только на скрытые элементы типа кастомных атрибутов
