Мультиязычность для сайта на Webflow

На конференции Webflow 11 ноября 2022 нам обещали завести централизованную настройку мультиязычности, но, пока чуда не случилось, делюсь решением и скриптом для быстрой разработки и дальнейшего удобного администрирования.

Создаем папку

Задаем ей название сокращением языка, например «En», Slug оставляем одноименным.

Дублируем страницу

Переводим название страницы, указываем Parent Folder, Slug оставляем прежним. Это важно, ссылка видоизменится за счет добавления «en» от папки. А для главной страницы Slug оставляем пустым, что логично.

Добавляем переключатель языка

Делаем кнопку, дропдаун или текстовый элемент «Ru/En» и вешаем ссылку c нужным сокращением языка:

`javascript:changeLanguageTo('en');

Добавляем скрипт

Добавляем в «Embed» или «Before </body> tag» скрипт, не забывая поменять имя домена:

<script>
const changeLanguageTo = lang => {
    const DOMAIN_NAME = 'nikalimp.werbflow.io';
    const currentUrl = window.location.href;
const currentLangIsEn = currentUrl.includes(`${DOMAIN_NAME}/en`);  
    switch (lang) {
        case 'ru':
            if (currentLangIsEn) {
                window.location.href = currentUrl.replace(`${DOMAIN_NAME}/en`, `${DOMAIN_NAME}`);
            }
           break;
        case 'en':
            if (!currentLangIsEn) {
                window.location.href = currentUrl.replace(`${DOMAIN_NAME}`, `${DOMAIN_NAME}/en`);
            }
    }
};
</script>

Результат

Сейчас по клику на переключатель будет происходить редирект на переведенную версию страницы, путем добавления названия папки между доменным именем и адресом страницы. Это гибкое решение позволит не множить бесконечное количество переключателей языка с редиректом на текущую страницу. Также позволит вести удобный менджмент страниц, поскольку все они будут иметь одноименные адреса и разобраны по папкам. Однако трудности есть и они заключаются в необходимости перевода всех текстовых элементов вручную. Для этого рекомендую использовать компоненты, в них дублировать текстовые элементы и присваивать им соотвествующие Visivble: En и Visivble: Ru, чтобы на дублирующих страницах менять перевод переключением состояния Visivble.