Ho cercato su questo argomento ma non riesco a trovare alcuna soluzione funzionante.
Come posso aggiungere una semplice breadcrumb di base che mostri categorie e sottocategorie?
Ad esempio:
Home / Tech Talks / WordPress
Voglio aggiungerlo appena sotto la navigazione principale.
Questo è probabilmente ciò che @asugar aveva in mente.
Ciao @asugar. 
Ti dispiacerebbe elaborare un po’ su cosa intendi? Noi chiamiamo le categorie e i tag “breadcrumbs” (navigazione di aiuto); @Canapin li evidenzia nel loro screenshot.
Normalmente menzionerei di mostrare uno screenshot e indicare quando li vorresti, e poi partiremmo da lì, ma ho un’altra osservazione, prima:
Penso che se lo aggiungessi a ogni pagina, mostrerebbe essenzialmente menu di navigazione multipli identici, e molto vicini tra loro.
In alternativa, c’è qualcosa che potremmo fare con la navigazione a breadcrumbs esistente per farla funzionare per il tuo sito? 
Vale anche la pena chiarire il significato di “breadcrumbs”. Ho partecipato a numerose conversazioni in cui due parti intendevano cose diverse:
@asugar, a quale tipo di breadcrumbs ti riferisci?
Non dovrei indovinare cosa @asugar spera di ottenere, ma forse simile a tutte le altre pagine web — e WordPress usa principalmente: breadcrumb di navigazione costruiti usando le categorie.
Ma Discourse ha solo una costruzione profonda di due livelli, quindi può essere solo home - categoria - sottocategoria (certo, ci potrebbe essere anche il numero di pagina, ma è inutile e ritengo quasi impossibile da costruire).
Quindi, un breadcrumb non dà altro che consumare spazio.
Ciao a tutti. @Jagster ha ragione nell’individuare il problema. Volevo link a categorie e sottocategorie. Come\nHome - Categoria - Sottocategoria - Sottosottocategoria - … \n\nPosso vedere la navigazione esistente in Discourse ma non è clicca e vai alla categoria/sottocategorie. Al clic mostra un menu a discesa.\n\nÈ davvero impossibile aggiungere una semplice navigazione come la desidero?
È possibile, quello che tutti stavano cercando di dire è che potrebbe esserci una soluzione alternativa diversa da quella che stai chiedendo, e si stavano chiedendo se fossi interessato a quella. Detto questo, è possibile ma non subito. Dovresti progettare o creare qualcosa di personalizzato. Esempi, in cui è stato creato qualcosa di simile, sono:
Custom top navigation links - theme - Discourse Meta e Custom Header Links - theme - Discourse Meta
Quella è la navigazione/menu e l’ho già. Il breadcrumb non è navigazione/menu. Voglio il breadcrumb.
Capisco, è per questo che ho usato la parola “simile”, sono simili nel senso che l’implementazione o lo sviluppo è simile, non esattamente uguali o simili o nemmeno vicini tra loro, ma simili o dovrei dire comparabili.
Ho condiviso o menzionato che erano simili perché ho pensato che potesse essere utile vedere che qualcosa di tecnicamente simile è possibile in Discourse.
Dato che è stato stabilito che al momento non è possibile in Discourse senza qualcosa di personalizzato, potrebbe essere necessario creare un argomento Marketplace per questo.
Questo è un tipico breadcrumb trovato su qualsiasi software di forum, sopra è da vBulletin. Questo è ciò di cui stavo parlando.
Il menu è di fatto un breadcrumb (mostra categoria e sottocategoria, nelle pagine di categoria e sottocategoria) quindi penso che potresti cambiarlo da menu a discesa a semplici collegamenti ipertestuali alla categoria o sottocategoria corrente. Scommetto che chiunque sappia scrivere un plugin potrebbe farlo.
La parte superiore delle pagine degli argomenti, quando scorri verso il basso, mostra già la categoria e la sottocategoria (e i tag), quindi forse sei già soddisfatto di questo. Immagino che un autore di plugin potrebbe spostarli in una parte diversa dello schermo per te.
Se paghi per questo e lo rendi liberamente disponibile potrei usarlo…
Vorrei che ci fosse già un plugin, qualcuno lo conosce?
Qualcuno è riuscito a risolvere il problema della visualizzazione dei breadcrumb classici sulla pagina?
Potrebbe non essere il modo migliore per farlo, ma ha funzionato per noi:
header.html o plugin separato:
api.onPageChange((url) => {
updateBreadcrumbs(url);
});
const updateBreadcrumbs = (url) => {
// Funzione di supporto per reimpostare il contenitore dei breadcrumb
const resetBreadcrumbs = () => {
$("#breadcrumbsContainer").empty();
// Se sulla 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/')) {
// Se su una pagina di categoria
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("Errore nel recupero dei dettagli della categoria", error);
}
});
} else if (url.includes('/t/')) {
// Se su una pagina di argomento
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;
// Ora, recupera il nome della categoria usando l'ID della categoria
$.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("Errore nel recupero dei dettagli della categoria per l'argomento", error);
}
});
}
},
error: function(error) {
console.error("Errore nel recupero dei dettagli dell'argomento", 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;
}
}
}
Nel nostro template after_header.html:
<div id="breadcrumbsContainer"></div>
Per coloro che vogliono vedere come appare:
(HOME verrà sostituito di default da un SVG, ho modificato il CSS)
Alcune parti del breadcrumb vengono generate lentamente dopo una query ajax.
Inoltre, quando apriamo un argomento, il contenuto non viene fatto scorrere in cima per impostazione predefinita.
Molto bene. Spero che dopo alcuni aggiornamenti entrerà nel core
Mi piacerebbe averlo!
C’è un’opzione per questo, o devo coinvolgere dei programmatori?
Se vuoi un componente affidabile, ha bisogno del lavoro di uno sviluppatore.
Non consiglierei di usare quello condiviso in questo argomento.
Grazie per la tua risposta!
Coinvolgerò uno sviluppatore per aiutarmi, ma potresti gentilmente dirmi qual è/quali sono i problemi principali con quel codice?
Molto apprezzato!
Non sono uno sviluppatore e se qualcuno conosce meglio i componenti di Discourse di me, ciò porterebbe a risposte migliori delle mie
2 punti principali che vedo:
Le chiamate AJAX per restituire dati sono molto, molto non ottimizzate. Sono abbastanza sicuro che puoi fare un componente del genere senza effettuare alcuna richiesta in questo modo. Rendono tutto lento e fanno sì che il breadcrumb si popoli con un ritardo.
Il componente quasi non utilizza l’API JS di Discourse, che probabilmente può restituire i dati di cui abbiamo bisogno e decorare/inserire un template nel modo giusto invece di iniettare manualmente codice HTML nel DOM.
