So fügen Sie benutzerdefiniertes HTML nach „post_1" hinzu

Unterstützung
1

Ich möchte einen Kundenbanner (für Affiliate-Zwecke) in meine Beiträge einfügen. Genauer gesagt, möchte ich diesen HTML-Beispielblock direkt nach <article id="post_1..." einfügen.

<div id="custom-ad">
    <a href="example.com">
        <img src="https://picsum.photos/id/74/750/90">
    </a>
</div>

Das sollte dann so aussehen:

bannerexample
bannerexample787×793 159 KB

Mit CSS :after hatte ich nur begrenzten Erfolg. Daher frage ich mich, ob dies auch über ein <script> im <HEAD>-Bereich gelöst werden könnte, ähnlich wie in diesem Beispiel.

EDIT: Nach etwas mehr Ausprobieren scheint es sauberer zu sein, den Banner am Ende von <div class="topic-map"> einzufügen:

<div class="topic-map">
    <section class="map map-collapsed">...</section>
    HIER BENUTZERDEFINIERTES HTML
</div>
2

Beiträge sind Widgets, was bedeutet, dass das, was du versuchst zu tun, etwas mehr Aufwand erfordert als nur HTML hinzuzufügen.

Discourse-Themes haben die Möglichkeit, Widgets zu dekorieren, sodass du das nutzen kannst.

Das Dekorieren eines Widgets wird im oben genannten Link erklärt. Konzentrieren wir uns daher darauf, was du erreichen möchtest: das Hinzufügen von Markup nach dem ersten Beitrag in jedem Thema.

Beginne damit, das Markup zu allen Beiträgen hinzuzufügen. Etwas wie das hier:

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  return helper.h("div", "Testtext");
});
</script>

in den Kopfbereich deines Themes. Das sollte ausreichen, um unter jedem Beitrag „Testtext

3

Ich schätze es immer sehr, wenn Lösungen erklären, wie man von A bis Z kommt, anstatt nur eine Antwort zu geben. Vielen Dank.

4

Ich habe diesen Beitrag gemocht, aber ich möchte nur ergänzen: Das ist eine fanatische Erklärung. Ich schätze Beiträge wie diesen wirklich sehr.

5

Das liegt daran, dass @johani :fire: :hot_pepper: :muscle: ist.