我强烈建议你不要走那条路。这就像是给副作用贴创可贴,而不是解决问题的根源。你会因此制造更多问题(就像你最近的 topic 是由上述代码引起的)。
你可以让你的 JS 更符合 discourse 的习惯(最好的方法还是尽可能使用插件插槽)。
这里有一个例子。它在页面更改时使用 API,在特定路由上运行代码,并复制链接之前的 HTML(这样你就可以点击标签了):
JS
<script type="text/discourse-plugin" version="0.8">
const { next } = require("@ember/runloop");
function moveTags() {
const mainLinks = document.querySelectorAll(".main-link:not(.tags-moved)");
mainLinks.forEach((mainLink) => {
const discourseTags = mainLink.querySelector(".discourse-tags");
const titleElement = mainLink.querySelector("a[data-topic-id]");
if (discourseTags && titleElement) {
titleElement.insertAdjacentHTML("beforebegin", discourseTags.outerHTML);
mainLink.classList.add('tags-moved');
}
});
}
api.registerModelTransformer("topic", async (topics) => {
next(() => {
moveTags();
})
});
api.onPageChange((url) => {
if (url.startsWith("/categories")) {
moveTags();
}
});
</script>
CSS
.top-row,
.link-top-line {
.discourse-tag {
font-size: var(--font-down-2) !important;
padding: 2px 8px;
margin: 2px 5px 2px -6px;
border-radius: 10px;
border: 1px solid #444460;
background-color: #1f1f33;
}
.discourse-tag::after {
content: '' !important;
margin-left: 0 !important;
}
}
.bottom-row,
.link-bottom-line {
.discourse-tags {
display: none;
}
}