Afficher du HTML personnalisé dans l'en-tête pour un membre d'un groupe spécifique

Dev
1

Bonjour à toute la communauté Discourse ! J’espère qu’il existe une solution simple pour cela ! Je pense que la réponse est que je dois utiliser du JavaScript.

Nous avons 4 boutons dans la section « après l’en-tête » de nos paramètres CSS/HTML d’administration.

image
image1189×397 98 KB

Nous aimerions que certains boutons ne soient visibles que pour les membres de groupes spécifiques, tandis que le reste des boutons serait visible pour tous les utilisateurs.

Par exemple : disons que nous voulons ces 4 boutons principaux pour tout le monde, mais nous souhaitons qu’un autre bouton ne soit visible que pour les membres d’un GROUPE particulier.

Je ne connais pas le JavaScript, donc si c’est vraiment simple et que quelqu’un pourrait fournir un extrait de code ou quelque chose de similaire, ce serait très utile :folded_hands:

2

J’ai trouvé cet article qui semble très similaire, pour la plateforme Zendesk, mais je pense que c’est le type de fonctionnalité que nous recherchons !

3 
<div id="after-header">Contenu</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
}

Cela semble également fonctionner si vous remplacez
api.onPageChange(() => {
par
$( document ).ready(function() {
et le script ne se chargera alors pas sur chaque page, mais je ne sais jamais avec certitude où j’ai besoin de api.onPageChange(() => {.

4

Si vous installez ce composant, tous les groupes de l’utilisateur actuel seront ajoutés sous forme de classes dans le corps de la page, facilitant ainsi les modifications ultérieures uniquement via CSS.

5

Haha, c’était la prochaine chose que j’allais essayer de comprendre

7

Salut,

Je cherchais quelque chose de similaire, mais en excluant certains groupes, alors j’ai essayé avec ChatGPT, et la réponse était :

Pour créer un thème HTML dans Discourse qui déclenche un script excluant des groupes spécifiques, vous devrez utiliser les options de personnalisation de thème de Discourse ainsi que JavaScript pour gérer les exclusions de groupe. Discourse fournit api.getCurrentUser() pour récupérer les détails de l’utilisateur, y compris ses groupes, ce qui peut être utile pour déclencher conditionnellement votre script.

Voici un exemple de la façon dont vous pourriez implémenter cela dans la section </head> de votre thème ou composant :

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Récupérer les détails de l'utilisateur actuel
        const currentUser = api.getCurrentUser();

        if (currentUser) {
            // Liste des noms de groupes que vous souhaitez exclure de l'exécution du script
            const excludedGroups = ['group1', 'group2'];

            // Obtenir les groupes de l'utilisateur
            const userGroups = currentUser.groups.map(group => group.name);

            // Vérifier si l'utilisateur appartient à un groupe exclu
            const isExcluded = excludedGroups.some(group => userGroups.includes(group));

            if (!isExcluded) {
                // Votre logique de script personnalisée ici
                console.log('Le script est exécuté pour cet utilisateur.');
                // Exemple : déclencher toute logique personnalisée pour les utilisateurs non exclus
                // customScriptFunction();
            } else {
                console.log('L\'utilisateur fait partie d\'un groupe exclu, le script ne sera pas exécuté.');
            }
        }
    });
</script>

Explication :

  1. api.onPageChange() : Exécute le script chaque fois que la page change.
  2. api.getCurrentUser() : Récupère les détails de l’utilisateur actuellement connecté.
  3. excludedGroups : Liste les groupes que vous souhaitez exclure.
  4. userGroups.includes(group) : Vérifie si l’utilisateur appartient à un groupe exclu.
  5. Exécution conditionnelle du script : Le script ne s’exécutera que si l’utilisateur ne fait pas partie d’un groupe exclu.

Vous pouvez remplacer customScriptFunction(); par le script que vous souhaitez exécuter. Faites-moi savoir si vous avez besoin d’ajustements supplémentaires !

Je veux dire, mon esprit est complètement époustouflé par ça :exploding_head:. Je ne l’ai pas encore essayé, mais le code ChatGPT est-il correct ?