Collega i pulsanti e gli script della barra laterale

Sviluppatore
1

Vorrei aggiungerlo sotto forma di pulsante nella barra laterale (menu hamburger) → Altro o in fondo alla barra laterale e poi collegare JavaScript. Come posso accedere alla barra laterale di Discourse per farlo?

Ho fatto quanto segue, ma non ha funzionato.
L’ho inserito nel <body> del componente.

<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

Se intendi aggiungere un nuovo link qui:

image
image299×413 5.44 KB

Allora, puoi usare l’API addCommunitySectionLink. Hai un esempio nel commento.

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

2 Mi Piace
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>

L’ho inserito nella sezione del corpo HTML del componente in questo modo, ma non sembra essere aggiunto. Non è possibile farlo in questo modo?

4

Dovresti usare il seguente codice in Head invece:

<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"> è importante se vuoi usare l’API.

Dovrebbe funzionare meglio. :+1:

1 Mi Piace
5 

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

Ho provato ad aggiungere il codice sopra alla vista della barra laterale, ma non ha funzionato, quindi l’ho scritto nel formato seguente, facendo riferimento al percorso esistente. Tuttavia, quando il pulsante appare e lo premo, lo script non sembra funzionare correttamente. Stranamente, lo script funziona quando premo il pulsante ‘Topic’ piuttosto che il pulsante che ho creato. Lo script da collegare è stato anche inserito nell’head dell’HTML.


    api.addCommunitySectionLink({
      name: "install",
      route: "discovery.latest",
      title: "install",
      text: "install",
      icon: "download"
    });
1 Mi Piace