ユーザーメニューパネルのボタンに関連付けられたリンクを変更する方法

開発
1

ハイライトされたボタンが u/miles/summary ではなく u/miles/activity を指すように変更したいのですが、どうすればよいでしょうか？オンラインで調べてみたところ（data-url 属性を JavaScript で変更する必要があるようですが）、その方法としてまず要素の ID を取得する必要があるとのことでした。しかし、この要素には ID がありません。

PIC
PIC1920×1080 480 KB

2

関連するウィジェットをテーマコンポーネントで再度開く必要があります。例えば次のようにします：

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

ありがとうございます！意味は通じると思います。
ただ一点、</head> にこのコードを挿入しようとしたところ、以下のエラーが発生しました：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

上記に閉じ括弧が不足していました。修正しました。

6

エラーはなくなりましたが、ユーザーメニューリンクのドロップダウンが開かなくなってしまいました。原因として考えられることはありますか？

7

デバッグのために何を行いましたか？

ブラウザの JavaScript コンソールを確認することは、常に良い第一歩です。

確認すると、最終的に明白な問題が 3 つあります。

この場合、解決策は非常にシンプルです。不足している定数を追加するだけで済みます。

      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",
      };

これら（元のソースコードから）を追加すれば、動作します :tada:

（ただし、Faizaan による以下の最適化を見ると、これらが不要になるため、こちらの方がさらに優れています :)）

8

よりシンプルに

<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;
  },
}

ただし、未検証です :wink:

9

はい、ずっと良くなりました。定数が必要なくなるので、素晴らしい最適化ですね！:slight_smile:

10

実際には、それすら省略してさらに進めることができます：

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

引数がないためです

11

皆さん、ありがとうございます！完璧に動いています。Discourse の編集についても、たくさん学んでいます！