Lier les boutons de la barre latérale et les scripts

Dev
1

Je voudrais l’ajouter sous forme de bouton dans la barre latérale (menu hamburger) → Plus ou en bas de la barre latérale, puis connecter JavaScript. Comment puis-je accéder à la barre latérale de Discourse pour ce faire ?

J’ai fait ce qui suit, mais cela n’a pas fonctionné.
Je l’ai mis dans le <body> du composant.

<div class="sidebar-custom-sections">
  <ul class="sidebar-more-section-links-details-content-main">
    <li data-list-item-name="Install" class="sidebar-section-link-wrapper" id="sidebar_install_wrapper">
      <a href="#" rel="noopener noreferrer" target="_self" data-link-name="Install" class="sidebar-section-link sidebar-row" id="sidebar_install_button">
        <span class="sidebar-section-link-prefix icon">
          <svg class="fa d-icon d-icon-download svg-icon prefix-icon svg-string" xmlns="http://www.w3.org/2000/svg">
            <use href="#download"></use>
          </svg>
        </span>
        <span class="sidebar-section-link-content-text">
          Install
        </span>
      </a>
    </li>
  </ul>
</div>
2

Si vous voulez ajouter un nouveau lien ici :

image
image299×413 5.44 KB

Alors, vous pouvez utiliser l’API addCommunitySectionLink. Vous avez un exemple dans le commentaire.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L2414-L2471

2 « J'aime »
3 
<script>
api.addCommunitySectionLink({
  name: "unread",
  route: "discovery.unread",
  title: I18n.t("some.unread.title"),
  text: I18n.t("some.unread.text"),
  icon: "fa-envelope"
});
</script>

Je l’ai mis dans la section du corps HTML du composant comme ceci, mais il ne semble pas être ajouté davantage. Est-il impossible de le faire de cette façon ?

4

Vous devriez utiliser le code suivant dans Head à la place :

<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "unread",
      route: "discovery.unread",
      title: I18n.t("some.unread.title"),
      text: I18n.t("some.unread.text"),
      icon: "fa-envelope"
    });
</script>

<script type="text/discourse-plugin" version="0.8"> est important si vous souhaitez utiliser l’API.

Cela devrait mieux fonctionner. :+1:

1 « J'aime »
5 

    api.addCommunitySectionLink({
      name: "install",
      route: "/install",
      title: "install",
      text: "install",
      icon: "download"
    });

J’ai essayé d’ajouter le code ci-dessus à la vue de la barre latérale, mais cela n’a pas fonctionné, j’ai donc écrit dans le format ci-dessous, en me référant au chemin existant. Cependant, lorsque le bouton apparaît et que je clique dessus, le script ne semble pas fonctionner correctement. Curieusement, le script fonctionne lorsque j’appuie sur le bouton « Topic » plutôt que sur le bouton que j’ai créé. Le script à connecter a également été placé dans l’en-tête du HTML.


    api.addCommunitySectionLink({
      name: "install",
      route: "discovery.latest",
      title: "install",
      text: "install",
      icon: "download"
    });
1 « J'aime »