Comment ajouter un fil d'Ariane ?

J’ai cherché sur ce sujet mais je n’ai trouvé aucune solution fonctionnelle.
Comment puis-je ajouter un simple fil d’Ariane de base montrant les catégories, sous-catégories.
Par exemple :

Accueil / Tech Talks / WordPress

Je veux l’ajouter juste en dessous de la navigation principale.

5 « J'aime »

N’est-ce pas une sorte de fil d’Ariane ? Que demandez-vous plus précisément ? Avez-vous une maquette peut-être ?

3 « J'aime »

C’est probablement ce que @asugar avait en tête.

2 « J'aime »

Salut @asugar. :wave:

Pourriez-vous développer un peu ce que vous entendez par là ? Nous appelons l’aide à la navigation par catégories et balises « fil d’Ariane » ; @Canapin les met en évidence dans sa capture d’écran.

Normalement, je mentionnerais de montrer une capture d’écran et d’indiquer où vous aimeriez les avoir, puis nous travaillerions à partir de là, mais j’ai une autre observation, d’abord :

Je pense que si vous ajoutiez cela à chaque page, cela montrerait essentiellement plusieurs menus de navigation identiques, et à proximité les uns des autres.

Alternativement, y a-t-il quelque chose que nous pourrions faire avec la navigation fil d’Ariane existante pour qu’elle fonctionne pour votre site ? :slight_smile:


Il est également utile de clarifier la signification de « fil d’Ariane ». J’ai eu de nombreuses conversations où deux parties signifiaient des choses différentes :

  • Fil d’Ariane hiérarchique comme reflet de la structure du site (catégories/sous-catégories/balises, ou livres/titre/chapitre)
  • Fil d’Ariane de suivi comme historique des pages visitées (mon exemple préféré est dokuwiki [DokuWiki], cliquez sur quelques liens aléatoires et vérifiez l’en-tête)

@asugar, à quel type de fil d’Ariane faites-vous référence ? :slight_smile:

3 « J'aime »

Je ne devrais pas deviner ce que @asugar espère obtenir, mais peut-être similaire à toutes les autres pages Web — et WordPress utilise principalement : un fil d’Ariane de navigation construit à l’aide de catégories.

Mais Discourse n’a qu’une construction à deux niveaux de profondeur, donc cela ne peut être que accueil - catégorie - sous-catégorie (bien sûr, il pourrait y avoir aussi un numéro de page, mais c’est inutile et je pense qu’il est presque impossible à construire).

Par conséquent, un fil d’Ariane n’apporte rien d’autre que de manger de l’espace.

1 « J'aime »

Bonjour à tous. @Jagster a raison de le cerner. Je voulais des liens vers les catégories et sous-catégories. Comme
Accueil - Catégorie - Sous-catégorie - Sous-sous-catégorie - …

Je peux voir la navigation existante dans Discourse, mais ce n’est pas un clic et aller à la catégorie/sous-catégories. Au clic, cela affiche un menu déroulant.

Est-il vraiment impossible d’ajouter une navigation simple comme je le souhaite ?

3 « J'aime »

C’est possible, ce que tout le monde essayait de dire, c’est qu’il pourrait y avoir une solution alternative différente de ce que vous demandez, et ils se demandaient si cela vous intéresserait. Cela dit, c’est possible mais pas prêt à l’emploi. Vous devriez concevoir ou créer quelque chose de personnalisé. Des exemples où quelque chose de similaire a été créé sont :

Custom top navigation links - theme - Discourse Meta et Custom Header Links - theme - Discourse Meta

1 « J'aime »

C’est la navigation/le menu et je l’ai déjà. Le fil d’Ariane n’est pas la navigation/le menu. Je veux le fil d’Ariane.

1 « J'aime »

Je comprends, c’est pourquoi j’ai utilisé le mot « similaire », ils sont similaires dans le sens où l’implémentation ou le développement est similaire, pas exactement la même chose ou identique ou même proche l’un de l’autre, mais similaire ou devrais-je dire comparable.

Je l’ai partagé ou mentionné qu’ils étaient similaires parce que j’ai estimé que cela pourrait être utile de voir que quelque chose de techniquement similaire est possible dans Discourse.

Étant donné qu’il a été établi que ce n’est actuellement pas possible dans Discourse sans quelque chose de personnalisé, vous devrez peut-être créer un sujet Marketplace pour cela.

breadcrumb

Ceci est un fil d’Ariane typique que l’on trouve sur n’importe quel logiciel de forum, ci-dessus, il provient de vBulletin. C’est de cela que je parlais.

2 « J'aime »

Le menu est en fait un fil d’Ariane (car il affiche la catégorie et la sous-catégorie, sur les pages de catégorie et de sous-catégorie), donc je pense que vous pourriez le changer de menus déroulants à de simples hyperliens vers la catégorie ou la sous-catégorie actuelle. Je parie que quiconque sait écrire un plugin pourrait le faire.

Le haut des pages de sujet, lorsque vous faites défiler vers le bas, affiche déjà la catégorie et la sous-catégorie (et les tags), donc peut-être que vous êtes déjà satisfait de cela. J’imagine qu’un auteur de plugin pourrait les déplacer vers une autre partie de l’écran pour vous.

Si vous payez pour cela et le laissez être librement disponible, je pourrais l’utiliser… :slight_smile:

3 « J'aime »

J’aimerais qu’il existe déjà un plugin, quelqu’un le connaît ?

2 « J'aime »

Quelqu’un a-t-il réussi à résoudre le problème d’affichage des miettes de pain classiques sur la page ?

Ce n’est peut-être pas la meilleure façon de faire, mais cela a fonctionné pour nous :

header.html ou plugin séparé :

    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">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">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);
              }
          });
      }
    }

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;
      }
  }
}

Dans notre template after_header.html :

<div id="breadcrumbsContainer"></div>
3 « J'aime »

Pour ceux qui veulent voir à quoi ça ressemble :

(HOME sera remplacé par un SVG par défaut, j’ai modifié le CSS)

Certaines parties du fil d’Ariane sont générées lentement après une requête ajax.

De plus, lorsque nous ouvrons un sujet, le contenu n’est pas défilé vers le haut par défaut.

3 « J'aime »

Très bien. J’espère qu’après quelques mises à niveau, il entrera dans le cœur

J’adorerais avoir ça !

Y a-t-il une option pour cela, ou dois-je faire appel à des programmeurs ?

Si vous voulez un composant fiable, il faut le travail d’un développeur. :slight_smile:

Je ne recommanderais pas d’utiliser celui partagé sur ce sujet.

Merci pour votre réponse !

Je vais faire appel à un développeur pour m’aider, mais pourriez-vous me dire quels sont les principaux problèmes avec ce code ?

Merci beaucoup !

Je ne suis pas un développeur et si quelqu’un connaît mieux les composants de Discourse que moi, cela apporterait de meilleures réponses que les miennes :slight_smile:

2 points principaux que je vois :

  • Les appels AJAX pour retourner des données sont très, très peu optimisés. Je suis à peu près sûr que vous pouvez faire un tel composant sans faire de requêtes comme celle-ci. Ils rendent l’ensemble lent et font que le fil d’Ariane se remplit avec un délai.

  • Le composant n’utilise presque pas l’API JS de Discourse, qui peut probablement retourner les données dont nous avons besoin, et décorer/insérer un modèle de la bonne manière au lieu d’injecter manuellement du code HTML dans le DOM.

3 « J'aime »