让自定义用户状态更突出

支持
1

大家好，

我们的论坛大量使用自定义用户状态功能，现在出现了一个想法，就是让这些信息更加突出和可见——让它始终显示在帖子中用户名称下方，而不是只在悬停在相关图标上时才显示。

我一直在深入研究，想看看是否有任何相当简单的方法可以实现这一点，但到目前为止，我还没有找到任何答案。

有人知道这是否可能吗？

提前感谢，祝大家新年快乐！

3 个赞
2

嗯……我正在查看用户状态的显示方式，但没有看到可以用来显示状态描述的插件插口。

但我认为您可以通过 this.user.status 获取用户的状态，所以我不确定您是否真的需要那个插口，或者是否可以在附近找到另一个插口。

1 个赞
3

我做了这个的变体，用于在发帖人姓名下方显示自定义用户字段。我创建了一个主题组件并为此使用了 JS：

import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // 我们仍然需要这个

// 在这里，添加自定义字段的 ID，前缀为 "user_field_"

// 要获取用户字段 ID：
// 1. 转到 admin/config/user-fields
// 2. 点击用户字段的名称
// 3. 用户字段 ID 显示在 url 中，在 admin/config/user-fields/ 之后

const FIELDS_TO_SHOW = [
  { fieldKey: "user_field_2", display: "inline" }, 
  { fieldKey: "user_field_1", display: "block" }   
];
// ----------------------------------------


function addCustomFields(api) {
  
  FIELDS_TO_SHOW.forEach(config => {
    
    api.renderAfterWrapperOutlet(
      "post-meta-data-poster-name",
      class extends Component {
        
        // getter 用于将 key 传递给模板
        get currentFieldKey() {
          return config.fieldKey;
        }

        // getter 用于将 display 类型传递给模板
        get currentDisplayType() {
          return config.display;
        }

        static shouldRender(args) {
          // 使用 config.fieldKey 来查找数据
          const value = get(args.post.user.custom_fields, config.fieldKey);
          return !!value;
        }

        <template>
          <div class="
            poster-custom-field
            poster-custom-field-{{this.currentDisplayType}}
            field-{{this.currentFieldKey}}
          ">
            {{get @post.user.custom_fields this.currentFieldKey}}
          </div>
        </template>
      }
    );
  });
}


export default {
  name: "show-poster-custom-fields",
  initialize() {
    withPluginApi("1.0.0", (api) => {
      addCustomFields(api);
    });
  }
};

然后我为 CSS 使用了这个：

.topic-meta-data .names {
  flex-wrap: wrap;
  align-items: baseline;
}


// 所有自定义字段显示的基础样式
.poster-custom-field {
  font-size: 0.9em;
  color: var(--primary-high-or-secondary-low);
  flex-shrink: 0;
}

// 内联显示的样式
.poster-custom-field-inline {
  display: inline-block; 
  margin-left: 8px;
  order: 5;
}

.topic-meta-data .names .user-title {
    order: 10;
    flex-basis: 100%;
    width: 100%;
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 0.9em;
    color: var(--primary-high-or-secondary-low);
}

// 名字下方显示的样式
.poster-custom-field-block {
  flex-basis: 100%;
  margin-top: 4px;
  order: 20;
}

这就是它在实践中的样子——“more stuff”和“some information”是两个自定义字段中的内容。

image
image778×189 9.02 KB

正如 @NateDhaliwal 所说，我认为你可以使用 this.user.status 来代替我自定义字段的位置来显示用户状态。

1 个赞
4

这样做的一点是，您还必须在其他地方替换它，例如个人资料页面、用户卡片和聊天消息中。