Автоматические хлебные крошки из ссылки

Сделать «хлебные крошки» на Тильде очень просто — нужно всего лишь добавить соответствующий блок (ME605). Но что делать, когда у вас 500 страниц, и везде нужны «хлебные крошки»? Можно, конечно, и ручками добавлять, но гораздо удобнее автоматизировать этот процесс.

Данная модификация позволяет создать «хлебные крошки» автоматически для страницы, исходя из ссылки. Например, вы хотите получить такое: «Главная → Витрина → Техника → Ноутбук». Всё просто! Создаёте страницу с адресом https://вашсайт/vitrina/tekhnika/noutbuk/, и вставляете код в то место, где должны быть «хлебные крошки». Они создадутся автоматически, переведя транслит в кириллицу.

P. S. Скрипт работает с русским, украинским и монгольским языками.

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

Этап 1
Пропишите ссылку на русском/украинском языке в форме выше и получите ссылку на латинице. В качестве пробелов используйте дефис «-». Создайте страницу с этой ссылкой.

Этап 2

Выберите, какое слово будет первым (обозначает главную страницу сайта).
Вставьте символ (или слово), который будет в качестве разделителя.
Укажите размер отступа между элементами (учтите, разделитель — это тоже элемент).
Выберите язык (русский / украинский / монгольский).
Скопируйте полученный код и вставьте его в блок T123.
Сам блок T123 пометите в то место, где хотите, чтобы появились хлебные крошки.

P. S. Если нужны отступы у хлебных крошек, задайте их блоку T123.
P. P. S. Если хотите изменить цвет хлебных крошек, используйте в блок T193 из раздела «Другое».
P.P.P.S. Если хотите использовать «Ь», «Ъ», «Ы» или «Э», то нужно будет дорабатывать код. Обращайтесь.

<!-- Автоматические хлебные крошки из ссылки | https://necodim.ru/tilda/breadcrumbs -->
<div class="breadcrumbs t-text"><ul></ul></div>

<style>
.breadcrumbs ul {padding-left: 0 !important;}
.breadcrumbs li {
    display: inline;
    margin-left: 20px;
    margin-right: 20px;
    padding: 0;
}
.breadcrumbs li:first-child {margin-left: 0;}
.breadcrumbs li:last-child {margin-right: 0;}
.breadcrumbs li.divider {opacity: .75;}
</style>

<script src="https://unpkg.com/cyrillic-to-translit-js@latest/dist/bundle.js" type="text/javascript"></script> <!-- https://github.com/greybax/cyrillic-to-translit-js -->
<script>
const mainPage = 'Главная',
    urlPath = window.location.pathname,
    capitalizeFirstLetter = ([ first, ...rest ], locale = navigator.language) => first.toLocaleUpperCase(locale) + rest.join(''),
    capitalizeAndSpace = (str) => capitalizeFirstLetter(str.split('-').join(' ')),
    toBreadcrumbs = (pathname, { rootName = mainPage, capitalizeAndSpace = s=>s } = {}) =>
        pathname
        .split("/")
        .filter(Boolean)
        .reduce(
            (acc, curr, idx, arr) => {
                acc.path += `/${curr}`;
                acc.crumbs.push({
                    path: acc.path,
                    name: capitalizeAndSpace(curr),
                });

                if (idx === arr.length - 1) return acc.crumbs;
                else return acc;
            },
            { path: "", crumbs: [{ path: "/", name: rootName }] },
        );
let breadcrumbs = toBreadcrumbs(urlPath, { capitalizeAndSpace }),
    breadcrumbsUl = document.querySelector('.breadcrumbs ul');

if (urlPath == '/') {
    breadcrumbsUl.innerHTML(`<a href="/">${mainPage}</a>`);
} else {
    for (i in breadcrumbs) {
        breadcrumbs[i].name = cyrillicToTranslit({ preset: 'ru' }).reverse(breadcrumbs[i].name, ' ');
        let elA = document.createElement('a'),
            elLi = document.createElement('li'),
            elDivider = document.createElement('li');
        elA.setAttribute('href', breadcrumbs[i].path);
        elA.appendChild(elLi);
        elLi.append(breadcrumbs[i].name);
        elDivider.className = 'divider';
        elDivider.append('→');
        breadcrumbsUl.append(elA);
        i != breadcrumbs.length-1 ? breadcrumbsUl.append(elDivider) : false;
    }
}
</script>

Скопировать код

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