jQueryでトピックページの要素に新しいクラスを追加できませんか?

Discourseの仕組みについてさらに理解を深めたいと考えていますが、こちらの記事を読んでもまだ混乱しています。jQueryを使って投稿ページで管理者のユーザー名に動的なタイトルを追加しようとしているのですが、うまくいきません。

ただし、bodyタグなどをターゲットにしてクラスを追加する場合は動作します。
なぜ動作しないのか、どなたかご説明いただけますでしょうか?
なお、このコードはヘッダータブに挿入しています。

<script>
  $(".names span.admin a").attr('title', 'Community Admin');
</script>

プラグインの出口(plugin outlet)などに注入する必要があるのでしょうか?

おそらく、このケースでは jQuery が Ember とウィジェットのレンダリングパイプラインとうまく連携していないためでしょう。

このスクリプトでは、このイベントがいつ発火するか、また画面描画中に JavaScript アプリがどの段階にあるかとの関係性を制御することができません。

ただし、これに対応する JavaScript API メソッドが存在します。詳しくは以下をご覧ください:

decorateWidget()

また、特定のウィジェットについては以下を参照してください:

しかし、その深淵へ飛び込む前に少し立ち戻りましょう。単に「タイトル」を表示させたいだけでしょうか?

例えば、Jeff の投稿では:

タイトルとして「co-founder」が表示されています。

新しいグループを作成し、管理者を追加して、「管理」→「メンバーシップ」へ進み、「デフォルトのタイトル」を編集してください。

これで、ユーザーはアカウント設定の「環境設定」からこのタイトルを選択できるようになります(または、あなたが代わりに設定することも可能です)。

これを利用して、特別なアバターフレアを表示することも可能です(上記のスクリーンショットでも確認できます)。

もちろん、これを「固定」された状態にしたくない場合は、コーディングによる対応を検討する必要がありますが、これはおそらくはるかに少ない労力で済むはずです。

「いいね!」 5

ご協力ありがとうございます。探している実際のフォーラムのタイトルではありませんが、私が作成したこの小さな王冠アイコン(管理者にのみ表示)にホバーしたときにタイトルを表示したいと考えています:

余談ですが、このための CSS コードは以下の通りです:

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;

いいですね。

ウィジェット方式を検討されるのも良いかもしれません。

また、以下の API メソッドもご参照ください:

api.reopenWidget("poster-name", {

      html() {
          <your-code-here-but-consider-using-the-original-as-template>
      }
}

Discourse のウィジェット仮想 DOM コードの仕組みについて詳しく解説している以下の記事もおすすめです:

Discourse は自動で動作する Web アプリであるため、このような実装を行うには相当な労力が必要ですが、一度正しく実装できれば、非常に堅牢なソリューションとなります。

「いいね!」 5

素晴らしい、ありがとうございます。確認して、成功したら解決策を投稿します。一見すると、カスタマイズに関しては Discourse はかなり恐ろしく見えますし、WordPress も難しいと思っていたのですが(笑)。でも、きっとこれらのプラグインやテンプレートの仕組みに慣れれば、もっと楽になると思います。

実は、もっと簡単な解決策があるかもしれません:

通常のモデレーターシールドを交換する API メソッドを以下のように考えてみてください:

api.replaceIcon('shield-alt', 'crown');

そして、ここにあるツールチップのテキストを変更します:

これで、元の CSS は不要になる可能性があります(ただし、アイコンの色を再設定することはできます)。

「いいね!」 3

ただし、これではモデレーターから盾アイコンが削除されてしまいますよね?それは避けたいです。管理者には投稿ページに全くアイコンが表示されていないため、管理者に対してのみ王冠アイコンとホバー時のテキストを追加する必要があります。

「いいね!」 1

ああ、そうね。私は自分がモデレーターかつ管理者でもあるサイトには慣れっこだから。もしこれらの役割を分けてしまうと(つまり、管理者は決してモデレーターにならない場合)、それは機能しないわ。管理者にモデレーター権限を与える必要があるわね。

だから、他の選択肢を探ってみて。

「いいね!」 1

お試しください:

api.reopenWidget("poster-name", {
  posterGlyph(attrs) {
    if (attrs.moderator || attrs.groupModerator) {
      return iconNode("shield-alt", {
        title: I18n.t("user.moderator_tooltip"),
      });
    }
    if (attrs.admin) {
      return iconNode("crown", {
        title: I18n.t("user.admin_tooltip"),
      });
    }
  }
})

そして、

これで私の環境では動作します:

この場合、最初のユーザーは管理者かつモデレーターであり、2 番目のユーザーは管理者のみです。このロジックを拡張することもできます。if 文の順序を入れ替えることで、王冠のアイコンを優先させることができます。

「いいね!」 1

それは解決策のようですが、先ほど述べた通り、Discourseのカスタマイズは初心者です。APIメソッドはこれまで試したことがありませんが、コードをどこに貼り付ければよいか、詳しくご説明いただけますでしょうか。

…少し待ってください。ちゃんと作ってあげます。

はい、これでテーマコンポーネントとして機能します:

(Installing a theme or theme component)

管理者ロールが優先されます。デフォルトでは、管理者かつモデレーターロールを持つユーザーには王冠が表示されます。

スタッフタイプごとにアイコンを設定できるようになりました。

アイコン名を SVG アイコンのサブセット設定に追加することを忘れないでください(追加しないと表示されません):

タイトルテキストをここでカスタマイズできます:

モデレーターについても同様です。

「いいね!」 5

素晴らしいです :slightly_smiling_face:。お手伝いいただき、本当にありがとうございます!

楽しかったです!

「いいね!」 2

TC を更新し、ユーザーカードのスタッフアイコンも変更されるようにしました(ヘルパーを修正したため、他の場所でも同様に変更されている可能性があります)。

アイコンは管理者とモデレーター双方で設定可能になりましたが、管理者のデフォルトはクラウン、モデレーターのデフォルトはバニラのシールドとなっています。

TC の名前も変更しました。

アイコンが変換されていない箇所がいくつかあるかもしれませんが、今後さらに発見できればと思います。

「いいね!」 3

どうもありがとうございます!これでフォーラムでやりたかったことができました!他のユーザーが管理者名の横にアイコンが表示される問題で困っている場合、このコメントはピン留めされるべきだと思います。モデレーターのプロフィールに表示される盾のアイコンを管理者に表示するために、あなたの機能を使用しました。これで、モデレーター権限がなくても盾のアイコンを表示でき、管理者権限のみを持っている場合に正しい管理者ツールチップが表示されます。この素晴らしいコンポーネントをフォーラムのために作成してくださり、本当にありがとうございました!

編集:プロフィールには公開されません。現在は投稿でのみ機能しています。

「いいね!」 1

どういたしまして。自由にフォーク、拡張、PRしてください!

「いいね!」 2