Der JS-Code funktioniert nicht mehr, wenn die Seite aktualisiert wird

Entwickler
1

Hallo,

Wie können wir das beheben, bitte helfen Sie mir :pray:

<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>
2

Warum machst du das mit JS, anstatt CSS-Stile anzuwenden?

2 „Gefällt mir“
3

Tags wurden mit CSS nicht wie gewünscht positioniert

4

Wie meinen? Das manuelle Injizieren von Stilen sollte das gleiche Ergebnis wie eine CSS-Änderung haben.

5

Ich bin kein Profi. Ich kann nur mit den Codes, die ich finde, bearbeiten. Ich kann keinen Code von Grund auf neu schreiben.
Sie können mein Forum überprüfen
https://pvpfarm.com

Meine Priorität ist es immer, mit CSS zu bearbeiten. Meine ersten JS-Codes.

6

Ich glaube, Sie möchten so etwas:

  1. Verschieben Sie die Tags mit dem Plugin-Outlet 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>
  1. Verwenden Sie CSS, um das ursprüngliche Tag auszublenden und sie zu stylen (möglicherweise müssen Sie es anpassen)
.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;
    }
}
1 „Gefällt mir“
7

Vielen Dank für deine Hilfe. :pray:
Ich benutze gerade diesen Code und er funktioniert.

<script>
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);

</script>
8

Es freut mich, dass es für Sie funktioniert. Ja, die Verwendung von reinem JavaScript kann funktionieren. Ich empfehle jedoch dringend die Verwendung der Discourse-API und des Plugin-Outlets, um Ihr Ziel zu erreichen. Es ist sauberer und widerstandsfähiger gegenüber Änderungen. :+1:

1 „Gefällt mir“
9

Mein Englisch ist in vielen Fächern unzureichend.
Ich möchte nicht, dass Codes die Website beeinträchtigen.
Zum Beispiel möchte ich nicht, dass diese JS-Codes die Website verlangsamen. (Ich hoffe es :grin:)
Vielen Dank für Ihre Hilfe :heart:

10

Ich glaube nicht, dass das eine gute Methode ist, um das zu tun, was Sie vorhaben.

Was versuchen Sie zu tun?

1 „Gefällt mir“
11

Ich habe die Tags nach links neben den Thema-Titel verschoben.
Das hat funktioniert, aber ich habe keine Wahl. Weil ich keinen Code mit CSS schreiben kann.
Sie können meine Seite besuchen. Den Link habe ich oben geschrieben.

12

In meinem vorherigen Beitrag #6 habe ich Ihnen eine sauberere Methode dafür gezeigt.

Idealerweise möchten Sie die Vorlage direkt aktualisieren, aber das ist keine gute Praxis, da dies zu Wartungs- und Kompatibilitätsproblemen führt.

1 „Gefällt mir“
13

Ich habe die von Ihnen bereitgestellten Codes an den erforderlichen Stellen hochgeladen. Aber es hat nicht so funktioniert, wie es jetzt funktioniert.

Die von Ihnen bereitgestellten Codes sind jetzt auf der Website aktiv. Möchten Sie einen Blick darauf werfen?

14

Ich sehe das Problem!

Das ist seltsam; es gibt keinen Plugin-Outlet in der Vorlage „Latest Topic List“ auf der Kategorieseite. :thinking:

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

Also, ja, Sie haben Recht. Leider funktioniert mein Code auf dieser Seite nicht.

Er sollte jedoch auf /latest funktionieren.

Was ich auf meinem lokalen Discourse sehe

image
image473×209 4.75 KB

2 „Gefällt mir“
15

Wenn ich jemals Code schreibe, werde ich es mit CSS tun.
Oder ein Held wird kommen und mir helfen. :smiley: