网页刷新后,JS代码停止工作

你好,

请问我们该如何解决这个问题?请帮助我 :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>

你为什么用 JS 而不是应用 CSS 样式来做这件事?

2 个赞

使用 CSS 放置标签时,位置不符合我的预期

怎么会这样?手动注入样式应该与 CSS 更改产生相同的结果。

我不是专业人士。我只能用我找到的代码进行编辑。我无法从头开始编写代码。
您可以查看我的论坛
https://pvpfarm.com

我的首要任务始终是使用 CSS 进行编辑。这是我的第一个 JS 代码。

我认为你想要这样的东西:

  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>
  1. 使用 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;
    }
}
1 个赞

感谢您的帮助。:pray:
我现在正在使用这些代码,它们可以正常工作。

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

很高兴它对你有用。是的,使用纯 JavaScript 也可以。不过,我强烈建议使用 Discourse API 和插件插槽来实现你的目标。这样更简洁,并且更能适应变化。:+1:

1 个赞

我的英语在很多科目上都不够好。
我不希望任何代码损害网站。
例如,我不希望这些 JS 代码减慢网站速度。(我希望如此 :grin:
感谢您的帮助 :heart:

我认为那不是你想要做的正确方法。

你想要做什么?

1 个赞

我将标签移到了主题标题的左侧。
这奏效了,但我别无选择。因为我不会用 CSS 写代码。
你可以访问我的网站。我在上面写了链接。

在我之前的帖子 #6 中,我给出了一个更简洁的方法。\n\n理想情况下,您会直接更新模板,但这并非最佳实践,因为它会导致维护和兼容性问题。

1 个赞

我已将您提供的代码上传到指定位置。但它现在没有按预期工作。

您提供的代码现在已在网站上生效。您想看看吗?

我明白了!

奇怪的是,“最新主题列表”模板在分类页面上不存在插件插槽。:thinking:

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

所以,是的,你说得对。不幸的是,我的代码不适用于该页面。

不过,它应该适用于 /latest。

我在本地 discourse 上看到的内容

2 个赞

如果我写代码,我会用 CSS 来写。
或者会有一个英雄来帮我。 :smiley: