Merci beaucoup @manuel – J’ai mis à jour ce composant avec votre code (et ajouté quelques extraits de code supplémentaires) pour activer des fonctionnalités supplémentaires :
Les sous-catégories sont maintenant prises en charge dans le fil d’Ariane
Le fil d’Ariane complet apparaît maintenant sur toutes les pages de liste de catégories et de sous-catégories en plus des pages de sujets
Il existe maintenant un paramètre pour activer ou désactiver sur mobile
Il y a juste un détail que vous savez peut-être comment corriger.
Le bouton retour disparaît lorsque vous faites défiler vers le bas (veuillez voir la vidéo ci-jointe)… est-il possible de fixer/faire flotter le bouton retour en haut de l’écran afin qu’il reste visible même lors du défilement ?
Contexte : la communauté est intégrée (webview) dans notre application mobile.
Non, je ne suis au courant d’aucun TC existant qui comporte (ou inclut) un véritable bouton Retour. Il pourrait bien y avoir quelque chose qui en inclut un.
Mais je reconnais l’utilité d’avoir un bouton Retour dans la navigation du site, donc je vais créer un TC distinct qui le fournira.
Peut-être pourriez-vous vérifier s’il existe un thème ou un composant de thème existant qui en inclut un. Le trouver pourrait accélérer mon processus.
J’ai remarqué qu’il n’y avait aucun moyen de décider où placer les fil d’Ariane, ce qui serait formidable. Par exemple, j’utilise les bannières de catégorie et j’aimerais que les fil d’Ariane soient au-dessus de celles-ci.
Ils se perdent un peu lorsqu’ils sont en dessous.
Y a-t-il une chance de changer cela ?
Merci
Je viens de remarquer quelque chose qui pourrait être corrigé (ou du moins avoir la possibilité de l’activer ou de le désactiver). Je ne pense pas que le dernier / doive être là.
Ce serait donc juste Accueil / Discussion générale au lieu de Accueil / Discussion générale /
EDIT :
Je viens d’utiliser du CSS pour faire cela, mais je pense que cela pourrait être le défaut. Au cas où quelqu’un le voudrait :
/* Supprimer le séparateur (contenu ::after) du dernier élément du fil d'Ariane */
.breadcrumbs li:last-child::after {
content: none;
}
C’est un petit ajustement, mais cela me semble mieux. Augmentez la marge inférieure à 1rem pour lui donner plus d’espace pour “respirer”, mais cela le centre également lorsqu’il y a une bannière (si nous devons conserver cette position sur la page). Regardez mon image précédente (le 0,5rem par défaut) par rapport à l’utilisation de 1rem :
Résultat final après tous les ajustements CSS que j’ai apportés :
CSS :
/* fil d'Ariane - supprimer l'arrière-plan et augmenter la marge inférieure */
.breadcrumbs {
background-color: transparent !important;
margin-bottom: 1rem;
}
/* fil d'Ariane - masquer la flèche de retour du lien Accueil */
.breadcrumbs__title .d-icon {
display: none;
}
/* fil d'Ariane - supprimer le séparateur (contenu ::after) du dernier élément du fil d'Ariane */
.breadcrumbs li:last-child::after {
content: none;
}
Salut, j’ai un avertissement dans mon forum car les changements à venir dans le cœur de Discourse :
[Avis Admin] L’un de vos thèmes ou plugins doit être mis à jour pour prendre en charge les changements à venir dans le cœur de Discourse. (id:discourse.script-tag-discourse-plugin) Problème identifié : “Liens fil d’Ariane”.
J’utilise le cloud Discourse, puis-je résoudre cela ou dois-je attendre la mise à jour du plugin ?
@manuel Sur GitHub, j’ai remarqué que vous êtes l’un des contributeurs à ce composant, j’espère donc que vous ne voyez pas d’inconvénient à ce que je vous mentionne ici ?
Je suis sûr que d’autres personnes voient ce même message :
[Admin Notice] Le thème 'Breadcrumb Links' contient du code qui doit être mis à jour. (id:discourse.script-tag-discourse-plugin) (en savoir plus)
Et le lien « En savoir plus » redirige vers :
Y a-t-il une chance que le composant soit mis à jour ?
Merci !
Merci de partager cela ! Cela fonctionne sans le message d’avertissement.
J’ai un autre problème que j’ai mentionné ici :
Pour ce problème, j’ai demandé à ChatGPT et il a dit (puisque je ne suis pas développeur) :
Afficher le message de ChatGPT
Le problème vient probablement de la façon dont vous extrayez le topicId de l’URL :
const topicId = url.split('/')[2];
Si votre URL contient des motifs plus complexes (comme des titres avec des espaces, des caractères spéciaux ou des slugs non standard), cette simple division n’obtiendra pas de manière fiable le bon ID de sujet.
Pourquoi cela pose problème :
Les URL comme /t/3ple-2015-2019-title/12345 ont l’ID numérique du sujet à la fin, mais votre code suppose que l’ID du sujet est toujours le 3ème segment.
Si la structure de votre URL varie, vous récupérez parfois un slug ou une partie du titre au lieu de l’ID.
Cela casse votre requête AJAX (/t/${topicId}.json) car vous pourriez envoyer un ID de sujet ou un slug invalide, renvoyant des informations de catégorie incorrectes ou par défaut (comme “General”).
Comment corriger :
Utilisez une méthode plus fiable pour extraire l’ID du sujet de l’URL :
Extrayez l’ID du sujet du dernier segment numérique de l’URL.
Les URL de sujets Discourse ressemblent souvent à /t/{slug}/{id}, par exemple :
/t/3ple-2015-2019-title/12345
Ici, 12345 est l’ID du sujet.
Remplacez ceci :
const topicId = url.split('/')[2];
Par ceci :
const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1]; // dernier segment, attendu comme ID numérique
Pour être plus sûr, validez que topicId est un nombre :
if (!/^\\d+$/.test(topicId)) {
console.error("ID de sujet invalide extrait de l'URL :", topicId);
return; // arrêter l'exécution
}
Résumé : mettez à jour votre extrait de code dans updateBreadcrumbs comme ceci :
if (url.includes('/t/')) {
const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1];
if (!/^\\d+$/.test(topicId)) {
console.error("ID de sujet invalide extrait de l'URL :", topicId);
return;
}
// Ensuite, continuez vos appels AJAX avec topicId
}
De cette façon, vous obtenez toujours l’ID numérique du sujet, quelles que soient les titres complexes ou avec des espaces dans l’URL, ce qui corrige la recherche de la catégorie et du chemin du fil d’Ariane.