ユーザーのアバターの下にデータを表示する方法は？

開発
9

Discourse にカスタムデータを保存するために、管理者 > カスタマイズ > ユーザーフィールドへ移動し、カスタムフィールドを作成しました。必要なデータは進捗を表すパーセンテージであり、フィールドタイプとして「テキスト」を選択しました。このフィールド名はユーザーのカードとプロフィール上でのみ表示され、残念ながらプログラム的にフィールドデータを参照するために使用されることはありません。

進捗を保存するフィールドは私が作成した3番目のカスタムフィールドだったため、「3」という数字が非常に重要なものとなりました。

API を使用し、https://meta.discourse.org/t/api-cannot-update-user/63876/4 の助けを借りて、フィールドにテストデータを埋めるための curl スクリプトを作成しました。私が埋めようとしたフィールドは私が作成した3番目のフィールドだったため、curl スクリプト内のデータ行は以下のようになります。

--data '{ "user_fields": { "3":"87" } }'

データの表示には、管理者 > 設定 > ユーザーへ移動し、「公開ユーザーのカスタムフィールド」オプションまでスクロールして、フィールドをホワイトリストに登録する必要があります。フィールドは3番目に作成されたものだったため、実際に付けた名前ではなく「user_field_3」をホワイトリストに登録する必要がありました。

この時点で、以下のような基本的なプラグインを作成しました。

import { withPluginApi } from 'discourse/lib/plugin-api';
export default {
  name: 'progress-indicator',
  initialize() {
    withPluginApi("0.8.23", api => {       
      api.decorateWidget('post-avatar:after', helper => {
        let progress = helper.attrs.userCustomFields['user_field_3'];
        let retString = helper.h("div.progress-wrapper",
          {style: 'border: 1px solid blue; width:100%;'}, 
          helper.h('div.progress-bar',{style: 'width:'+progress+'%; background-color: green; height: 10px;'})
        );
        return retString;
      });
    });
  }
};

最終的な出力は以下の通りです。

screenshot009
screenshot009353×416 24.8 KB

「いいね！」 7