O código JS para de funcionar quando a página é atualizada

[ogulcan1787]

Olá,

Como podemos consertar isso, por favor me ajude

<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)]

Por que você está fazendo isso com JS em vez de aplicar estilos CSS?

[ogulcan1787]

As tags não foram posicionadas como eu queria com CSS

[Firepup650 (Firepup Sixfifty)]

Como assim? Injetar estilos manualmente deveria ter o mesmo resultado que uma alteração de CSS.

[ogulcan1787]

Não sou um profissional. Só consigo fazer edições com os códigos que encontro. Não consigo escrever código do zero.
Você pode verificar meu fórum
https://pvpfarm.com

Minha prioridade é sempre editar com CSS. Meus primeiros códigos JS.

[Arkshine]

Acho que você quer algo assim:

1. Mova as tags usando o outlet de 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>

2. Use CSS para ocultar a tag original e estilizá-las (você pode precisar ajustá-la)

.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]

Obrigado pela ajuda.
Estou usando estes códigos no momento e funciona.

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]

Fico feliz que funcione para você. Sim, usar JavaScript puro pode funcionar. No entanto, sugiro fortemente usar a API do Discourse e o plugin outlet para atingir seu objetivo. É mais limpo e mais resiliente a mudanças.

[ogulcan1787]

Meu inglês é inadequado em muitas matérias.
Não quero que nenhum código prejudique o site.
Por exemplo, não quero que esses códigos JS deixem o site lento. (Espero )
Obrigado pela sua ajuda

[pfaffman (Jay Pfaffman)]

Acho que essa não é uma boa maneira de fazer o que você está tentando fazer.

O que você está tentando fazer?

[ogulcan1787]

Movi as tags para a esquerda do título do tópico.
Isso funcionou, mas não tenho escolha. Porque não consigo escrever código com CSS.
Você pode visitar meu site. Escrevi o link acima.

[Arkshine]

Na minha postagem anterior #6, dei a você uma maneira mais limpa de fazer isso.

Idealmente, você gostaria de atualizar o template diretamente, mas essa não é uma boa prática, pois levará a problemas de manutenção e compatibilidade.

[ogulcan1787]

Carreguei os códigos que você me deu nos locais necessários. Mas não funcionou da maneira que funciona agora.

Os códigos que você me deu agora estão ativos no site. Gostaria de dar uma olhada?

[Arkshine]

Eu vejo o problema!

Isso é estranho; não existe um outlet de plugin no template da “lista de tópicos mais recentes” na página da categoria.

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

Então, sim, você está certo. Infelizmente, meu código não funciona nessa página.

No entanto, deve funcionar em /latest.

o que eu vejo no meu discourse local

[ogulcan1787]

Se eu escrever código algum dia, farei isso com CSS.
Ou um herói virá e me ajudará.