Vincular botones y scripts en la barra lateral

Desarrollador
1

Me gustaría añadirlo en forma de botón en la barra lateral (menú hamburguesa) → Más o en la parte inferior de la barra lateral y luego conectar JavaScript. ¿Cómo accedo a la barra lateral de Discourse para hacerlo?

Hice lo siguiente, pero no funcionó.
Lo puse en el <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

Si te refieres a añadir un nuevo enlace aquí:

image
image299×413 5.44 KB

Entonces, puedes usar la API addCommunitySectionLink. Tienes un ejemplo en el comentario.

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

2 Me gusta
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>

Lo puse en la sección del cuerpo HTML del componente de esta manera, pero parece que no se agrega a más. ¿No es posible hacerlo de esta manera?

4

Deberías usar el siguiente código en Head en su lugar:

<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"> es importante si quieres usar la API.
Eso debería funcionar mejor. :+1:

1 me gusta
5 

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

Intenté agregar el código anterior a la vista de la barra lateral, pero no funcionó, así que lo escribí en el formato a continuación, refiriéndome a la ruta existente. Sin embargo, cuando aparece el botón y lo presiono, el script no parece funcionar correctamente. Curiosamente, el script funciona cuando presiono el botón ‘Topic’ en lugar del botón que creé. El script que se conectará también se colocó en el encabezado del HTML.


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