Molto utile, grazie mille!
Ho provato a usare questo codice ma non sembra funzionare.
Vedo il breadcrumbsContainer e il suo sfondo bianco, ma non genera i breadcrumbs al suo interno.
Ho provato sia come componente sia direttamente come parte del tema sotto “CSS/HTML personalizzato”.
Hai qualche idea di cosa potrei star sbagliando?
Sì @DogBite la soluzione è aggiungere i tag Script in cima e in fondo all’header.html…
In cima:
<script type="text/discourse-plugin" version="0.8">
In fondo:
</script>
Così…
<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 Mi Piace
Ecco un tema Breadcrumbs (come link) molto semplice che ho creato (la home page non mostra breadcrumb)… i PR sono i benvenuti!
Inoltre (cosa importante) al momento funziona correttamente solo con le Categorie: non gestisce le Sottocategorie!
Ecco come appare in una pagina Elenco Categorie…
Ecco come appare in una pagina Argomento…
3 Mi Piace
1 Mi Piace
Guardando un po’ più a fondo, un componente breadcrumbs è stato aggiunto a Discourse all’inizio di quest’anno: FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. Attualmente viene visualizzato solo in pagine Admin selezionate.
Quindi avevo creato un componente di test per visualizzare i breadcrumbs: Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Il template attuale è:
<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>
Ho creato un branch ora che utilizza il nuovo componente dbreadcrumbs: Files · dbreadcrumbs · Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Ciò renderebbe il template più conciso e, immagino, fornirebbe generalmente una migliore coerenza e accessibilità:
<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>
Tuttavia, utilizzando DBreadcrumbsItem, l’ordine della categoria padre e della sottocategoria viene mescolato sul componente renderizzato. La categoria corrente viene inserita per prima:
Mi chiedo se sia a causa di quel comportamento, dichiarato nel messaggio di commit?
- DBreadcrumbsItem - Il componente che registra un LinkTo
per il percorso dei breadcrumb. Il percorso dei breadcrumb
verrà visualizzato in base all’ordine in cui questi elementi vengono renderizzati sulla pagina.