Cómo agregar contenido HTML único debajo del cuerpo del tema en el foro discourse para temas específicos

Desarrollador
1

Estoy trabajando en un foro de Discourse y necesito agregar contenido HTML único debajo del cuerpo del tema para temas específicos. El contenido HTML solo debe mostrarse en ciertos temas y no en todos.

Actualmente, he agregado el contenido HTML usando el siguiente código:

<script type="text/x-handlebars" data-template-name="connectors/topic-area-bottom/custom-html">
  <div class="banner-control">
    <!-- El contenido HTML único va aquí -->
  </div>
</script>

Este código se agrega a la salida connectors/topic-area-bottom, pero está mostrando el contenido en todos los temas. Mi objetivo es que este contenido aparezca solo en temas específicos, no en todas las páginas de temas.

Detalles:
La página del tema no tiene una clase de cuerpo única como las páginas de categoría. Necesito una forma de renderizar condicionalmente este contenido HTML según el tema que se esté viendo. Pregunta: ¿Cómo puedo modificar mi código o configuración en Ember.js para asegurar que el contenido HTML personalizado debajo de la salida topic-area-bottom solo se muestre para temas específicos? ¿Hay alguna forma de agregar una condición para verificar identificadores de temas específicos u otros identificadores?

¡Cualquier orientación o ejemplo sería muy apreciado!

2

this.model contiene los datos del tema, como el id, title, etc. Puedes usar eso.

Por ejemplo, para permitir los IDs de tema 90 o 38, escribirías:

<script type="text/x-handlebars" data-template-name="connectors/topic-area-bottom/custom-html">
  {{#if (or (eq this.model.id 90) (eq this.model.id 38))}}
    <div class="banner-control">
      <!-- El contenido HTML único va aquí -->
    </div>
  {{/if}}
</script>

Sin embargo, te animo a usar la Theme CLI y trabajar con archivos divididos.

Será difícil añadir más condiciones o tener algo de lógica allí. Sería posible usar registerConnectorClass, pero está obsoleto.

La forma moderna es usar renderInOutlet con un componente glimmer, por ejemplo, GitHub - discourse/discourse-custom-header-links.
Dices que quieres renderizar en un outlet específico:

Tienes la plantilla definida aquí. Observa this.shouldShow
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.hbs#L1

Luego puedes añadir tu lógica aquí para indicar si el componente se muestra o no:
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.js#L5-L7

Espero que esto ayude. Hazme saber si necesitas ayuda adicional. :+1:

5 Me gusta
3

Gracias por la detallada solución, muy apreciada.

2 Me gusta
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.