Très utile, merci beaucoup !
J’ai essayé d’utiliser ce code mais il ne semble pas fonctionner.
Je peux voir le breadcrumbsContainer et son fond blanc, mais il ne génère pas les miettes de pain à l’intérieur.
Je l’ai essayé en tant que composant et directement dans le thème sous « CSS/HTML personnalisé ».
Avez-vous une idée de ce que je pourrais faire de mal ?
Oui @DogBite la solution est d’ajouter les balises Script en haut et en bas du header.html…
En haut :
<script type="text/discourse-plugin" version="0.8">
En bas :
</script>
Comme ceci…
<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 « J'aime »
Voici un composant de thème très simple de fil d’Ariane (sous forme de liens) que j’ai créé (la page d’accueil n’affiche pas de fil d’Ariane)… Les Pull Requests sont les bienvenues !
Aussi (et c’est important), cela ne fonctionne actuellement correctement qu’avec les catégories – il ne gère pas les sous-catégories !
Voici à quoi cela ressemble sur une page de liste de catégories…
Voici à quoi cela ressemble sur une page de sujet…
3 « J'aime »
1 « J'aime »
En regardant de plus près, un composant fil d’Ariane a été ajouté à Discourse plus tôt cette année : FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. Il n’est actuellement rendu que sur certaines pages d’administration.
J’avais donc créé un composant de test pour rendre les fils d’Ariane : Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Le modèle actuel est :
<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>
J’ai maintenant créé une branche qui utilise le nouveau composant dbreadcrumbs : Files · dbreadcrumbs · Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Cela rendrait le modèle plus concis et, je suppose, offrirait une meilleure cohérence et 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>
Cependant, en utilisant DBreadcrumbsItem, l’ordre de la catégorie parente et de la sous-catégorie est mélangé sur le composant rendu. La catégorie actuelle est insérée en premier :
Je me demande si c’est à cause de ce comportement, indiqué dans le message de commit ?
- DBreadcrumbsItem - Le composant qui enregistre un LinkTo
pour le fil d’Ariane. Le fil d’Ariane s’affichera
en fonction de l’ordre dans lequel ces éléments sont rendus sur la page.