Come aggiungere contenuto HTML unico sotto il corpo dell'argomento in Discourse forum per argomenti specifici

Sviluppatore
1

Sto lavorando su un forum di discourse e devo aggiungere contenuti HTML univoci sotto il corpo dell’argomento per argomenti specifici. Il contenuto HTML dovrebbe essere visualizzato solo su determinati argomenti e non su tutti.

Attualmente, ho aggiunto il contenuto HTML utilizzando il seguente codice:

<script type="text/x-handlebars" data-template-name="connectors/topic-area-bottom/custom-html">
  <div class="banner-control">
    <!-- Il contenuto HTML univoco va qui -->
  </div>
</script>

Questo codice viene aggiunto all’uscita connectors/topic-area-bottom, ma visualizza il contenuto su tutti gli argomenti. Il mio obiettivo è che questo contenuto appaia solo su argomenti specifici, non su ogni pagina di argomento.

Dettagli:
La pagina dell’argomento non ha una classe del corpo univoca come le pagine di categoria. Ho bisogno di un modo per renderizzare condizionalmente questo contenuto HTML in base all’argomento visualizzato. Domanda: Come posso modificare il mio codice o la configurazione in Ember.js per garantire che il contenuto HTML personalizzato sotto l’uscita topic-area-bottom venga mostrato solo per argomenti specifici? Esiste un modo per aggiungere una condizione per verificare ID di argomento specifici o altri identificatori?

Qualsiasi guida o esempio sarebbe molto apprezzato!

2

this.model contiene i dati dell’argomento come id, titolo, ecc. Puoi usarli.

Ad esempio, per consentire gli ID argomento 90 o 38, scriveresti:

<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">
      <!-- Il contenuto HTML univoco va qui -->
    </div>
  {{/if}}
</script>

Tuttavia, ti incoraggio a utilizzare la Theme CLI e a lavorare con file separati.

Sarà difficile aggiungere altre condizioni o avere una logica lì. Sarebbe possibile utilizzare registerConnectorClass, ma è deprecato.

Il modo moderno è utilizzare renderInOutlet con un componente glimmer, ad esempio GitHub - discourse/discourse-custom-header-links.
Dici di voler eseguire il rendering in un outlet specifico:

Hai il template definito qui. Nota this.shouldShow
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.hbs#L1

Quindi puoi aggiungere la tua logica qui per dire al componente di essere visualizzato o meno:
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.js#L5-L7

Spero che questo aiuti. Fammi sapere se hai bisogno di ulteriore assistenza. :+1:

5 Mi Piace
3

Grazie per la soluzione dettagliata, molto apprezzata

2 Mi Piace
4

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