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

開発
1

Hello Discourse Fam! I’m hoping that there’s an easy solution for this! I feel like the answer is that I need to use some Javascript.

We have 4 buttons in the “after header” section of our admin CSS/HTML settings.

image
image1189×397 98 KB

We would like to have some buttons only visible to members of specific groups, with the rest of the buttons visible to all users.

e.g. Let’s say we want those main 4 buttons for everyone, but we want another button to only be visible to the members of a particular GROUP.

I don’t know JS so if it’s really simple and someone could help provide a snippet or something, that would be so helpful :pray:

「いいね！」 4
2

I found this article which seems very similar, for the Zendesk platform, but I think that’s the type of functionality we’re looking for!

「いいね！」 1
3 
<div id="after-header">Stuff</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
}

It also seems to work if you replace
api.onPageChange(() => {
with
$( document ).ready(function() {
and then the script won’t load on every page, but I never know for sure where I need api.onPageChange(() => { .

「いいね！」 5
4

If you install this component, all groups of the current user will be added as classes in the page body, making it easy for CSS only further changes.

https://github.com/discourse/discourse-groups-css-classes-in-body

「いいね！」 7
5

haha, that was going to be the next thing I tried to figure out

「いいね！」 1
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のコードは正しいのでしょうか？