ユーザー名横に投稿数を表示する方法

開発
1

皆さん、こんにちは。初めての投稿です。Blizzardフォーラムで、ユーザー名の横にユーザーの合計投稿数が表示される仕組みが気になっています。

image
image1310×745 80.9 KB

私は、以下のようなDiscourse APIシステムを使用して、自分のフォーラムで同様のものを実装しました。
image
image1303×534 36.1 KB

しかし、もっと良い方法があると思います。ユーザーバッジなどを表示することも計画しています。どなたか手伝っていただけませんか？よろしくお願いします。

「いいね！」 1
2

テンプレート/ショートコードシステムは存在しますか？

3

こんにちは！

APIをご利用の場合、これが正しい方法だと思います。

コードを共有していただけますか？必要であれば改善案を提案させていただきます。:slight_smile:

「いいね！」 1
4

はい

<script type="text/discourse-plugin" version="0.1">
  api.onPageChange(() => {
    // 'topic' というIDを持つ要素が存在するかどうかを確認
    if ($('#topic').length > 0) {
      // 'topic' 要素が存在する場合、'data-user-id' 属性を検索
      var userId = $('#topic article').data('user-id');

      // 'data-user-id' 属性が存在するかどうかを確認
      if (userId !== undefined) {
        // ユーザー情報を取得するためにAPIリクエストを実行
        apiReq(`admin/users/${userId}.json`, 'GET')
          .then(data => {
            // レスポンスデータを処理
            console.log('ユーザー投稿数:', data.post_count);

            // user_fields["1"] に値があるかどうかを確認
            if (data.user_fields && data.user_fields["1"]) {
              // 最初の 'names' div 内にユーザーフィールドを表示
              displayUserField(data.user_fields["1"]);
            }

            // 最初の 'names' div 内に投稿数を表示
            displayPostCount(data.post_count);
          })
          .catch(error => {
            // エラーを処理
            console.error('APIリクエストエラー:', error);
          });
      } else {
        console.log('data-user-id 属性が見つかりませんでした');
      }
    } else {
      console.log('ID "topic" を持つ要素が見つかりませんでした');
    }
  });

  // 最初の 'names' div 内にユーザーフィールドを表示する関数
  function displayUserField(userFieldValue) {
    // 最初の 'names' div を検索
    var firstNamesDiv = $('.names:first');

    // 'user-title' クラスを持つ span 要素を作成
    var userFieldSpan = $('<span></span>').addClass('user-title');
    userFieldSpan.text(userFieldValue);

    // span 要素を最初の 'names' div に追加
    firstNamesDiv.append(userFieldSpan);
  }

  // 最初の 'names' div 内に投稿数を表示する関数
  function displayPostCount(postCount) {
    // 最初の 'names' div を検索
    var firstNamesDiv = $('.names:first');

    // 'user-title' クラスを持つ span 要素を作成
    var postCountSpan = $('<span></span>').addClass('user-title');
    postCountSpan.text(postCount + ' posts');

    // 投稿数 span 要素を最初の 'names' div に追加
    firstNamesDiv.append(postCountSpan);
  }

</script>

別のコンポーネントに apiReq 関数があります
5

Blizzardでは、コメント投稿者の横に投稿数が表示されていますが、これは実現できませんでした。

6

なるほど、APIを部分的に利用しているのですね。このコードは間違いなく改善できます。数分お待ちください。戻ります。

「いいね！」 2
7

いいですね。Discourseは初めてなので、ほとんど知りません。

「いいね！」 1
8

代わりにプラグインを作成する必要がありました。

投稿やユーザーカードを表示する際に post_count 値を取得するには、このフィールドを含めるようにデータをシリアル化する必要があります。これはプラグインの助けを借りてのみ達成でき、ユーザーごとのリクエストに依存することは現実的な解決策ではありません。

試してみてください。JS部分は assets にありますので、確認したい場合はそちらをご覧ください。
APIの使用であなたが見逃した可能性のある具体的な点として、アウトレットによるカスタマイズ機能があります。

さらにオプションが必要な場合はお知らせください。
このプラグインをリリースすべきかどうかわかりませんが、小さいながらも公開します。

「いいね！」 5
9

ありがとうございます。試してみます。
私の実際の計画は、以下の機能を達成することでした。

  1. 投稿とコメントでユーザーのアバターの横に投稿数を表示する。
  2. グループの全メンバーにデフォルトのタイトルを割り当てる（例：管理者）。
  3. アバターの横に信頼レベルを表示する。
  4. アバターの横にバッジを表示する。
  5. アバターの横に user_field の値を表示する。
    そして、オプションは管理者が変更できるようにする。
    また、投稿数をハイパーリンクにして、他の人がクリックして投稿リストを見られるようにすることも計画しました。

これは小さなプラグインですが、公開する価値はあると思います。提案された新機能の追加も検討してください。
ありがとうございます。

10

プラグインをインストールしましたが、動作しません。

11

再度テストしましたが、私の側では正常に動作します。

プラグインは有効になっていますか？

image
image712×326 11.1 KB

「いいね！」 1
12

これで動作するようになりました。ありがとうございます。

13

またお手数をおかけして申し訳ありません。しばらく使用したところ、トピックが含まれていないことに気づきました。私の知る限り、トピックも投稿の一種です。

14

「トピック作成数」も統計情報です。これを投稿数に追加しますか、それとも「トピック: xx、投稿: yy」のようになるように新しいテキストを追加しますか？

15

postCount + TopicCount のようなものを取得しようとしています。
単純にトピックを投稿として数えたいです。
また、ユーザータイトル（もしあれば）の後に表示しようとしています。プラグインコードを（フォークした後）変更してみましたが、今のところうまくいっていません。

16

プラグインを更新しました。動作するかどうか教えてください。

「いいね！」 2
17

どうもありがとうございました。うまくいきました。

18

とてもクールですね。合計リアクション数とFAアイコンを追加することは可能ですか？

19

編集できないので、プラグインをインストールしてテストしたところ、非常にうまく機能しています。モバイル以外では、投稿の総数が名前の左側に表示されています。 :frowning:

20

@David_Ghost
CSSで修正できます。

.names.trigger-user-card > div:has(.user-post-user__container) {
    order: 2;
}
「いいね！」 2