사용자 메뉴 패널에서 버튼에 연결된 링크를 변경하는 방법

개발
1

하이라이트된 버튼이 u/miles/summary를 가리키는 대신, u/miles/activity를 가리키도록 하고 싶습니다. 어떻게 해야 할까요? 온라인으로 검색해 봤는데(자바스크립트로 dara-url 속성을 변경해야 하는 것 같고, 제가 본 유일한 방법은 먼저 요소의 id를 가져오는 것이었는데, 이 요소에는 id가 없습니다.)

PIC
PIC1920×1080 480 KB

2

Theme Component에서 관련 위젯을 다시 열어야 합니다. 다음과 같은 방식으로요:

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 콘솔을 확인하는 것이 항상 좋은 시작입니다.

확인해 보면, 결국 세 가지 명확한 문제가 있습니다.

이 경우 해결 방법은 꽤 간단하며, 누락된 상수만 공급하면 됩니다:

      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의 최적화 방법을 참고하세요. 이 방법은 이러한 상수가 필요 없게 만들어 더 좋습니다 :slight_smile: )

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

감사합니다, 여러분! 완벽하게 작동합니다. 디스코urs 편집에 대해서도 많이 배우고 있어요!