<!-- Разработка кода https://yason.studio -->
<!-- Наследуем шрифт из Тильдовского стиля текста -->
<div class="t-text">
<div id="breadcrumbs"></div>
</div>
<style>
/* Основные стили для хлебных крошек */
#breadcrumbs {
margin-left: auto;
margin-right: auto;
padding: 0 20px;
line-height: 1.55; /* Межстрочное расстояние */
box-sizing: border-box;
max-width: 1200px;
font-family: inherit; /* Наследование шрифта */
}
#breadcrumbs a, #breadcrumbs span {
color: black;
text-decoration: none;
}
#breadcrumbs span {
color: grey;
}
/* Оопределение разделителя */
#breadcrumbs a:not(:last-child)::after {
content: " » "; /* сюда вставляй любой свой символ для разделителя */
font-weight: regular; /* толщина символа */
color:#858585; /* цвет символа */
margin: 0 5px;
}
/* Адаптация под мобильные устройства */
@media screen and (max-width: 1200px) {
#breadcrumbs {
max-width: 980px;
}
}
@media screen and (max-width: 960px) {
#breadcrumbs {
max-width: 640px;
}
}
@media screen and (max-width: 480px) {
#breadcrumbs, #breadcrumbs a, #breadcrumbs span {
font-size: 14px; /* размер шрифта в мобильной версии */
}
}
</style>
<script>
function generateBreadcrumbs() {
var path = window.location.pathname.split('/').filter(function(e) { return e && e !== 'tproduct'; });
var breadcrumbsContainer = document.getElementById('breadcrumbs');
var breadcrumbs = '<a href="/">Главная</a>';
for (var i = 0; i < path.length; i++) {
var link = '/' + path.slice(0, i + 1).join('/');
var name = i === path.length - 1 ? getProductName() : getCategoryName(link);
if (i === path.length - 1) {
breadcrumbs += '<span>' + name + '</span>';
} else {
breadcrumbs += '<a href="' + link + '">' + name + '</a>';
}
}
breadcrumbsContainer.innerHTML = breadcrumbs;
}
function getProductName() {
var productNameElement = document.querySelector('[itemprop="name"]');
return productNameElement ? productNameElement.textContent : 'Product';
}
function getCategoryName(link) {
// Нормализация ссылки для сравнения
var normalizedLink = normalizePath(link);
// Поиск элемента по нормализованному пути
var selector = `a[href$="${normalizedLink}"], a[href$="${normalizedLink}/"]`;
var categoryLinkElement = document.querySelector(selector);
return categoryLinkElement ? categoryLinkElement.textContent : link.split('/').pop().replace(/-/g, ' ').replace(/\?.*/, '');
}
// Функция для нормализации пути из URL
function normalizePath(path) {
return path.replace(/^(http(s)?:\/\/)?[^\/]+/, '').replace(/\/$/, '');
}
document.addEventListener('DOMContentLoaded', generateBreadcrumbs);
</script>
<!-- Разработка кода https://yason.studio -->
<!-- Наследуем шрифт из Тильдовского стиля текста -->
<div class="t-text">
<div id="breadcrumbs"></div>
</div>
<style>
/* Основные стили для хлебных крошек */
#breadcrumbs {
margin-left: auto;
margin-right: auto;
padding: 0 20px;
line-height: 1.55; /* Межстрочное расстояние */
box-sizing: border-box;
max-width: 1200px;
font-family: inherit; /* Наследование шрифта */
}
#breadcrumbs a, #breadcrumbs span {
color: black;
text-decoration: none;
}
#breadcrumbs span {
color: grey;
}
/* Оопределение разделителя */
#breadcrumbs a:not(:last-child)::after {
content: " » "; /* сюда вставляй любой свой символ для разделителя */
font-weight: regular; /* толщина символа */
color:#858585; /* цвет символа */
margin: 0 5px;
}
/* Адаптация под мобильные устройства */
@media screen and (max-width: 1200px) {
#breadcrumbs {
max-width: 980px;
}
}
@media screen and (max-width: 960px) {
#breadcrumbs {
max-width: 640px;
}
}
@media screen and (max-width: 480px) {
#breadcrumbs, #breadcrumbs a, #breadcrumbs span {
font-size: 14px; /* размер шрифта в мобильной версии */
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
createBreadcrumbs();
function createBreadcrumbs() {
const breadcrumbsContainer = document.getElementById('breadcrumbs');
if (!breadcrumbsContainer) return;
let breadcrumbsElements = ['<a href="/">Главная</a>']; // Начинаем с элемента "Главная"
const categoryElement = document.querySelector('.t-feed__post-popup__tag');
if (categoryElement) {
const categoryName = categoryElement.textContent.trim();
let categoryHref = categoryElement.getAttribute('href');
// Декодируем URI
categoryHref = decodeURIComponent(categoryHref);
// Убираем домен из ссылки, если он присутствует
categoryHref = categoryHref.replace(/^https?:\/\/[^\/]+/, '');
// Убираем '#!' и все что после, если это есть в URL
categoryHref = categoryHref.replace(/#!.*$/, '');
// Получаем первый сегмент URL как категорию
let pathSegments = categoryHref.split('/');
if (pathSegments.length > 1 && pathSegments[1] !== '') {
// Если первый сегмент существует и не пустой, используем его как ссылку на категорию
categoryHref = `/${pathSegments[1]}`;
} else {
// Если после очистки URL остался только домен, используем ссылку на главную страницу
categoryHref = '/';
}
// Если ссылка не ведет на главную страницу, формируем HTML для категории
if (categoryHref !== '/') {
breadcrumbsElements.push(`<a href="${categoryHref}">${categoryName}</a>`);
}
}
const articleTitleElement = document.querySelector('.js-feed-post-title.t-feed__post-popup__title.t-title.t-title_xxs');
if (articleTitleElement) {
const articleTitle = articleTitleElement.textContent.trim();
breadcrumbsElements.push(`<span>${articleTitle}</span>`); // Добавляем заголовок статьи
}
// Объединяем элементы без добавления разделителя
breadcrumbsContainer.innerHTML = breadcrumbsElements.join('');
}
});
</script>