كيف أحرر روابط الشريط الجانبي التي تم إضافتها باستخدام api.addCommunitySectionLink؟

مطور
1

أود إضافة رابط جديد لشريط جانبي بمكون. أستخدم هذا الرمز:

      api.addCommunitySectionLink({
        name: "custom-homepage",
        route: "discovery.custom",
        title: "Home",
        text: "Home",
        icon: "house",
      });

هذا يضيف الرابط، ولكنه لا يظهر في نافذة التخصيص. لذلك، لا يمكنني تعديل الرابط الافتراضي أو سحبه إلى موضع مختلف.

أرى أن هذا ينطبق أيضًا على رابط أضافه المكوّن الإضافي للتقويم. إليك الرابط:

image
image246×227 6.21 KB

ولكن في نافذة التخصيص، لا يظهر الرابط:

This image depicts a screenshot of a user interface for editing a custom section, showing icons and names for different custom links such as "Topics," "My Posts," "Review," and "Admin," along with corresponding URLs. (Captioned by AI)
This image depicts a screenshot of a user interface for editing a custom section, showing icons and names for different custom links such as "Topics," "My Posts," "Review," and "Admin," along with corresponding URLs. (Captioned by AI)593×466 18.2 KB

لذلك، أتساءل عما إذا كانت هذه مشكلة. أو هل هناك نهج آخر؟

3 إعجابات
2

للأسف لا يمكنك ذلك،

5 إعجابات
3

هل سيتم التراجع عن التغييرات عند كل تحديث للمكون أو الإضافة؟

أعتقد أن النهج هو عدم إضافة رابط افتراضي على الإطلاق.

إعجابَين (2)
4

فقط إذا كنت تقوم بالكتابة فوق المكون/المكون الإضافي مباشرةً… إذا كنت تريد تغيير الترتيب في القسم الحالي، فمن الأسهل على الأرجح إعادة الترتيب باستخدام CSS

#sidebar-section-content-community {
  display: flex;
  flex-direction: column;
  
  li {
    order: 2
  }
  
  [data-list-item-name="upcoming-events"] {
    order: 1
  }
}

إذا كنت تريد نقل العنصر إلى درج “المزيد”، قم بإخفاء العنصر الأصلي ونسخه في مكون منفصل:

#sidebar-section-content-community {
  [data-list-item-name="upcoming-events"] {
    display: none;
  }
}

import { apiInitializer } from "discourse/lib/api";
import { i18n } from "discourse-i18n";

export default apiInitializer((api) => {
  const siteSettings = api.container.lookup("service:site-settings");
  if (
    siteSettings.discourse_post_event_enabled &&
    siteSettings.sidebar_show_upcoming_events
  ) {
    api.addCommunitySectionLink(
      {
        name: "custom-upcoming-events",
        route: "discourse-post-event-upcoming-events",
        text: i18n("discourse_post_event.upcoming_events.title"),
        title: i18n("discourse_post_event.upcoming_events.title"),
        icon: "calendar-days",
      },
      true,
    );
  }
});
إعجابَين (2)
5

إذا لم يكن من الممكن تعديل الروابط الجديدة في نافذة التخصيص، أعتقد أنني سأتخلى عن فكرة إضافتها في الوقت الحالي. يبدو الأمر مربكًا فقط إضافة رابط مراوغ في نافذة التخصيص بعد ذلك.

ومع ذلك، أرغب في تمييز الرابط (إذا تمت إضافته يدويًا) عند وجوده على المسار المتعلق به، لذا سأضيف هذا الآن:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.8", (api) => {
  const router = api.container.lookup("service:router");

  api.onPageChange(() => {
    const currentRoute = router.currentRoute.name;
    const customHomepageLink = document.querySelector(
      '.sidebar-section-link[href="/custom"]'
    );

    if (currentRoute === "discovery.custom") {
      if (customHomepageLink) {
        customHomepageLink.classList.add("active");
      }
    } else {
      if (customHomepageLink) {
        customHomepageLink.classList.remove("active");
      }
    }
  });
});
إعجاب واحد (1)