Очень полезно, большое спасибо!
Я пробовал использовать этот код, но, похоже, он не работает.
Я вижу контейнер breadcrumbsContainer и его белый фон, но внутри него не генерируются хлебные крошки.
Я пробовал использовать его как компонент и напрямую как часть темы в разделе “Custom CSS/HTML”.
Есть ли какие-то идеи, что я могу делать не так?
Да, @DogBite, решение заключается в том, чтобы добавить теги Script в начало и в конец файла header.html…
В начале:
<script type="text/discourse-plugin" version="0.8">
В конце:
</script>
Вот как это выглядит…
<script type="text/discourse-plugin" version="0.8">
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);
}
});
}
}
</script>
Здесь я реализовал очень простой компонент темы «Хлебные крошки» (в виде ссылок), где на главной странице хлебные крошки не отображаются… PR приветствуются!
Также (что важно) в настоящее время это работает корректно только с категориями — подкатегории не обрабатываются!
Вот как это выглядит на странице списка категорий…
А вот как это выглядит на странице темы…
При более детальном изучении выяснилось, что в начале этого года в Discourse был добавлен компонент хлебных крошек: FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. В настоящее время он отображается только на отдельных страницах администратора.
Поэтому я создал тестовый компонент для отображения хлебных крошек: Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Текущий шаблон выглядит так:
<template>
{{#if this.currentPage}}
{{bodyClass "has-breadcrumbs"}}
<ul class="breadcrumbs {{concat '--' settings.plugin_outlet}}">
<li class="breadcrumbs__item --home">
{{#if this.homePage}}
{{i18n "js.home"}}
{{else}}
<a href="/">{{i18n "js.home"}}</a>
{{/if}}
</li>
{{#if this.parentCategory}}
<li class="breadcrumbs__item --parent">
<a href="/c/{{this.parentCategoryLink}}">
{{this.parentCategoryName}}</a>
</li>
{{/if}}
{{#unless this.homePage}}
<li class="breadcrumbs__item --current">
{{this.currentPage}}
</li>
{{/unless}}
</ul>
{{/if}}
</template>
Теперь я создал ветку, использующую новый компонент DBreadcrumbs: Files · dbreadcrumbs · Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Это сделало бы шаблон более лаконичным и, полагаю, в целом обеспечило бы лучшую согласованность и доступность:
<template>
{{#if this.currentPage}}
{{bodyClass "has-breadcrumbs"}}
<DBreadcrumbsContainer class="{{concat '--' settings.plugin_outlet}}" />
<DBreadcrumbsItem @path="/" @label={{i18n "js.home"}} />
{{#if this.parentCategory}}
<DBreadcrumbsItem
@path="/c/{{this.parentCategoryLink}}"
@label={{this.parentCategoryName}}
/>
{{/if}}
{{#unless this.homePage}}
<DBreadcrumbsItem @path="" @label={{this.currentPage}} />
{{/unless}}
{{/if}}
</template>
Однако при использовании DBreadcrumbsItem порядок отображения родительской категории и подкатегории в отрендеренном компоненте нарушается. Текущая категория вставляется первой:
Интересно, связано ли это с поведением, описанным в сообщении коммита?
- DBreadcrumbsItem — компонент, регистрирующий LinkTo
для цепочки хлебных крошек. Цепочка хлебных крошек > будет
отображаться в зависимости от порядка, в котором эти элементы
рендерятся на странице.