Vincular botões e scripts na barra lateral

Dev
1

Gostaria de adicioná-lo na forma de um botão na barra lateral (menu hambúrguer) → Mais ou na parte inferior da barra lateral e, em seguida, conectar o JavaScript. Como faço para acessar a barra lateral do Discourse para fazer isso?

Fiz o seguinte, mas não funcionou.
Coloquei no <body> do 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 você quer dizer adicionar um novo link aqui:

image
image299×413 5.44 KB

Então, você pode usar a API addCommunitySectionLink. Você tem um exemplo no comentário.

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

2 curtidas
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>

Eu o coloquei na seção do corpo do HTML do componente assim, mas ele não parece ser adicionado. Não é possível fazer dessa forma?

4

Você deve usar o seguinte código no Head em vez disso:

<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 você quiser usar a API.

Isso deve funcionar melhor. :+1:

1 curtida
5 

    <script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "install",
      route: "/install",
      title: "install",
      text: "install",
      icon: "download"
    });
  </script>

Tentei adicionar o código acima à visualização da barra lateral, mas não funcionou, então escrevi no formato abaixo, referindo-me ao caminho existente. No entanto, quando o botão aparece e eu o pressiono, o script não parece funcionar corretamente. Curiosamente, o script funciona quando pressiono o botão ‘Tópico’ em vez do botão que criei. O script a ser conectado também foi colocado no cabeçalho do HTML.


    <script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "install",
      route: "discovery.latest",
      title: "install",
      text: "install",
      icon: "download"
    });
  </script>
1 curtida