Impossible d'ajouter une nouvelle classe aux éléments de la page de sujet avec jQuery ?

J’ai du mal à comprendre comment Discourse fonctionne et je suis toujours confus après avoir lu ceci. J’essaie d’ajouter un titre dynamique au nom d’utilisateur de l’administrateur sur la page des messages en utilisant jQuery, mais cela ne fonctionne pas.

Cependant, si je cible, par exemple, la balise body et que j’ajoute une classe, cela fonctionne.
Alors, quelqu’un pourrait-il s’il vous plaît expliquer pourquoi cela ne fonctionne pas ?
Le code est inséré dans l’onglet en-tête, au passage.

<script>
  $(".names span.admin a").attr('title', 'Administrateur de la communauté');
</script>

Dois-je injecter cela dans un point d’extension de plugin ou autre chose ?

Probablement parce que, dans ce cas, jQuery ne s’entend pas bien avec le pipeline de rendu d’Ember et des widgets.

Vous voyez, dans ce script, vous n’avez aucun contrôle sur le moment où cela se déclenche et par rapport à l’état d’avancement de l’application JavaScript lors du dessin de l’écran.

Il existe cependant une méthode d’API JavaScript pour cela ; consultez-en plus ici :

decorateWidget()

Et ce widget spécifique :

Cependant, avant de vous lancer dans cette grotte de lapin, revenons un peu en arrière : voulez-vous simplement qu’un titre soit affiché ?

Par exemple, sur les messages de Jeff :

image367×114 7.42 KB

Il a le titre : « co-fondateur ».

Créez simplement un nouveau groupe, ajoutez les administrateurs, allez dans Gérer ⇒ Adhésion et modifiez le Titre par défaut.

Maintenant, ils peuvent sélectionner ce titre dans les paramètres de leur compte, dans Préférences (ou vous pouvez le faire pour eux).

image994×551 14.4 KB

Vous pouvez également utiliser cette fonctionnalité pour afficher un badge spécial d’avatar (également démontré par la capture d’écran ci-dessus).

Bien sûr, si vous ne voulez pas quelque chose d’aussi « fixe », vous devrez envisager la voie du codage, mais cela, je suis sûr que vous en conviendrez, demande beaucoup moins d’efforts.

Merci pour votre aide. Ce n’est pas le titre du forum que je recherche, mais plutôt pour afficher un titre au survol de cette petite icône de couronne que j’ai créée (visible uniquement pour les administrateurs) :

image450×178 72.4 KB

Au fait, voici le code CSS pour cela :

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;

Super.

Ça a l’air que vous pourriez envisager la voie du widget.

Considérez aussi cette méthode API :

api.reopenWidget("poster-name", {

      html() {
          <<votre-code-ici-mais-envisagez-d-utiliser-l-original-comme-modele>>
      }
}

Je vous recommande de consulter : A tour of how the Widget (Virtual DOM) code in Discourse works

C’est nettement plus laborieux de faire ce genre de chose dans Discourse car c’est une application web « magique », mais une fois que vous le faites correctement, la solution peut être très robuste.

Super, merci beaucoup. Je vais jeter un coup d’œil et publier la solution si j’y arrive. À première vue, Discourse fait peur quand il s’agit de personnalisation, et je pensais que WordPress était difficile . Mais, une fois que je serai familiarisé avec tout ce système de plugins et de modèles, je pense que cela deviendra plus facile.

En fait, boom, il pourrait y avoir une solution encore plus simple :

Envisagez cette méthode API pour remplacer le bouclier de modérateur standard :

 api.replaceIcon('shield-alt', 'crown');

et modifiez ensuite le texte de l’infobulle ici :

image1152×402 10.7 KB

À ce stade, votre CSS d’origine est potentiellement redondant (bien que vous puissiez recolorer l’icône).

Mais cela supprimera l’icône du bouclier pour les modérateurs, n’est-ce pas ? Parce que je ne veux pas cela. Je dois ajouter l’icône de la couronne et le texte au survol uniquement pour les administrateurs, car ils n’en ont aucun sur la page des publications.

Ah, oui, je suis trop habitué à mes sites où je suis à la fois modérateur et administrateur. Si vous séparez ces rôles, cela ne fonctionnera pas (c’est-à-dire que les administrateurs ne sont jamais modérateurs). Vous devrez accorder aux administrateurs les droits de modérateur.

Donc, explorez les autres options.

Essayez ceci :

api.reopenWidget("poster-name", {
  posterGlyph(attrs) {
    if (attrs.moderator || attrs.groupModerator) {
      return iconNode("shield-alt", {
        title: I18n.t("user.moderator_tooltip"),
      });
    };
    if (attrs.admin) {
      return iconNode("crown", {
        title: I18n.t("user.admin_tooltip"),
      });
    }
  }
})

et

image1129×388 10.3 KB

cela fonctionne pour moi :

image736×305 14.6 KB

Dans ce cas, le premier utilisateur est à la fois administrateur et modérateur, tandis que le second est uniquement administrateur. Vous pouvez affiner cette logique ; faites en sorte que la couronne ait la priorité en inversant l’ordre des instructions if.

Ça ressemble à une solution, mais comme je l’ai dit, je débute dans la personnalisation de Discourse… Pourriez-vous s’il vous plaît m’expliquer exactement où je dois coller votre code, car je n’ai encore jamais essayé de méthode d’API.

… donnez-moi une seconde, je vais construire cela correctement pour vous

Ok, il s’agit maintenant d’un composant de thème :

(Installing a theme or theme component)

Le rôle d’administrateur prime – par défaut, une couronne s’affiche pour un administrateur qui possède également le rôle de modérateur.

Vous pouvez désormais configurer l’icône par type de membre du personnel.

image569×174 3.2 KB

Assurez-vous simplement d’ajouter les noms des icônes dans le paramètre de sous-ensemble d’icônes SVG (sinon elles ne s’afficheront pas) :

image1141×242 9.07 KB

Personnalisez votre texte de titre ici :

image1129×388 10.3 KB

De même pour le modérateur.

Superbe . Merci beaucoup pour votre aide !

Plaisir (celui-là était assez amusant !)

J’ai mis à jour le TC afin qu’il modifie désormais les icônes du personnel sur la carte utilisateur (et peut-être ailleurs, puisque j’ai modifié le helper).

Les icônes sont maintenant configurables à la fois pour l’administrateur et pour le modérateur, bien que la couronne soit la valeur par défaut pour l’administrateur et le bouclier vanilla pour le modérateur.

J’ai renommé le TC.

Il est certain qu’il existe des endroits où les icônes n’ont pas été converties ; peut-être en repérerai-je d’autres à l’avenir.

Merci beaucoup ! Cela m’a aidé avec ce que je voulais faire pour mon forum ! Je pense que votre commentaire devrait être épinglé pour les autres utilisateurs qui ont des problèmes avec une icône s’affichant à côté de leur nom en tant qu’administrateur. J’ai utilisé votre fonctionnalité pour afficher l’icône de bouclier qui est publiquement visible sur le profil des modérateurs pour les administrateurs. Maintenant, je peux avoir l’icône de bouclier sans avoir les permissions de modérateur et elle a l’infobulle d’administrateur correcte lorsque je n’ai que les permissions d’administrateur. Merci beaucoup pour votre temps pour créer ce composant génial pour les forums des gens !

Edit : Il ne s’affiche pas publiquement sur leur profil. Il ne fonctionne actuellement que sur les publications.

De rien. N’hésitez pas à forker, étendre et faire des PR !