ربط أزرار الشريط الجانبي والسكريبتات

مطور
1

أود إضافته على شكل زر في الشريط الجانبي (قائمة الهامبرغر) → المزيد أو في أسفل الشريط الجانبي ثم ربطه بـ JavaScript. كيف يمكنني الوصول إلى الشريط الجانبي لـ Discourse للقيام بذلك؟

لقد فعلت ما يلي، لكنه لم ينجح.
لقد وضعته في <body> للمكون.

<div class="sidebar-custom-sections">
  <ul class="sidebar-more-section-links-details-content-main">
    <li data-list-item-name="Install" class="sidebar-section-link-wrapper" id="sidebar_install_wrapper">
      <a href="#" rel="noopener noreferrer" target="_self" data-link-name="Install" class="sidebar-section-link sidebar-row" id="sidebar_install_button">
        <span class="sidebar-section-link-prefix icon">
          <svg class="fa d-icon d-icon-download svg-icon prefix-icon svg-string" xmlns="http://www.w3.org/2000/svg">
            <use href="#download"></use>
          </svg>
        </span>
        <span class="sidebar-section-link-content-text">
          Install
        </span>
      </a>
    </li>
  </ul>
</div>
2

إذا كنت تقصد إضافة رابط جديد هنا:

image
image299×413 5.44 KB

إذًا، يمكنك استخدام واجهة برمجة التطبيقات addCommunitySectionLink. لديك مثال في التعليق.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L2414-L2471

إعجابَين (2)
3 
<script>
api.addCommunitySectionLink({
  name: "unread",
  route: "discovery.unread",
  title: I18n.t("some.unread.title"),
  text: I18n.t("some.unread.text"),
  icon: "fa-envelope"
});
</script>

لقد وضعته في قسم نص HTML للمكون بهذه الطريقة، لكن يبدو أنه لم تتم إضافته بعد. هل لا يمكن القيام بذلك بهذه الطريقة؟

4

يجب عليك استخدام الكود التالي في Head بدلاً من ذلك:

<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "unread",
      route: "discovery.unread",
      title: I18n.t("some.unread.title"),
      text: I18n.t("some.unread.text"),
      icon: "fa-envelope"
    });
</script>

<script type="text/discourse-plugin" version="0.8"> مهم إذا كنت تريد استخدام واجهة برمجة التطبيقات (API).
هذا يجب أن يعمل بشكل أفضل. :+1:

إعجاب واحد (1)
5 
<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "install",
      route: "/install",
      title: "install",
      text: "install",
      icon: "download"
    });
</script>

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

<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "install",
      route: "discovery.latest",
      title: "install",
      text: "install",
      icon: "download"
    });
</script>
إعجاب واحد (1)