عرض HTML مخصص في العنوان لأعضاء مجموعة معينة

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.

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 إعجابات

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)
<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 إعجابات

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 إعجابات

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

إعجاب واحد (1)

مرحباً،

لقد كنت أبحث عن شيء مشابه، ولكن مع استثناء بعض المجموعات، لذلك جربت ChatGPT، وكانت الإجابة:

لإنشاء سمة HTML في Discourse تقوم بتشغيل نص برمجي يستثني مجموعات معينة، ستحتاج إلى استخدام خيارات تخصيص السمات في 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('يتم تنفيذ النص البرمجي لهذا المستخدم.');
                // مثال: تشغيل أي منطق مخصص للمستخدمين غير المستبعدين
                // customScriptFunction();
            } else {
                console.log('المستخدم في مجموعة مستبعدة، لم يتم تنفيذ النص البرمجي.');
            }
        }
    });
</script>

شرح:

  1. api.onPageChange(): يقوم بتشغيل النص البرمجي في كل مرة تتغير فيها الصفحة.
  2. api.getCurrentUser(): يجلب تفاصيل المستخدم المسجل دخوله حاليًا.
  3. excludedGroups: قم بإدراج المجموعات التي تريد استبعادها.
  4. userGroups.includes(group): يتحقق مما إذا كان المستخدم ينتمي إلى أي مجموعة مستبعدة.
  5. التنفيذ الشرطي للنص البرمجي: سيتم تشغيل النص البرمجي فقط إذا لم يكن المستخدم جزءًا من أي مجموعة مستبعدة.

يمكنك استبدال customScriptFunction(); بأي نص برمجي تحتاجه. أخبرني إذا كنت بحاجة إلى أي تعديلات إضافية!

أعني، عقلي منفجر تمامًا من هذا :exploding_head:. لم أجربه بعد، ولكن هل رمز ChatGPT صحيح؟