خطأ عند النقر على شعار الصفحة الرئيسية

مطور
11

أوصي بشدة بعدم اتباع هذا المسار. إنه مثل وضع ضمادة على عرض جانبي بدلاً من معالجة السبب الجذري للمشكلة. ستؤدي إلى المزيد من المشاكل (مثل آخر موضوع لك بسبب الكود أعلاه)

يمكنك جعل جافاسكريبت الخاص بك أكثر ملاءمة لـ discourse (أفضل طريقة هي استخدام منفذ الإضافة عندما تستطيع).
إليك مثال. يستخدم واجهة برمجة التطبيقات عند تغيير الصفحة، ويشغل الكود في مسار معين، وينسخ HTML قبل الرابط (حتى تتمكن من النقر على العلامة):

JS 
<script type="text/discourse-plugin" version="0.8">
  const { next } = require("@ember/runloop");
  
  function moveTags() {
    const mainLinks = document.querySelectorAll(".main-link:not(.tags-moved)");
    
    mainLinks.forEach((mainLink) => {
      const discourseTags = mainLink.querySelector(".discourse-tags");
      const titleElement = mainLink.querySelector("a[data-topic-id]");

      if (discourseTags && titleElement) {
        titleElement.insertAdjacentHTML("beforebegin", discourseTags.outerHTML);
        mainLink.classList.add('tags-moved');
      }
    });
  }

  api.registerModelTransformer("topic", async (topics) => {
    next(() => {
      moveTags();
    })
  });

  api.onPageChange((url) => {
    if (url.startsWith("/categories")) {
      moveTags();
    }
  });
</script>
CSS 
.top-row, 
.link-top-line {
    .discourse-tag {
        font-size: var(--font-down-2) !important;
        padding: 2px 8px;
        margin: 2px 5px 2px -6px;
        border-radius: 10px;
        border: 1px solid #444460;
        background-color: #1f1f33;
    }
    
    .discourse-tag::after {
        content: '' !important;
        margin-left: 0 !important;
    }
}

.bottom-row, 
.link-bottom-line {
    .discourse-tags {
        display: none;
    }
}
إعجابَين (2)