Всем привет!
Сегодня представляю экспериментальный компонент - Language Router, предназначенный для реализации мультиязычности на сайте.
Вообще сама по себе реализация мультиязычности - очень сложная и неоднозначная штука, поэтому взять какую-то общепринятую практику или придумать что-то максимально универсальное здесь изначально мне не казалось реальной задачей, поэтому данный компонент изначально под большим вопросом. Тем не менее потребность в нем есть и мне хотелось его реализовать без каких-то отдельных языковых справочников, а именно в рамках уже намеченного визуального редактора, то есть по принципу "Где вижу, там и редактирую". Скажу честно, что над этой задачей, прежде чем приступить, я думал больше месяца (и до этого не раз задумывался). Мне хотелось, чтобы как-то все универсально было и удобно, и чтобы не ломать намеченной основы и поиск работал и т.д. и т.п., и признаться честно, я не смог придумать универсального решения, поэтому вычленил самое важное - редактировать где видишь, а вот SEO и т.п. придется пока игнорировать. В общем, это решение подходит для лендингов и т.п., где основной только один сайт и язык основной один, а дополнительные языки - это просто для удобства пользователей, но у них пока не будет отдельных УРЛов и т.п, то есть можно переключиться на другой язык, но УРЛ не поменяется, то есть поисковые машины не будут довольны. Тем не менее, для сайтов, продвигаемых только через рекламу, данный подход вполне годится, а мысли у меня кое-какие есть, и в дальнейшем скорее всего я и с УРЛами решу вопрос.
Итак, как это работает?
В нужном месте страницы, где надо менять вывод в зависимости от языка, размещаем компонент Language Router, а в него закидываем нужные для вывода компоненты и в его прямых потомках в настройках указываем для какого они языка (ru или en). Если у компонента не указывается какой язык, то он будет выводиться во всех языках. Language Router при выводе дочерних компонентов первого уровня фильтрует их по языку. Вот смотрите видео: https://youtu.be/WHkbPL6j8Ho. Вот демо-шаблон: https://front-editor.prisma-cms.com/templates/cjw2wn6wzi73v0a89cqsx6kin
Важный момент: если в редакторе выделен Language Router или какой-либо из его прямых потомков, то выводятся все языковые потомки разом независимо от их указанного языка. Это сделано для удобства, чтобы в режиме редактирования было видно какие языковые элементы прописаны.
Подсказка: Для локализации множества коротких текстовых элементов (например, пунктов меню) лучше использовать структуру Typography -> Language Router -> [HTML Tag1, HTML Tag2, ....], потому что в HTML Tag нельзя разместить никакой другой компонент, кроме как HTML Tag, а в Typography есть базовые стилистические наборы типа title, subheading, caption и т.п.
Отдельно уточню, что для этого компонента дочерними могут быть любые другие компоненты, хоть Query, хоть Slider, хоть что.