現在のユーザーの投稿を区別する CSS セレクター

開発
1

現在のユーザーが投稿したポスト（他のユーザーの投稿ではない）に一致する、単純な CSS セレクターの方法を探しています。私の知る限り、そのようなポストに使用できる CSS クラスは追加されていないようですが、何か見落としているのでしょうか？

もし現在そのようなクラスが存在しない場合、追加していただければ大変助かります。

私の提案は、既存の投稿者に関連するクラス（例：topic-owner）と同様に、topic-post 要素にクラスを追加することです。新しいクラスは current-user や my-post など、既存の Discourse の命名規則に合うものが適しているでしょう。

これを行う理由についての説明はここをクリック...

以前、私のフォーラムのユーザーが、自分の投稿に付いた「いいね」の数をチェックすることに依存してしまい、中毒状態になると不満を訴えました。彼らは繰り返し同じ投稿に戻っては「いいね」の数を確認しており、この行動は大手ソーシャルメディアプラットフォームのより有害な側面を思い起こさせるものでした。

私の解決策は、彼らが使用するテーマを作成し、単に CSS ルールを追加して自分の投稿の「いいね」カウンターを非表示にすることでした。現在のユーザーが作成した投稿の「いいね」ボタンには .my-likes というクラスが付いているため、CSS で簡単に選択できます。この対策はうまくいき、ユーザーも満足してくれました。

しかし、今日早々、投稿の「…」ボタン（つまり「もっと表示」）をクリックすると、その投稿に「いいね」をしたユーザーの一覧が表示されるという指摘を受けました。あるユーザーは、このためにもう一度「ドーパミン中毒」の行動に戻り、特別なテーマを回避して自分の「いいね」を確認するために「…」を繰り返しクリックしていると報告しました。

しかし、上記の「いいね」ボタンの場合とは異なり、これを実現できる CSS セレクターが見つかりません。私が思いつく唯一の解決策は、すべての投稿の「いいね」したユーザーの一覧を非表示にすること、つまりテーマを使用するユーザーがどの投稿でもその一覧を見られないようにすることです。

今できることは以下の通りです：

.who-liked { display: none;}

私が目指していたのは、以下のようなことです：

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

（しかし、.current-user クラスが存在しないため、これは機能しません。）

2

.topic-post article タグの data-user-id 属性を使用することは可能でしょうか？

「いいね！」 1
3

できることのひとつは、トピック一覧から現在のユーザーが投稿者となっているトピックを jQuery で見つけることです。該当する場合は、その行にスタイルを適用します。ただし、欠点として、ユーザーが最初の投稿（OP）の投稿者として検出されてしまう可能性があります。

もう一つの方法は、トピック一覧コンポーネントを完全にオーバーライドして、そこで必要な処理を行うことです。テンプレートのオーバーライドに関する詳細は、以下のリンクをご覧ください:

「いいね！」 2
4

すみません、トピック一覧内のユーザー投稿、それとも実際のトピック内でユーザー投稿を装飾したいとおっしゃっているのでしょうか？
その場合、現在のユーザーのアバターにフックし、親投稿のルート要素を見つけて、jQuery でクラスを追加することができます。

「いいね！」 1
5

ご回答ありがとうございます！

JavaScript で実現できることは十分承知しています。最初から言及すべきでした。しかし、私の投稿の主旨は、よりシンプルな方法、つまりごく少量の CSS（元の投稿の展開可能な部分をご覧ください）で実現したいということです。

シンプルで自然な解決策であるだけでなく、優れた組み込みのテーマおよびテーマコンポーネントシステムを使って管理できるようになります。

また、これは何か奇妙で異質な手法というわけではありません。最初に述べた通り、Discourse にはすでに投稿ユーザーのプロパティ（トピック所有者、信頼レベル、グループメンバーシップなど）を示すために、同じ要素（トピックページ上の投稿）に class 属性が設定されています。さらに、この要素のサブ要素（いいねボタン）には、現在ページにアクセスしているユーザーが投稿したことを示す class 属性が既に存在します。

これらの理由から、トピック投稿要素に単一の属性を追加することが、何かの JavaScript ハックよりもはるかに優れた解決策だと考えています。

「いいね！」 1
6

ちょうど JavaScript の解決策を投稿しに来たところです。“hidelikes” というグループを作成し、この JavaScript で、そのグループのメンバーが自分の投稿に対して「いいね」したユーザー一覧を非表示にしています。

<script type="text/discourse-plugin" version="0.8">
    $( document ).ready(function() {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        var userID = currentUser.id;
        const hidelikes = groups.some(g => g.name === 'hidelikes');
        if (hidelikes) { 
               $('<style>').text('.boxed.onscreen-post[data-user-id="' + userID + '"] .who-liked{display: none;}').appendTo(document.head)
         }
    });
</script>

もちろん、すべてのユーザーに対して行う場合は、グループに関する部分を削除してください。

「いいね！」 4
7

実際のコードを投稿してくださり、本当にありがとうございます！

「いいね！」 1
8

プラグイン API を少し調べてみたところ、あなたの問題に対する解決策と、あなたが提案したことを行う適切な方法が見つかったと思います。

<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>

こちらをご確認ください：
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js#L712

これにより、現在ログインしているユーザーが投稿したすべての投稿に current-user-post が追加されます。

「いいね！」 7
9

素晴らしいですね、ありがとうございます！

「いいね！」 2
10

このコードはどこに追加すればよいですか？に追加しましたが、正常に動作しません。