CSS-Selektor, um Beiträge des aktuellen Benutzers zu trennen

Entwickler
1

Ich suche nach einer einfachen Möglichkeit, einen CSS-Selektor so zu gestalten, dass er nur Beiträge des aktuellen Benutzers auswählt (nicht aber Beiträge anderer Nutzer). Soweit ich sehen kann, wird für solche Beiträge keine CSS-Klasse hinzugefügt, die ich verwenden könnte. Vielleicht übersehe ich aber etwas?

Falls es derzeit keine solche Klasse gibt, wäre ich Ihnen sehr dankbar, wenn eine hinzugefügt würde!

Mein Vorschlag wäre, dem Element topic-post eine Klasse hinzuzufügen, ähnlich den bereits existierenden Klassen, die sich auf den verfassenden Benutzer beziehen, z. B. topic-owner. Die neue Klasse könnte current-user oder my-post heißen oder wie auch immer es zur bestehenden Discourse-Nomenklatur passt.

Klicken Sie hier für eine Erklärung, warum ich dies tun möchte...

Vor einiger Zeit beschwerten sich Benutzer meines Forums darüber, dass sie süchtig danach wurden, zu prüfen, wie viele Likes ihre Beiträge erhalten haben. Sie kehrten immer wieder zu den Beiträgen zurück, nur um ihre Likes zu überprüfen, und dieses Verhalten erinnerte sie an die toxischeren Aspekte der großen Social-Media-Plattformen.

Meine Lösung bestand darin, ein Theme für sie zu erstellen, in dem ich einfach eine CSS-Regel hinzufügte, um den Like-Zähler auf ihren Beiträgen auszublenden. Der Like-Button auf Beiträgen, die vom aktuellen Benutzer erstellt wurden, hat eine Klasse namens .my-likes, sodass er leicht mit CSS ausgewählt werden kann. Dies funktionierte gut, und die Benutzer waren mit der Lösung zufrieden.

Heute wurde mir jedoch darauf hingewiesen, dass, wenn man auf die „…“-Taste, also „Mehr anzeigen“, auf einem Beitrag klickt, die Benutzer aufgelistet werden, die diesen Beitrag geliked haben. Ein Benutzer berichtete, dass er aufgrund dessen wieder in seine „Dopamin-Süchtigen“-Gewohnheiten zurückgefallen sei und wiederholt auf „…“ klicke, um das spezielle Theme zu umgehen und seine Likes zu prüfen.

Im Gegensatz zum oben genannten Fall des Like-Buttons kann ich jedoch keinen CSS-Selektor finden, der dies ermöglicht. Die einzige Lösung, die ich gefunden habe, besteht darin, die Liste der Likenden für alle Beiträge auszublenden, d. h. so zu gestalten, dass die Benutzer des Themes diese Liste für keinen Beitrag sehen können.

Was ich jetzt tun kann, ist Folgendes:

.who-liked { display: none;}

Ich hatte gehofft, etwas wie Folgendes tun zu können:

.topic-post.current-user .who-liked { display: none;}

(Dies funktioniert jedoch nicht, da die Klasse .current-user nicht existiert.)

2

Vielleicht kannst du das Attribut data-user-id im Tag .topic-post article verwenden?

3

Eine Möglichkeit besteht darin, in der Themenliste die Themen zu finden, bei denen der aktuelle Benutzer der Ersteller ist. Das lässt sich mit jQuery umsetzen. Wenn dies zutrifft, wird der entsprechenden Zeile ein Stil zugewiesen. Ein Nachteil könnte sein, dass der Benutzer auch als Ersteller des ursprünglichen Beitrags (OP) eines Themas erscheint.

Eine andere Möglichkeit besteht darin, die Komponente der Themenliste vollständig zu überschreiben und dort die erforderlichen Anpassungen vorzunehmen. Weitere Informationen zum Überschreiben von Vorlagen finden Sie hier:

4

Entschuldigung, meinst du, dass du Beiträge von Benutzern in der Themenliste oder im eigentlichen Thema dekorieren möchtest?
In diesem Fall könntest du den Avatar des aktuellen Benutzers ansprechen, das übergeordnete Wurzelelement des Beitrags finden und mit jQuery eine Klasse hinzufügen.

5

Danke für die Antworten!

Mir ist sehr wohl bewusst, dass ich das mit JavaScript umsetzen kann. Das hätte ich von Anfang an erwähnen sollen. Der Punkt meines Beitrags ist jedoch, dass ich es auf eine viel einfachere Weise machen möchte, mit einem winzigen Hauch CSS (siehe den ausklappbaren Teil meines ursprünglichen Beitrags).

Neben der Tatsache, dass es eine einfachere und natürlichere Lösung ist, würde es mir ermöglichen, die Dinge mit dem hervorragenden integrierten System für Themes und Theme-Komponenten zu verwalten.

Und es ist nicht so, als wäre das irgendeine seltsame exotische Sache. Wie ich anfänglich erwähnt habe, verfügt Discourse bereits über Klassenattribute auf demselben Element (Beitrag auf der Themen-Seite), um Eigenschaften des postenden Benutzers anzuzeigen (Themen-Inhaber, Vertrauensstufe, Gruppenmitgliedschaften usw.). Und in einem Unter-Element dieses Elements (der Like-Button) gibt es bereits ein Klassenattribut, das anzeigt, dass der Beitrag von dem Benutzer stammt, der aktuell auf die Seite zugreift.

Aus diesen Gründen halte ich das Hinzufügen dieses einzelnen Attributs auf dem Themen-Beitrag-Element für eine viel bessere Lösung als irgendeinen JavaScript-Hack.

6

Oh, ich wollte gerade die JS-Lösung posten. Ich habe eine Gruppe namens „hidelikes

7

Vielen Dank, dass Sie den tatsächlichen Code gepostet haben, das ist wirklich hilfreich!

8

Nach etwas Recherche im Plugin-API glaube ich, eine Lösung für dein Problem und den richtigen Weg zu finden, das zu tun, was du vorgeschlagen hast.

<script type="text/discourse-plugin" version="0.8">
  api.addPostClassesCallback((attrs) => {
    const user = api.getCurrentUser();
    if (attrs.user_id === user.id)  {
      return ['current-user-post']
    }
  });
</script>

Sieh dir dies an:
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js#L712

Dadurch wird jedem Beitrag, der von einem aktuell eingeloggtem Benutzer erstellt wurde, current-user-post hinzugefügt.

9

Das ist großartig – vielen Dank!

10

Wo soll dieser Code hinzugefügt werden? Ich habe ihn vor eingefügt, aber es funktioniert nicht richtig.