如何在用户头像下方显示数据？

开发
9

为了在 Discourse 上存储自定义数据，我进入了“管理 > 自定义 > 用户字段”，并创建了一个自定义字段。我需要的数据是一个表示进度的百分数，因此我选择了“文本”作为字段类型。该字段的名称仅显示在用户的卡片和个人资料页面上，遗憾的是，无法通过程序化方式引用该字段的数据。

存储进度的字段是我创建的第三个自定义字段，因此“3”成为一个非常重要的数字。

通过 API，我编写了一个 curl 脚本（参考了 https://meta.discourse.org/t/api-cannot-update-user/63876/4）来用测试数据填充该字段。由于我要填充的字段是我创建的第三个字段，因此我的 curl 脚本中的数据行如下：

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

要显示该数据，需要进入“管理 > 设置 > 用户”，滚动到“公开用户自定义字段”选项，并将该字段加入白名单。由于该字段是第三个创建的，我必须将"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