Il codice JS smette di funzionare quando la pagina viene aggiornata

Sviluppatore
1

Ciao,

Come possiamo risolvere questo problema, per favore aiutami :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

Perché lo stai facendo con JS invece di applicare stili CSS?

2 Mi Piace
3

I tag non sono stati posizionati come volevo con CSS

4

Come mai? L’iniezione manuale di stili dovrebbe avere lo stesso risultato di una modifica CSS.

5

Non sono un professionista. Posso solo apportare modifiche con i codici che trovo. Non posso scrivere codice da zero.
Puoi controllare il mio forum
https://pvpfarm.com

La mia priorità è sempre quella di modificare con CSS. I miei primi codici JS.

6

Penso che tu voglia qualcosa del genere:

  1. Sposta i tag usando la presa del plugin 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. Usa il CSS per nascondere il tag originale e stilizzarli (potrebbe essere necessario regolarlo)
.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 Mi Piace
7

Grazie per il tuo aiuto. :pray:
Sto usando questi codici in questo momento e funziona.

<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

Sono contento che funzioni per te. Sì, usare JavaScript puro può funzionare. Tuttavia, suggerisco vivamente di utilizzare l’API di Discourse e l’outlet del plugin per raggiungere il tuo obiettivo. È più pulito e più resiliente ai cambiamenti. :+1:

1 Mi Piace
9

Il mio inglese è inadeguato in molte materie.
Non voglio che nessun codice danneggi il sito.
Ad esempio, non voglio che questi codici JS rallentino il sito. (Spero :grin:)
Grazie per il tuo aiuto :heart:

10

Penso che non sia un buon modo per fare quello che stai cercando di fare.

Cosa stai cercando di fare?

1 Mi Piace
11

Ho spostato i tag a sinistra del titolo dell’argomento.
Ha funzionato, ma non ho scelta. Perché non posso scrivere codice con CSS.
Puoi visitare il mio sito. Ho scritto il link sopra.

12

Nel mio post precedente #6, ti ho fornito un modo più pulito per farlo.

Idealmente, vorresti aggiornare direttamente il template, ma non è una buona pratica in quanto porterà a problemi di manutenzione e compatibilità.

1 Mi Piace
13

Ho caricato i codici che mi hai dato nei posti richiesti. Ma non ha funzionato come funziona ora.

I codici che mi hai dato sono ora attivi sul sito. Vuoi dare un’occhiata?

14

Vedo il problema!

È strano; non esiste un outlet per plugin nel template “elenco argomenti più recenti” nella pagina della categoria. :thinking:

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

Quindi, sì, hai ragione. Sfortunatamente, il mio codice non funziona in quella pagina.

Dovrebbe funzionare su /latest, però.

cosa vedo sul mio discourse locale

image
image473×209 4.75 KB

2 Mi Piace
15

Se mai scriverò codice, lo farò con CSS.
Oppure arriverà un eroe ad aiutarmi. :smiley: