你好，
请问我们该如何解决这个问题？请帮助我 
<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)
2
你为什么用 JS 而不是应用 CSS 样式来做这件事？
2 个赞
Firepup650
(Firepup Sixfifty)
4
怎么会这样？手动注入样式应该与 CSS 更改产生相同的结果。
我不是专业人士。我只能用我找到的代码进行编辑。我无法从头开始编写代码。
您可以查看我的论坛
https://pvpfarm.com
我的首要任务始终是使用 CSS 进行编辑。这是我的第一个 JS 代码。
我认为你想要这样的东西：
- 使用
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>
- 使用 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 个赞
感谢您的帮助。
我现在正在使用这些代码，它们可以正常工作。
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 个赞
我的英语在很多科目上都不够好。
我不希望任何代码损害网站。
例如，我不希望这些 JS 代码减慢网站速度。（我希望如此 
）
感谢您的帮助 
我将标签移到了主题标题的左侧。
这奏效了，但我别无选择。因为我不会用 CSS 写代码。
你可以访问我的网站。我在上面写了链接。
在我之前的帖子 #6 中，我给出了一个更简洁的方法。\n\n理想情况下，您会直接更新模板，但这并非最佳实践，因为它会导致维护和兼容性问题。
1 个赞
我已将您提供的代码上传到指定位置。但它现在没有按预期工作。
您提供的代码现在已在网站上生效。您想看看吗？
如果我写代码，我会用 CSS 来写。
或者会有一个英雄来帮我。 
