皆さん、こんにちは。
私たちのフォーラムでは、カスタムユーザー状況機能が多用されており、その情報をさらに目立たせ、表示する方法として、投稿内のユーザー名のすぐ下に常に表示されるようにする（関連するアイコンにカーソルを合わせたときだけ表示されるのではなく）という案が出ています。
これを実現する比較的簡単な方法がないか、ずっと調べてみましたが、今のところ答えは見つかっていません。
これは可能かどうか、どなたかご存知ですか？
よろしくお願いします。そして、皆さん、良いお年をお迎えください！
「いいね！」 3
うーん… ユーザーのステータスが表示されているところを見ていますが、ステータスの説明を表示するために使用できるプラグインのアウトレットが見当たりません。
しかし、this.user.status からユーザーのステータスを取得できると思うので、そのアウトレットが本当に必要かどうか、あるいは近くの別のものを見つけられるかどうかはわかりません。
「いいね！」 1
カスタムフィールドのバリアントを試しましたが、投稿者の名前の下にカスタムユーザーフィールドを表示するようにしました。テーマコンポーネントを作成し、JSにこれを使用しました。
import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // まだこれが必要です
// ここで、カスタムフィールドのIDを "user_field_" でプレフィックスを付けて追加します
// ユーザーフィールドIDを取得するには:
// 1. 管理/設定/ユーザーフィールドに移動します
// 2. ユーザーフィールド名をクリックします
// 3. ユーザーフィールドIDは、admin/config/user-fields/の後のURLに表示されます
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 {
// テンプレートにキーを渡すためのゲッター
get currentFieldKey() {
return config.fieldKey;
}
// テンプレートに表示タイプを渡すためのゲッター
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」は、2つのカスタムフィールドの内容です。
@NateDhaliwal が言ったように、this.user.status を使用して、カスタムフィールドの代わりにユーザーの状態を表示できると思います。
「いいね！」 1
その点として、プロフィールページ、ユーザーカード、チャットメッセージなど、他の箇所でも置き換える必要があるでしょう。