ユーザーのグループメンバーシップに基づいてトピック内で異なるコンテンツを表示しますか？

開発
1

Discourse.org のホスティングで作業しているため、この場合プラグインは使用できません。誰でも閲覧できるトピックが投稿されていると想像してください。

誰かが「グループA」に属している場合は、このコンテンツを表示させたい。そうでない場合は、この別のコンテンツを表示させたい。そして、トピックの一部は全員が表示されるべきです。模式図は以下のようになります…

これは全員が表示されるコンテンツです。

{願望的観測: グループAの人のみ}
特別なグループに参加してくれてありがとう！
{/願望的観測}

{願望的観測: グループAに属していない人のみ}
特別なグループに参加できます。 [詳細はこちら](…)
{/願望的観測}

CSS クラスをトグルしたいコンテンツに設定するテーマコンポーネントでこれが実現できると確信していますが（正確な方法は忘れましたが）、これが最善の方法だと判断した場合はそうします。

しかし、CSS の display: none は弱い方法です。表示させたくないものを DOM から消したいです。可能であればサーバーサイドで消したいですが、少なくともブラウザサイドで JavaScript ベースで消すだけでも満足です。（これは CSS の display: none よりも回避するのがはるかに高度な技術を必要とします。）

「いいね！」 2
2

bump!誰もいない？ :~(

@team をタグ付けできないのはなぜですか :wink:

3

今すぐ詳しく調べる時間はあまりありませんが、このテーマコンポーネントがお役に立つかもしれません。現在のユーザーのすべてのグループを、おそらく body タグ内にリスト表示します。その後、CSSセレクターを使用して、body タグに特定のグループクラス名が存在するかどうかに基づいて表示/非表示を切り替えることができます。

そして、この投稿からの情報を組み合わせて、コンポーザーでどのHTML要素を使用できるか、およびコンポーザーテキストをクラスでラップする方法を理解すれば、機能するかもしれません。

はい、ここでテストしたところ、そのコンポーネントと次のようなものを組み合わせれば機能するはずです。

<span data-group-a>グループAのみのテキスト</span>
<span data-group-b>グループBのみのテキスト</span>

そして、次のようなCSSセレクターを用意します。

span[data-group-a] {display: none;}
body.group-a span[data-group-a] {display: block;}

または、そのようなものです…

編集が多くてすみません。自分のインスタンスでテストしたところ、機能しました。

しかし、あなたが言ったように、それはあなたが望んでいたものではないかもしれません :slight_smile: …

これはテーマのJavaScriptで可能かもしれません。\u003chead\u003e セクションに要素を選択して削除するものを追加します。上記のようにスパンとラップが必要になるかもしれませんが、それを介して削除します。

「いいね！」 3
4

わかりました。これも必要になるかもしれないことに気づいたので、さらに深く掘り下げました :slight_smile:

このコードはまだ動作しておらず、あまりきれいに見えませんが、テーマの < / head > 部分に入れるのに十分なほど良いものになっていると思います。JS を使用して要素を正しく選択するだけです。

  <script type="text/discourse-plugin" version="0.8.42">

  api.decorateCookedElement(
    element => {
      var hasGroupA = document.body.classList.contains('group-a');

      const group_a_spans = element.querySelectorAll("span[data-group-a]");

      if (!group_a_spans.length) {
        return;
      }

      if (!hasGroupA) {
        group_a_spans.forEach(function (el) {
           el.innerHTML = "";
        });
      }

      },
      { id: "THEME-ID", onlyStream: true }
   );
  </script>

注意点: 検索などからすべての情報を非表示にするのは難しいかもしれませんが、CSS で非表示にするよりも優れているかもしれませんが、人々が情報を見るのを完全に防ぐことはできないと思います。

編集: CSS セレクターが機能するように修正しました。使用したいグループの数だけコードを繰り返してください。 THEME-ID を一意の名前に変更してください。これで機能するはずです :slight_smile:

おっと、この部分はまだ取得していませんでした。

「いいね！」 3
5

この件について、あなたの努力に大変感謝しています…まだ考えているのですが、実用的な解決策の糸口を見つけたと思います。私が書いたテンプレートコンポーネントがあり、これを使えば同様のものが機能するのではないかと思っています…

「foobar」というコンポーネントを想像してみましょう。以下のようなDIVを追加してトピックを作成できます…

<div data-custom="foobar" data-foobar="<groupname>">
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
</div>

コンポーネントは、表示しているユーザーのグループに基づいて、DOMから一方のDIVまたはもう一方を削除します。

これは、CSSの display: none; よりも強力だと考えられます。なぜなら、CSSの場合はブラウザのDOMインスペクション機能で簡単に元に戻すことができるからです。これを回避するには、ページ読み込み時に実行されるJavaScriptを変更する必要があります。可能ではありますが、はるかに困難です。

なぜこれが欲しいのか？

グループに属していないユーザーに対して、コンテンツの一部を段階的に表示できるようにするためです。（グループに参加するには有料サブスクリプションが必要です。）

これは非常にクールなトピックです。この最初の
段落は非常に興味深いです。

<div data-custom="foobar" data-foobar="<groupname>">
残りのコンテンツはこちらです。
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
こんにちは、お邪魔してすみません！
有料会員向けのコンテンツがさらにあります…
会員になることについて読んでみませんか？
</div>

グループ内のユーザーは、トピック全体を表示します。ペイウォールの兆候は一切ありません。

グループ外のユーザーは、上記のどちらのDIVにも含まれていない最初の部分とペイウォールを表示します。

そのため、完全に公開されているエリアで使用でき、ユーザーはサインアップしてログインし、有料会員になった場合に何が得られるかを確認できます。

6

ついにこれをまとめる時間ができました。\u003chttps://github.com/Umbrella-CAST/discourse-umbrella-groupswitchdisplay\u003e とてもシンプルで、現在のユーザーが「foobar」というグループに属しているか、または「!foobar」でグループに属していないかに基づいて、対象のDIVをDOMから削除するだけです。これにより、下の画像のようなコンテンツの表示を簡単に切り替えることができます。

もちろん、コンポーネントが無効になっている場合、すべてのコンテンツが表示されます（コンポーネントがないため、DOMはトリミングされません）。しかし、これは私がやりたいことには十分です。

Screen Shot 2022-10-21 at 14.45.00
Screen Shot 2022-10-21 at 14.45.001920×1351 224 KB

「いいね！」 4
7

私の非常に似たような悩みを解決してくれました。

「いいね！」 1
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.