Zeige benutzerdefiniertes HTML im Header für Mitglieder einer bestimmten Gruppe

[jord8on (Jordan)]

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

[jord8on (Jordan)]

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!

[smrtey]

<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(() => { .

[Falco]

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

[smrtey]

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

[Paracelsus]

Hallo,

ich habe nach etwas Ähnlichem gesucht, aber unter Ausschluss einiger Gruppen, also habe ich es mit ChatGPT versucht, und die Antwort war:

Um ein HTML-Theme in Discourse zu erstellen, das ein Skript auslöst, das bestimmte Gruppen ausschließt, müssen Sie die Theme-Anpassungsoptionen von Discourse zusammen mit JavaScript verwenden, um Gruppen ausschlüsse zu handhaben. Discourse bietet api.getCurrentUser(), um Benutzerdetails abzurufen, einschließlich ihrer Gruppen, was nützlich sein kann, um Ihr Skript bedingt auszulösen.

Hier ist ein Beispiel, wie Sie dies im Abschnitt Ihres Themes oder Komponenten implementieren könnten:

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Aktuelle Benutzerdetails abrufen
        const currentUser = api.getCurrentUser();

        if (currentUser) {
            // Liste der Gruppennamen, die von der Skriptausführung ausgeschlossen werden sollen
            const excludedGroups = ['group1', 'group2'];

            // Die Gruppen des Benutzers abrufen
            const userGroups = currentUser.groups.map(group => group.name);

            // Prüfen, ob der Benutzer zu einer ausgeschlossenen Gruppe gehört
            const isExcluded = excludedGroups.some(group => userGroups.includes(group));

            if (!isExcluded) {
                // Ihre benutzerdefinierte Skriptlogik hier
                console.log('Skript wird für diesen Benutzer ausgeführt.');
                // Beispiel: benutzerdefinierte Logik für nicht ausgeschlossene Benutzer auslösen
                // customScriptFunction();
            } else {
                console.log('Benutzer gehört zu einer ausgeschlossenen Gruppe, Skript wird nicht ausgeführt.');
            }
        }
    });
</script>

Erklärung:

1. api.onPageChange(): Führt das Skript jedes Mal aus, wenn sich die Seite ändert.
2. api.getCurrentUser(): Ruft die Details des aktuell angemeldeten Benutzers ab.
3. excludedGroups: Listen Sie die Gruppen auf, die Sie ausschließen möchten.
4. userGroups.includes(group): Prüft, ob der Benutzer zu einer ausgeschlossenen Gruppe gehört.
5. Bedingte Skriptausführung: Das Skript wird nur ausgeführt, wenn der Benutzer keiner ausgeschlossenen Gruppe angehört.

Sie können customScriptFunction(); durch jedes Skript ersetzen, das Sie ausführen müssen. Lassen Sie mich wissen, wenn Sie weitere Anpassungen benötigen!

Ich meine, mein Verstand ist völlig überwältigt davon . Ich habe es noch nicht ausprobiert, aber ist der ChatGPT-Code korrekt?