Ich würde Ihnen dringend davon abraten, diesen Weg zu gehen. Es ist, als würde man ein Pflaster auf eine Nebenwirkung kleben, anstatt die eigentliche Ursache des Problems zu beheben. Sie werden damit weitere Probleme schaffen (wie Ihr letzter Thema wegen des obigen Codes).
Sie können Ihr JS etwas benutzerfreundlicher für Discourse gestalten (der beste Weg ist immer noch die Verwendung von Plugin-Outlets, wenn Sie können).
Hier ist ein Beispiel. Es verwendet die API bei Seitenwechsel, führt Code auf einer bestimmten Route aus und kopiert das HTML vor dem Link (damit Sie auf das Tag klicken können):
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;
}
}