特定のグループのメンバーにヘッダーでカスタムHTMLを表示

開発
1

Discourse の皆様、こんにちは！これに対する簡単な解決策があることを願っています！答えは JavaScript を使う必要があるということだと思います。

管理者の CSS/HTML 設定にある「ヘッダー後」セクションに 4 つのボタンがあります。

image
image1189×397 98 KB

特定のグループのメンバーにのみ表示されるボタンと、すべてのユーザーに表示されるボタンを分けて表示したいと考えています。

例えば、メインの 4 つのボタンは全員に表示しつつ、特定のグループのメンバーにのみ表示される別のボタンを追加したいとします。

私は JavaScript を知らないのですが、もし非常に簡単で、誰かがスニペットなどを提供してくださるなら、とても助かります :folded_hands:

2

Zendesk プラットフォーム向けの、非常に類似したこの記事 this article を見つけましたが、私たちが探している機能はこれに該当すると思います！

3 
<div id="after-header">コンテンツ</div>

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        const isInGroup1 = groups.some(g => g.name === 'group1');
        const isInGroup2 = groups.some(g => g.name === 'group2');
        const isInGroup3 = groups.some(g => g.name === 'group3');
        if (isInGroup1) { 
            $("#after-header").addClass("group1");
         }
        if (isInGroup2) { 
            $("#after-header").addClass("group2");
         }
        if (isInGroup3) { 
            $("#after-header").addClass("group3");
         }         
    });
</script>

.button-a,
.button-b {
    display: none;
}
#after-header.group1 .button-a {
    display: block
}
#after-header.group2 .button-b {
    display: block
}

api.onPageChange(() => { を $( document ).ready(function() { に置き換えることで、スクリプトがすべてのページで読み込まれなくなる場合もあるようです。ただし、どこで api.onPageChange(() => { を使用する必要があるのか、常に確信が持てません。

4

このコンポーネントをインストールすると、現在のユーザーのすべてのグループがページ本体にクラスとして追加され、CSSのみでさらなる変更を行うことが容易になります。

5

ハハ、それは次に私が解明しようとしていたことだったんだ

7

こんにちは。

似たようなものを探していましたが、特定のグループを除外したいと考えていました。そこでChatGPTを試してみたところ、次のような回答がありました。

Discourseで特定のグループを除外するスクリプトをトリガーするHTMLテーマを作成するには、Discourseのテーマカスタマイズオプションと、グループ除外を処理するJavaScriptを使用する必要があります。Discourseは、ユーザーのグループを含むユーザーの詳細を取得するために api.getCurrentUser() を提供しており、これは条件付きでスクリプトをトリガーするのに役立ちます。

以下は、テーマまたはコンポーネントの < /head > セクションでこれを実装する方法の例です。

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // 現在のユーザーの詳細を取得
        const currentUser = api.getCurrentUser();

        if (currentUser) {
            // スクリプトの実行を除外したいグループ名のリスト
            const excludedGroups = ['group1', 'group2'];

            // ユーザーのグループを取得
            const userGroups = currentUser.groups.map(group => group.name);

            // ユーザーがいずれかの除外グループに属しているか確認
            const isExcluded = excludedGroups.some(group => userGroups.includes(group));

            if (!isExcluded) {
                // ここにカスタムスクリプトロジックを記述
                console.log('Script is executed for this user.');
                // 例: 除外されていないユーザー向けのカスタムロジックをトリガー
                // customScriptFunction();
            } else {
                console.log('User is in an excluded group, script not executed.');
            }
        }
    });
</script>

説明:

  1. api.onPageChange(): ページが変更されるたびにスクリプトを実行します。
  2. api.getCurrentUser(): 現在ログインしているユーザーの詳細を取得します。
  3. excludedGroups: 除外したいグループをリストアップします。
  4. userGroups.includes(group): ユーザーがいずれかの除外グループに属しているかどうかを確認します。
  5. 条件付きスクリプト実行: スクリプトは、ユーザーがいずれかの除外グループに属していない場合にのみ実行されます。

customScriptFunction(); を実行したいスクリプトに置き換えることができます。さらに調整が必要な場合はお知らせください！

私の頭はこれで完全に吹き飛びました :exploding_head:。まだ試していませんが、ChatGPTのコードは正しいのでしょうか？