كود JS يتوقف عن العمل عند تحديث الصفحة

[ogulcan1787]

مرحباً،

كيف يمكننا إصلاح ذلك، من فضلك ساعدني

<script>
let intervalId = setInterval(() => {
  const tags = document.querySelectorAll('.discourse-tag');
  if (tags.length > 0) {
    Array.prototype.forEach.call(tags, (tag) => {
      const tagClone = tag.cloneNode(true);
      tagClone.style.fontSize = 'var(--font-down-2)';
      tagClone.style.backgroundColor = '#1f1f33';
      tagClone.style.margin = '1px';
      tagClone.style.borderRadius = '7px';
      tagClone.style.padding = '2px 8px';
      const title = tag.closest('.main-link').querySelector('.title');
      title.parentNode.insertBefore(tagClone, title);
      tag.remove();
    });
    clearInterval(intervalId);
  }
}, 100);
</script>

[Firepup650 (Firepup Sixfifty)]

لماذا تفعل هذا باستخدام JS بدلاً من تطبيق أنماط CSS؟

[ogulcan1787]

لم يتم وضع العلامات كما أردت باستخدام CSS

[Firepup650 (Firepup Sixfifty)]

كيف ذلك؟ يجب أن يؤدي إدخال الأنماط يدويًا إلى نفس نتيجة تغيير CSS.

[ogulcan1787]

أنا لست محترفًا. يمكنني فقط إجراء تعديلات باستخدام الأكواد التي أجدها. لا يمكنني كتابة أكواد من الصفر.
يمكنك التحقق من منتدى الخاص بي
https://pvpfarm.com

أولويتي دائمًا هي التعديل باستخدام CSS. أكواد JavaScript الأولى الخاصة بي.

[Arkshine]

أعتقد أنك تريد شيئًا كهذا:

1. انقل العلامات باستخدام منفذ المكون الإضافي topic-list-before-status.

<script type="text/x-handlebars" data-template-name="/connectors/topic-list-before-status/tag.raw">
  {{discourse-tags context.topic mode="list" tagsForUser=context.tagsForUser}}
</script>

2. استخدم CSS لإخفاء العلامة الأصلية وتنسيقها (قد تحتاج إلى تعديلها)

.link-bottom-line .discourse-tags {
    display: none;
}

.link-top-line .discourse-tags {
    column-gap: 5px;
    vertical-align: text-top;
    
    .discourse-tag {
        font-size: var(--font-down-2);
        border-radius: 7px;
        padding: 2px 8px;
        background-color: #1f1f33;
    }

    .discourse-tag::after {
        content: '' !important;
        margin: none !important;
    }
}

[ogulcan1787]

شكراً لمساعدتك.
أنا أستخدم هذه الأكواد حاليًا وهي تعمل.

function moveTagsToTitle() {
    const mainLinks = document.querySelectorAll('.main-link');
    mainLinks.forEach(mainLink => {
        const discourseTags = mainLink.querySelector('.discourse-tags');
        const titleElement = mainLink.querySelector('.title');

        if (discourseTags && titleElement) {
            const tags = discourseTags.querySelectorAll('.discourse-tag');

            tags.forEach(tag => {
                const tagSpan = document.createElement('span');
                tagSpan.className = 'discourse-tag box';
                tagSpan.textContent = tag.textContent;
                tagSpan.style.fontSize = 'var(--font-down-2)';
                tagSpan.style.borderRadius = '10px';
                tagSpan.style.border = '1px solid #444460';
                tagSpan.style.backgroundColor = '#1f1f33';
                tagSpan.style.color = 'white';
                tagSpan.style.margin = '2px';
                tagSpan.style.padding = '2px 8px';
                tagSpan.style.display = 'inline-block';
                tagSpan.style.overflow = 'hidden';
                tagSpan.style.whiteSpace = 'nowrap';
                tagSpan.style.textOverflow = 'ellipsis';
                tagSpan.style.verticalAlign = 'middle';
                tagSpan.style.marginRight = '5px';
                titleElement.insertBefore(tagSpan, titleElement.firstChild);
            });

            if (discourseTags.parentNode) {
                discourseTags.parentNode.removeChild(discourseTags);
            }
        }
    });
}

window.addEventListener('load', moveTagsToTitle);
const observer = new MutationObserver(moveTagsToTitle);
const targetNode = document.body;
const observerOptions = {
    childList: true,
    subtree: true
};
observer.observe(targetNode, observerOptions);

[Arkshine]

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

[ogulcan1787]

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

[pfaffman (Jay Pfaffman)]

أعتقد أن هذه ليست طريقة جيدة لفعل ما تحاول القيام به.

ما الذي تحاول القيام به؟

[ogulcan1787]

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

[Arkshine]

في منشوري السابق #6، قدمت لك طريقة أنظف للقيام بذلك.
من الناحية المثالية، سترغب في تحديث القالب مباشرة، ولكن هذه ليست ممارسة جيدة لأنها ستؤدي إلى مشاكل في الصيانة والتوافق.

[ogulcan1787]

لقد قمت بتحميل الأكواد التي قدمتها في الأماكن المطلوبة. لكنها لم تعمل بالطريقة التي تعمل بها الآن.

الأكواد التي قدمتها نشطة الآن على الموقع. هل ترغب في إلقاء نظرة؟

[Arkshine]

أرى المشكلة!

هذا غريب؛ لا يوجد منفذ إضافي في قالب “أحدث قائمة مواضيع” في صفحة الفئة.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/latest-topic-list-item.hbs#L13

لذا، نعم، أنت على حق. للأسف، الكود الخاص بي لا يعمل على تلك الصفحة.

يجب أن يعمل على /latest، مع ذلك.

ما أراه في discourse المحلي الخاص بي

[ogulcan1787]

إذا كتبت كودًا على الإطلاق، فسأفعله باستخدام CSS.
أو سيأتي بطل ويساعدني.