Я искал информацию по этой теме, но не смог найти рабочего решения.
Как добавить простую навигационную цепочку, отображающую категории и подкатегории?
Например:
Главная / Техно-лекции / WordPress
Хочу разместить её сразу под верхним меню.
Это, вероятно, то, что имел в виду @asugar.
Привет, @asugar. 
Не могли бы вы немного подробнее объяснить, что вы имеете в виду? Мы называем категории и теги, используемые для навигации, «хлебными крошками»; @Canapin выделил их на своём скриншоте.
Обычно я бы попросил вас показать скриншот и отметить, где именно вы хотите их разместить, а затем мы бы действовали исходя из этого, но сначала у меня есть ещё одно наблюдение:
Мне кажется, что если вы добавите это на каждую страницу, то это по сути приведёт к отображению нескольких одинаковых навигационных меню, расположенных очень близко друг к другу.
В качестве альтернативы, можем ли мы что-то сделать с существующей навигацией «хлебных крошек», чтобы она подошла для вашего сайта? 
Также стоит уточнить значение термина «хлебные крошки». Я участвовал во множестве бесед, где обе стороны вкладывали в него разный смысл:
- Иерархические хлебные крошки, отражающие структуру сайта (категории/подкатегории/теги или книги/название/глава)
- Трековые хлебные крошки, показывающие историю посещённых страниц (мой любимый пример — https://www.dokuwiki.org/dokuwiki; перейдите по нескольким случайным ссылкам и проверьте заголовок)
@asugar, о каком типе хлебных крошек вы говорите?
Мне не следует гадать, чего ожидает @asugar, но, возможно, это похоже на то, что используют все остальные веб-страницы — и WordPress в основном применяет: навигационную «хлебную крошку», построенную на основе категорий.
Однако в Discourse структура имеет только два уровня глубины, поэтому возможно только home - category - subcategory (конечно, там может быть номер страницы, но это бесполезно, и я считаю, что практически невозможно реализовать).
Таким образом, «хлебная крошка» не даёт ничего, кроме占用 места.
Всем привет. @Jagster абсолютно прав. Мне нужны ссылки на категории и подкатегории. Например:
Главная — Категория — Подкатегория — Подподкатегория — …
Я вижу существующую навигацию в Discourse, но она не работает по принципу «клик — переход» в категории/подкатегории. При клике появляется выпадающее меню.
Неужели действительно невозможно добавить простую навигацию, как я хочу?
Это возможно. Все, что пытались сказать участники, заключается в том, что может существовать альтернативное решение, отличное от того, о котором вы спрашиваете, и они хотели узнать, интересует ли вас такой вариант. Тем не менее, это возможно, но не «из коробки». Вам придётся разработать или создать что-то кастомное для этой цели. Примеры, где было создано нечто подобное, можно найти здесь:
Ссылки для верхней навигации — тема — Discourse Meta и Ссылки в заголовке — тема — Discourse Meta
Это навигация/меню, и у меня это уже есть. Хлебные крошки — это не навигация/меню. Мне нужны хлебные крошки.
Я понимаю, именно поэтому я использовал слово «похожий». Они похожи в том смысле, что реализация или разработка схожи, но не идентичны, не одинаковы и даже не близки друг к другу, а скорее сопоставимы. Возможно, правильнее сказать «сопоставимые».
Я упомянул, что они похожи, потому что считал, что будет полезно увидеть, что технически нечто подобное возможно в Discourse.
Учитывая, что уже установлено: в настоящее время это невозможно в Discourse без кастомного решения, вам, возможно, стоит создать тему в Marketplace для этого.
Это типичная навигационная цепочка, встречающаяся в любом программном обеспечении для форумов. Приведённый выше пример взят из vBulletin. Именно об этом я и говорил.
Меню по сути представляет собой навигационную цепочку (показывает категорию и подкатегорию на страницах категорий и подкатегорий), поэтому, думаю, можно заменить выпадающие меню обычными гиперссылками на текущую категорию или подкатегорию. Уверен, любой, кто умеет писать плагины, сможет это сделать.
В верхней части страниц тем, при прокрутке вниз, уже отображаются категория, подкатегория (и теги), так что, возможно, вас это уже устраивает. Представляю, что автор плагина мог бы переместить их в другое место экрана.
Если вы сделаете это платным, но при этом доступным бесплатно, я, возможно, воспользуюсь им…
Хотелось бы, чтобы такой плагин уже существовал. Кто-нибудь знает его?
Кто-нибудь смог решить проблему с отображением классических хлебных крошек на странице?
Может быть, это не лучший способ, но у нас это сработало:
header.html или отдельный плагин:
api.onPageChange((url) => {
updateBreadcrumbs(url);
});
const updateBreadcrumbs = (url) => {
// Вспомогательная функция для сброса контейнера хлебных крошек
const resetBreadcrumbs = () => {
$("#breadcrumbsContainer").empty();
// Если на главной странице
if (url === '/') {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME"><i class="home">HOME</i></a>
</li>
<li class="breadcrumb-item active">
Сообщество
</li>
`);
} else {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME"><i class="home">HOME</i></a>
</li>
<li class="breadcrumb-item">
<a href="/">Сообщество</a>
</li>
`);
}
};
resetBreadcrumbs();
if (url.includes('/c/')) {
// Если на странице категории
const categorySlugOrId = url.split('/')[2];
$.ajax({
type: "GET",
url: `/c/${categorySlugOrId}/show.json`,
success: function(response) {
if (response && response.category && response.category.name) {
const categoryTitle = response.category.name;
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item active">
${categoryTitle}
</li>
`);
}
},
error: function(error) {
console.error("Ошибка при получении данных категории", error);
}
});
} else if (url.includes('/t/')) {
// Если на странице темы
const topicId = url.split('/')[2];
$.ajax({
type: "GET",
url: `/t/${topicId}.json`,
success: function(response) {
if (response && response.title) {
const topicTitle = response.title;
const categoryId = response.category_id;
// Теперь получаем название категории по её ID
$.ajax({
type: "GET",
url: `/c/${categoryId}/show.json`,
success: function(categoryResponse) {
if (categoryResponse && categoryResponse.category) {
const categoryTitle = categoryResponse.category.name;
const categoryURL = `/c/${categoryResponse.category.slug}`;
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="${categoryURL}">${categoryTitle}</a>
</li>
<li class="breadcrumb-item active">
${topicTitle}
</li>
`);
}
},
error: function(error) {
console.error("Ошибка при получении данных категории для темы", error);
}
});
}
},
error: function(error) {
console.error("Ошибка при получении данных темы", error);
}
});
}
}
SCSS:
#breadcrumbsContainer {
display: flex;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 0;
list-style: none;
background-color: #FFFFFF;
border-radius: 0.25rem;
.breadcrumb-item {
display: flex;
align-items: center;
padding-left: 0;
& + .breadcrumb-item::before {
content: ">";
display: inline-block;
padding: 0 0.5rem;
color: #6c757d;
}
.home {
position: relative;
padding-left: 2.3rem;
font-size: 0;
visibility: hidden;
&::before {
content: "";
position: absolute;
display: block;
background-image: url('HOME SVG');
background-repeat: no-repeat;
height: 24px;
width: 32px;
top: -20px;
visibility: visible;
}
&:hover {
&::before {
background-image: url('HOME HOVER SVG');
}
}
}
a {
text-decoration: none;
color: #006BB4;
&:hover {
text-decoration: underline;
color: #0056b3;
}
}
&.active {
color: #6c757d;
}
}
}
В нашем шаблоне after_header.html:
<div id="breadcrumbsContainer"></div>
Очень хорошо. Надеюсь, что после нескольких обновлений оно войдёт в ядро.
Я бы с радостью это получил!
Есть ли такая опция, или мне нужно подключить программистов?
Если вам нужен надёжный компонент, потребуется работа разработчика.
Я бы не рекомендовал использовать тот, что был опубликован в этой теме.
Спасибо за ваш ответ!
Я найду разработчика, чтобы помочь с этим, но не могли бы вы, пожалуйста, сказать, в чём именно заключается главная проблема (или проблемы) в этом коде?
Большое спасибо!
Я не разработчик, и если кто-то знает компоненты Discourse лучше меня, то его ответ будет точнее моего
Я вижу два основных момента:
-
AJAX-запросы для получения данных очень, очень неоптимизированы. Я почти уверен, что такой компонент можно реализовать без подобных запросов. Они делают всю систему медленной, а хлебные крошки появляются с задержкой.
-
Компонент почти не использует JS API Discourse, который, вероятно, может вернуть нам нужные данные и правильно отрендерить/вставить шаблон, вместо того чтобы вручную внедрять HTML-код в DOM.