كيفية تغيير الرابط المرتبط بزر في لوحة قائمة المستخدم

مطور
1

بدلاً من أن يشير الزر المميز إلى u/miles/summary، أود أن يشير إلى u/miles/activity. كيف يمكنني فعل ذلك؟ لقد حاولت البحث عن ذلك عبر الإنترنت (يبدو أنه يتعين عليك تغيير سمة data-url باستخدام JavaScript، ولكن الطريقة الوحيدة التي رأيتها للقيام بذلك كانت الحصول أولاً على معرف العنصر، وهذا العنصر لا يحتوي على معرف.)

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 في المتصفح نقطة انطلاق جيدة دائمًا.

إذا نظرت إليها، ستجد ثلاث مشاكل واضحة (في النهاية).

الحل في هذه الحالة بسيط جدًا؛ كل ما عليك فعله هو توفير الثوابت المفقودة:

      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:

(ولكن راجع تحسين فايزان أدناه الذي يلغي الحاجة إلى هذه الثوابت، وهو أفضل حتى :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

شكرًا لكم يا رفاق! يعمل بشكل مثالي. أتعلّم الكثير أيضًا حول تحرير Discourse!