Liens de fil d'Ariane

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 :

  1. Les sous-catégories sont maintenant prises en charge dans le fil d’Ariane
  2. 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
  3. Il existe maintenant un paramètre pour activer ou désactiver sur mobile
2 « J'aime »

Bonjour ! Ce composant est génial !

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.

2 « J'aime »

Merci @cristo pour cette excellente suggestion qui est maintenant incluse en tant que paramètre :

3 « J'aime »

Merci @denvergeeks ! Le bouton est maintenant fixe.

Mais, comme vous pouvez le voir dans la vidéo ci-jointe, le bouton ne me ramène pas au même point dans le défilement sur la page d’accueil.

1 « J'aime »

Oui, car c’est un bouton d’accueil, pas un bouton retour !

1 « J'aime »

Mes excuses ! Je pensais que c’était un bouton retour à cause de la flèche.

@denvergeeks merci pour la clarification ! Connaissez-vous un composant qui offre un bouton retour ?

1 « J'aime »

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.

2 « J'aime »

Génial ! Je vais faire des recherches et vous faire part de mes conclusions.

Merci !

2 « J'aime »

@denvergeeks J’ai trouvé un sujet qui pourrait être utile :

Je n’ai pas encore trouvé de thème ou de composant existant qui inclue un bouton retour.

2 « J'aime »

Malheureusement, j’ai le même problème sur un iPhone 16 Pro Max.

2 « J'aime »

Oui, je peux confirmer que cela est apparu après une mise à jour. Je rencontre ce problème sur mon téléphone Android.

2 « J'aime »

Merci @Aaron_Walsh et @cristo de votre signalement ! Veuillez mettre à jour maintenant et faites-moi savoir vos résultats !

4 « J'aime »

Je peux confirmer le problème du côté d’Android. Il a maintenant été corrigé et supprimé.

2 « J'aime »

Corrigé sur mon iPhone !

2 « J'aime »

@denvergeeks Génial ! Le bouton retour fonctionne sur Android.

Merci beaucoup !

2 « J'aime »

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à.

image

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 :

image


Résultat final après tous les ajustements CSS que j’ai apportés :

image

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 !

1 « J'aime »

J’ai juste ouvert une PR corrigeant ce problème. J’espère que les contributeurs pourront l’examiner et la fusionner.

2 « J'aime »

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 :

  1. 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.

Pourriez-vous corriger cela ?
Merci d’avance :raising_hands: