¿Cómo puedo obtener la lista de etiquetas del tema abierto actualmente?

Desarrollador
1

Hola!

Estoy intentando crear un componente de tema que añada un botón personalizado a los temas etiquetados. Por ejemplo: los temas etiquetados con event-tag tendrán un botón junto a la categoría llamado Evento que enlazará a la página de eventos.

He descubierto dónde me gustaría añadir el botón (a través del plugin-outlet topic-category) a través de esta guía: Developing Discourse Themes & Theme Components

y actualmente tengo esto:

<script type="text/x-handlebars" data-template-name="/connectors/topic-category/foobar2">
    <div style="height: 25px; width: 25px;background: red">
      <a href="<evens_URL>" target="_blank">Enlace</a>
    </div>
  </script>

Así que mi pregunta es, ¿cómo puedo comprobar la lista de etiquetas del tema para ver si el script anterior debería añadir un botón o no?

2

Bien, un poco de progreso:

Descubrí que si uso modifyClass de esta manera:

<script type="text/discourse-plugin" version="0.8">
    api.modifyClass("component:topic-category", {
      didInsertElement: function() {
        this._super();
        console.log("¡Bienvenido a la página de temas!")
      }
    });
    </script>

Puedo acceder a la página del tema y obtener una respuesta que dice “bienvenido”, pero todavía no estoy seguro de cómo puedo extraer las etiquetas de la página actual para ver si debo poblar el botón o no.

3

Ah, he encontrado la solución.

Seguí releyendo esto: Developing Discourse Themes & Theme Components

y descubrí que si simplemente hacía console.log(this), podía mostrar todos los datos de la página, incluidas las etiquetas. Creo que a partir de ahora podré extraer los datos de las etiquetas de la página y comprobar si están en la configuración o no. Una vez que pula esto y piense que está listo para el público, lo publicaré en la categoría de componentes de temas. ¡Solo pensé en compartir mis hallazgos por si alguien más está aprendiendo a crear componentes de temas!

4

Solo como información, el código para obtener la lista de etiquetas en este contexto sería:

<script type="text/discourse-plugin" version="1.4.0">
    api.modifyClass("component:topic-category", {
      pluginId: "returnTags",
      didInsertElement: function() {
        this._super();
        console.log(this.topic.tags)
      }
    });
</script>

Devuelve:

image
image210×102 1.7 KB

:information_source: (pluginId es necesario para evitar una advertencia)