Wie man bei bestimmten Themen im Discourse-Forum einzigartigen HTML-Inhalt unter dem Thema-Body hinzufügt

Entwickler
1

Ich arbeite an einem Discourse-Forum und muss für bestimmte Themen eindeutige HTML-Inhalte unter dem Thema hinzufügen. Der HTML-Inhalt soll nur für bestimmte Themen und nicht für alle Themen angezeigt werden.

Derzeit habe ich den HTML-Inhalt mit dem folgenden Code hinzugefügt:

<script type="text/x-handlebars" data-template-name="connectors/topic-area-bottom/custom-html">
  <div class="banner-control">
    <!-- Eindeutiger HTML-Inhalt hier -->
  </div>
</script>

Dieser Code wird dem connectors/topic-area-bottom-Outlet hinzugefügt, zeigt den Inhalt aber auf allen Themen an. Mein Ziel ist es, dass dieser Inhalt nur für bestimmte Themen angezeigt wird, nicht auf jeder Themenseite.

Details:
Die Themenseite hat keine eindeutige Body-Klasse wie die Kategorie-Seiten. Ich benötige eine Möglichkeit, diesen benutzerdefinierten HTML-Inhalt bedingt anzuzeigen, basierend auf dem betrachteten Thema. Frage: Wie kann ich meinen Code oder meine Einrichtung in Ember.js ändern, um sicherzustellen, dass der benutzerdefinierte HTML-Inhalt unter dem topic-area-bottom-Outlet nur für bestimmte Themen angezeigt wird? Gibt es eine Möglichkeit, eine Bedingung hinzuzufügen, um nach bestimmten Themen-IDs oder anderen Identifikatoren zu suchen?

Jeder Hinweis oder jedes Beispiel wäre sehr willkommen!

2

this.model enthält die Topic-Daten wie die id, den title usw. Sie können diese verwenden.

Um beispielsweise die Topic-IDs 90 oder 38 zuzulassen, würden Sie schreiben:

<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">
      <!-- Eindeutiger HTML-Inhalt hier -->
    </div>
  {{/if}}
</script>

Ich empfehle Ihnen jedoch, die Theme CLI zu verwenden und mit geteilten Dateien zu arbeiten.

Es wird schwierig sein, dort weitere Bedingungen hinzuzufügen oder eine Logik zu implementieren. Es wäre möglich, registerConnectorClass zu verwenden, aber das ist veraltet.

Der moderne Weg ist die Verwendung von renderInOutlet mit einer Glimmer-Komponente – zum Beispiel GitHub - discourse/discourse-custom-header-links.
Sie sagen, Sie möchten in einem bestimmten Outlet rendern:

Sie haben die Vorlage hier definiert. Beachten Sie this.shouldShow
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.hbs#L1

Dann können Sie hier Ihre Logik hinzufügen, um der Komponente mitzuteilen, ob sie angezeigt werden soll oder nicht:
https://github.com/discourse/discourse-custom-header-links/blob/main/javascripts/discourse/components/custom-header-links.js#L5-L7

Ich hoffe, das hilft. Lassen Sie mich wissen, wenn Sie weitere Unterstützung benötigen. :+1:

5 „Gefällt mir“
3

Vielen Dank für die detaillierte Lösung, sehr geschätzt

2 „Gefällt mir“
4

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