أيقونة مخصصة فريدة لصفحة المراجعة فقط

[Joart]

مرحباً،
أود استبدال أيقونات التحقق في صفحة المراجعة فقط. يمكننا العثور عليها هناك:

<span class="approved">
        <svg class="fa d-icon d-icon-check svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
          <use href="#check"></use>
        </svg>
        Approved
      </span>

إذا استخدمت هذا:
api.replaceIcon('check', 'full-circle-icon');
سيتم استبدال جميع علامات التحقق في المنتدى بالدائرة الكاملة…
لكنني لا أريد استبدال الأيقونة في الصفحات الأخرى.

كيف يمكنني تعديل ذلك؟ شكراً لإجابتك.

[Canapin (Coin-coin le Canapin)]

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

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

أو ربما يمكنك فقط إرجاع عنوان URL الحالي للتحقق مما إذا كنت على /review.

[Joart]

لقد جربت ذلك:

    api.onPageChange((url) => {
       if (window.location.href.indexOf("review") > -1) {
             api.replaceIcon('check', 'full-circle-icon');
       }
    }

لكنه لا يعمل…
لدي هذا الخطأ:

SyntaxError: /discourse/theme-35/initializers/theme-field-379-common-html-script-1: Unexpected token, expected “,” (97:5)

هل فعلت شيئًا خاطئًا؟

[Canapin (Coin-coin le Canapin)]

لقد نسيت ); في نهاية الكود الخاص بك، ومن هنا جاء الخطأ.

قد يعمل شيء مثل هذا (لا تهتم بتحليل URI، فهناك العديد من الطرق للقيام بذلك):

    api.onPageChange((url) => {
       if (location.pathname.split('/')[1] == "review") {
            api.replaceIcon('check', 'full-circle-icon');
       }
    });

لكن كن على علم بأن onPageChange لا يتم تشغيله عند تحميل الصفحة لأول مرة. إذا فتحت yourforum/reviews مباشرة في متصفحك، فلن يتم تشغيل onPageChange ولن يتم استبدال الأيقونة.

لا أعرف كيف أقوم بتشغيل تغيير الأيقونة عند تحميل الصفحة لأول مرة وعند تغيير الصفحة. ربما هناك طريقة API للقيام بذلك، لكنني لم أجدها.

بالإضافة إلى ذلك، بمجرد تغيير الأيقونة، ستظل متغيرة في الصفحات الأخرى أثناء تنقلك، لذلك يجب عليك التراجع عن تغيير الأيقونة إذا لم يكن عنوان URL هو /review.

باختصار… أعتقد أن الأمر يتطلب المزيد من العمل ليكون وظيفيًا بالكامل. لاحظ أنني لست خبيرًا في كود Discourse أو JavaScript. ربما يتمكن شخص لديه المزيد من المعرفة من المساعدة بشكل أكبر.

---

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

[Joart]

@Canapin

يجب عليك التراجع عن الأيقونة

هل تعرف كيف تفعل ذلك؟

[Don]

أهلاً،

أنا أكتب حلاً لـ CSS أيضاً.

سيؤدي هذا إلى إخفاء أيقونة التحقق الافتراضية وإضافة أيقونة مخصصة إلى ::before زائف.

1. قم بإنشاء مكون سمة جديد.

2. قم بتحميل الأيقونة إلى قسم التحميلات وأضف اسم متغير SCSS: review-approved-icon
   

   

3. انقر فوق الزر تعديل CSS/HTML والصق الكود التالي في قسم Common / CSS.

استخدم هذا إذا كنت تريد استخدام var(--success) لإضافة لون إلى الأيقونة المخصصة

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) light scheme color #090 (custom icon color)
      // you can calculate new light color filter here: https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%);
      @media (prefers-color-scheme: dark) {
        // var(--success) dark scheme color #1ca551 (custom icon color)
        // you can calculate new dark color filter here: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

استخدم هذا إذا كانت أيقونتك تحتوي على اللون الذي تريد استخدامه

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

استخدم هذا إذا كنت تريد استخدام أيقونة مختلفة في مخطط الألوان الفاتح والداكن

إذا اخترت هذا، فسيتعين عليك تحميل أيقونتين مختلفتين بألوان مختلفة.

اسم متغير SCSS: review-approved-icon-light و review-approved-icon-dark

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon-light);
      @media (prefers-color-scheme: dark) {
        content: url($review-approved-icon-dark);
      }
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---