Eu pesquisei sobre este tópico, mas não consigo encontrar nenhuma solução funcional.
Como adiciono um breadcrumb básico simples mostrando categorias, subcategorias.
Por exemplo:
Home / Tech Talks / WordPress
Quero adicioná-lo logo abaixo da Navegação Superior.
Isso não é um tipo de breadcrumb? O que você está perguntando, mais especificamente? Você tem um mockup, talvez?
Este é provavelmente o que @asugar tinha em mente.
Olá @asugar. 
Você se importaria de elaborar um pouco sobre o que você quer dizer? Chamamos as categorias e tags de “breadcrumbs” de auxílio de navegação; @Canapin as destaca na captura de tela dele.
Normalmente, eu mencionaria mostrar uma captura de tela e marcar quando você gostaria delas, e então trabalharíamos a partir daí, mas tenho outra observação, primeiro:
Acho que se você adicionasse isso a cada página, isso mostraria essencialmente vários menus de navegação idênticos, e próximos uns dos outros.
Como alternativa, há algo que poderíamos fazer com a navegação de breadcrumbs existente para fazê-la funcionar para o seu site? 
Também vale a pena esclarecer o significado de “breadcrumbs”. Estive em inúmeras conversas onde duas partes queriam dizer coisas diferentes:
@asugar, a qual tipo de breadcrumbs você está se referindo?
Eu não deveria adivinhar o que @asugar espera obter, mas talvez semelhante a todas as outras páginas da web — e o WordPress usa principalmente: navegação em migalhas de pão construída usando categorias.
Mas o Discourse tem apenas uma construção de dois níveis de profundidade, então pode ser apenas home - categoria - subcategoria (claro, pode haver número de página também, mas isso é inútil e acho que quase impossível de construir).
Portanto, uma migalha de pão não oferece nada além de ocupar espaço.
Olá a todos. O @Jagster está certo em acertar. Eu queria links para categorias e subcategorias. Como\nInício - Categoria - Subcategoria - Subsubcategoria - … \n\nEu consigo ver a navegação existente no Discourse, mas não é clicar e ir para a categoria/subcategorias. Ao clicar, mostra um menu suspenso.\n\nÉ realmente impossível adicionar uma navegação simples como eu quero?
É possível, o que todos estavam tentando dizer é que pode haver uma solução alternativa diferente do que você está pedindo, e eles estavam se perguntando se você estaria interessado nisso. Dito isso, é possível, mas não de forma nativa. Você teria que projetar ou criar algo personalizado para isso. Exemplos onde algo semelhante foi criado são:
Custom top navigation links - theme - Discourse Meta e Custom Header Links - theme - Discourse Meta
Isso é navegação/menu e eu já tenho isso. Breadcrumb não é navegação/menu. Eu quero breadcrumb.
Entendo, é por isso que usei a palavra “semelhante”, eles são semelhantes no sentido de que a implementação ou o desenvolvimento é semelhante, não exatamente o mesmo ou parecido, mas semelhante ou, eu diria, comparável.
Compartilhei isso ou mencionei que eram semelhantes porque senti que poderia ser útil ver que algo tecnicamente semelhante é possível no Discourse.
Visto que foi estabelecido que isso atualmente não é possível no Discourse sem algo personalizado, talvez você precise criar um tópico de Marketplace para isso.
Este é um breadcrumb típico encontrado em qualquer software de fórum, o de cima é do vBulletin. É disso que eu estava falando.
O menu é efetivamente um breadcrumb (como em mostra categoria e subcategoria, em páginas de categoria e subcategoria), então eu acho que você poderia mudá-lo de usar menus suspensos para usar hiperlinks simples para a categoria ou subcategoria atual. Aposto que qualquer pessoa que saiba escrever um plugin poderia fazer isso.
O topo das páginas de tópicos, quando você rola para baixo, já mostra a categoria e subcategoria (e tags), então talvez você já esteja feliz com isso. Imagino que um autor de plugin poderia movê-los para uma parte diferente da tela para você.
Se você pagar por isso e deixá-lo disponível gratuitamente, eu posso usá-lo…
Eu gostaria que já existisse um plugin, alguém conhece?
Alguém conseguiu resolver o problema de exibição de breadcrumbs clássicos na página?
Pode não ser a melhor maneira de fazer isso, mas funcionou para nós:
header.html ou plugin separado:
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);
}
});
}
}
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;
}
}
}
Em nosso template after_header.html:
<div id="breadcrumbsContainer"></div>
Para aqueles que querem ver como fica:
(HOME será substituído por um SVG por padrão, eu ajustei o CSS)
Algumas partes do breadcrumb são geradas lentamente após uma consulta ajax.
Além disso, quando abrimos um tópico, o conteúdo não é rolado para o topo por padrão.
Muito bom. Espero que depois de algumas atualizações ele entre no núcleo
Eu adoraria ter isso!
Existe uma opção para isso, ou preciso envolver programadores?
Se você quer um componente confiável, ele precisa do trabalho do desenvolvedor.
Eu não recomendaria usar o compartilhado neste tópico.
Obrigado pela sua resposta!
Vou envolver um desenvolvedor para ajudar nisso, mas você poderia me dizer quais são os principais problemas com esse código?
Muito apreciado!
Não sou um desenvolvedor e se alguém conhece os componentes do Discourse melhor do que eu, isso traria respostas melhores do que as minhas
2 pontos principais que vejo:
As chamadas AJAX para retornar dados são muito, muito desotimizadas. Tenho certeza de que você pode fazer um componente assim sem fazer nenhuma solicitação como essa. Elas deixam tudo lento e fazem com que o breadcrumb seja preenchido com atraso.
O componente quase não usa a API JS do Discourse, que provavelmente pode retornar os dados de que precisamos e decorar/inserir um template da maneira certa em vez de injetar manualmente código HTML no DOM.
