Como Adicionar Conteúdo HTML Único Abaixo do Corpo do Tópico em fórum discourse para Tópicos Específicos

Dev
1

Estou trabalhando em um fórum do Discourse e preciso adicionar conteúdo HTML exclusivo abaixo do corpo do tópico para tópicos específicos. O conteúdo HTML deve ser exibido apenas em determinados tópicos e não em todos.

Atualmente, adicionei o conteúdo HTML usando o seguinte código:

<script type="text/x-handlebars" data-template-name="connectors/topic-area-bottom/custom-html">
  <div class="banner-control">
    <!-- Conteúdo HTML exclusivo vai aqui -->
  </div>
</script>

Este código é adicionado ao outlet connectors/topic-area-bottom, mas está exibindo o conteúdo em todos os tópicos. Meu objetivo é que este conteúdo apareça apenas em tópicos específicos, não em todas as páginas de tópicos.

Detalhes:
A página do tópico não tem uma classe de corpo exclusiva como as páginas de categoria. Preciso de uma maneira de renderizar condicionalmente este conteúdo HTML com base no tópico que está sendo visualizado. Pergunta: Como posso modificar meu código ou configuração no Ember.js para garantir que o conteúdo HTML personalizado sob o outlet topic-area-bottom seja exibido apenas para tópicos específicos? Existe uma maneira de adicionar uma condição para verificar IDs de tópicos específicos ou outros identificadores?

Qualquer orientação ou exemplo seria muito apreciado!

2

this.model contém os dados do Tópico, como id, title, etc. Você pode usá-los.

Por exemplo, para permitir o ID de tópico 90 ou 38, você escreveria:

<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">
      <!-- Conteúdo HTML exclusivo vai aqui -->
    </div>
  {{/if}}
</script>

No entanto, eu encorajo você a usar a Theme CLI e trabalhar com arquivos divididos.

Será difícil adicionar mais condições ou ter alguma lógica lá. Seria possível usar registerConnectorClass, mas está obsoleto.

A maneira moderna é usar renderInOutlet com um componente glimmer — por exemplo, GitHub - discourse/discourse-custom-header-links.
Você diz que quer renderizar em um outlet específico:

Você tem o template definido aqui. Note o this.shouldShow
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.hbs#L1

Então você pode adicionar sua lógica aqui para dizer ao componente para ser exibido ou não:
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.js#L5-L7

Espero que isso ajude. Me avise se precisar de mais assistência. :+1:

5 curtidas
3

Obrigado pela solução detalhada, muito apreciada

2 curtidas
4

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