Muito útil, muito obrigado!
Tentei usar este código, mas ele não parece funcionar.
Consigo ver o breadcrumbsContainer e seu fundo branco, mas ele não está gerando os breadcrumbs dentro dele.
Tentei como um componente e diretamente como parte do tema em “CSS/HTML Personalizado”.
Alguma ideia do que posso estar fazendo de errado?
Sim @DogBite a solução é adicionar as tags Script no topo e no final do header.html…
No topo:
<script type="text/discourse-plugin" version="0.8">
No final:
</script>
Assim…
<script type="text/discourse-plugin" version="0.8">
api.onPageChange((url) => {
updateBreadcrumbs(url);
});
const updateBreadcrumbs = (url) => {
// Helper function to reset the breadcrumbs container
const resetBreadcrumbs = () => {
$("#breadcrumbsContainer").empty();
// If on the homepage
if (url === '/') {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME"><i class="home">HOME</i></a>
</li>
<li class="breadcrumb-item active">
Community
</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="/">Community</a>
</li>
`);
}
};
resetBreadcrumbs();
if (url.includes('/c/')) {
// If on a category page
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 fetching category details", error);
}
});
} else if (url.includes('/t/')) {
// If on a topic page
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;
// Now, fetch the category name using the category 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 fetching category details for topic", error);
}
});
}
},
error: function(error) {
console.error("Error fetching topic details", error);
}
});
}
}
</script>
1 curtida
Aqui eu criei um componente de tema muito simples de Breadcrumbs (como links) (onde a página inicial não mostra breadcrumb)… PRs são bem-vindos!
Também (importante) isso atualmente só funciona corretamente com Categorias – não lida com Subcategorias!
Como fica em uma página de Lista de Categorias…
Como fica em uma página de Tópico…
3 curtidas
1 curtida
Olhando um pouco mais para isso, um componente de breadcrumbs foi adicionado ao Discourse no início deste ano: FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. Atualmente, ele é renderizado apenas em páginas administrativas selecionadas.
Então, eu criei um componente de teste para renderizar breadcrumbs: Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. O template atual é:
<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>
Eu criei um branch agora que usa o novo componente dbreadcrumbs: Files · dbreadcrumbs · Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Isso tornaria o template mais conciso e, em geral, proporcionaria melhor consistência e acessibilidade:
<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>
No entanto, usando DBreadcrumbsItem, a ordem da categoria pai e subcategoria se mistura no componente renderizado. A categoria atual é inserida primeiro:
Eu me pergunto se é por causa desse comportamento, declarado na mensagem de commit?
- DBreadcrumbsItem - O componente que registra um LinkTo
para a trilha do breadcrumb. A trilha do breadcrumb
será exibida com base na ordem em que esses itens são renderizados na página.