Comment changer le lien associé à un bouton dans le panneau du menu utilisateur

Dev
1

Au lieu que le bouton mis en évidence pointe vers u/miles/summary, je préférerais qu’il pointe vers u/miles/activity. Comment puis-je faire cela ? J’ai essayé de chercher en ligne (il semble que vous deviez modifier l’attribut data-url avec JavaScript, mais la seule méthode que j’ai vue pour le faire consistait à d’abord obtenir l’ID de l’élément, or cet élément n’en possède pas.)

PIC
PIC1920×1080 480 KB

2

Vous devrez rouvrir le widget concerné dans un composant de thème, comme ceci :

api.reopenWidget("user-menu-links", {
  profileGlyph() {
    return {
      title: Titles["profile"],
      className: "user-preferences-link menu-link",
      id: QuickAccess.PROFILE,
      icon: "user",
      action: UserMenuAction.QUICK_ACCESS,
      actionParam: QuickAccess.PROFILE,
      data: { url: `${this.attrs.path}/activity` },
      role: "tab",
      tabAttrs: this._tabAttrs(QuickAccess.PROFILE),
    };
  },
})
3

Merci ! Ça semble logique, je pense.
Une chose cependant : je l’insère dans </head> mais j’obtiens l’erreur : SyntaxError: unknown: Unexpected token, expected "," (28:6)

<script type="text/discourse-plugin" version="0.8">    
    api.reopenWidget("user-menu-links", {
      profileGlyph() {
        return {
          title: Titles["profile"],
          className: "user-preferences-link menu-link",
          id: QuickAccess.PROFILE,
          icon: "user",
          action: UserMenuAction.QUICK_ACCESS,
          actionParam: QuickAccess.PROFILE,
          data: { url: `${this.attrs.path}/activity` },
          role: "tab",
          tabAttrs: this._tabAttrs(QuickAccess.PROFILE),
        };
      },
    }
</script>
4

Il manquait une parenthèse fermante ci-dessus, mis à jour

6

Aucune erreur maintenant, mais… Cela empêche désormais le menu déroulant user-menu-links de s’ouvrir. Avez-vous une idée de la raison de ce problème ?

7

Que avez-vous fait pour le déboguer ?

Regarder la console JavaScript dans le navigateur est toujours un bon point de départ.

Si vous regardez de plus près, il y a trois problèmes évidents (en fin de compte).

La solution est assez simple dans ce cas : il vous suffit de fournir les constantes manquantes :

      const UserMenuAction = {
        QUICK_ACCESS: "quickAccess",
      };

      const QuickAccess = {
        BOOKMARKS: "bookmarks",
        MESSAGES: "messages",
        NOTIFICATIONS: "notifications",
        PROFILE: "profile",
      };
      
      const Titles = {
        bookmarks: "user.bookmarks",
        messages: "user.private_messages",
        notifications: "user.notifications",
        profile: "user.preferences",
      };

Une fois que vous ajoutez ces éléments (à partir du code source original), cela fonctionne :tada:

(Mais consultez l’optimisation de Faizaan ci-dessous, qui rend ces constantes inutiles, ce qui est encore mieux :slight_smile: )

8

Plus simplement

<script type="text/discourse-plugin" version="0.8">    
api.reopenWidget("user-menu-links", {
  profileGlyph() {
   const glyph = this._super(...arguments);
   glyph['data'] = { url: `${this.attrs.path}/activity` };
   return glyph;
  },
}

Cependant, cela n’a pas encore été testé :wink:

9

Oui, c’est beaucoup mieux et cela évite le besoin de constantes — belle optimisation ! :slight_smile:

10

En fait, vous pouvez même aller plus loin et l’omettre :

      api.reopenWidget("user-menu-links", {
        profileGlyph() {
         const glyph = this._super();
         glyph['data'] = { url: `${this.attrs.path}/activity` };
         return glyph;
        }
      });

Comme il n’y a aucun argument.

11

Merci les amis ! Ça fonctionne parfaitement. J’apprends aussi beaucoup sur l’édition de Discourse !