Bonjour,
Comment pouvons-nous corriger cela s’il vous plaît aidez-moi
<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
Mai 1, 2024, 12:49
2
Pourquoi faites-vous cela avec JS au lieu d’appliquer des styles CSS ?
2 « J'aime »
Les balises n’étaient pas positionnées comme je le souhaitais avec CSS
Comment donc ? L’injection manuelle de styles devrait avoir le même résultat qu’un changement CSS.
Je ne suis pas un professionnel. Je ne peux faire que des modifications avec les codes que je trouve. Je ne peux pas écrire de code à partir de zéro.https://pvpfarm.com
Ma priorité est toujours de modifier avec du CSS. Mes premiers codes JS.
Je pense que vous voulez quelque chose comme ça :
Déplacez les balises à l’aide de la sortie 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>
Utilisez CSS pour masquer la balise d’origine et les styliser (vous devrez peut-être l’ajuster)
.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 « J'aime »
Merci pour votre aide.
<script>
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);
</script>
Je suis content que cela fonctionne pour vous. Oui, utiliser du JavaScript brut peut fonctionner. Cependant, je suggère fortement d’utiliser l’API Discourse et les points de sortie des plugins pour atteindre votre objectif. C’est plus propre et plus résistant aux changements.
1 « J'aime »
Mon anglais est insuffisant dans de nombreuses matières.
pfaffman
Mai 1, 2024, 3:22
10
Je pense que ce n’est pas une bonne façon de faire ce que vous essayez de faire.
Qu’essayez-vous de faire ?
1 « J'aime »
J’ai déplacé les balises à gauche du titre du sujet.
Dans mon précédent message #6 , je vous ai donné une manière plus propre de le faire.
Idéalement, vous voudriez mettre à jour le modèle directement, mais ce n’est pas une bonne pratique car cela entraînerait des problèmes de maintenance et de compatibilité.
1 « J'aime »
J’ai téléchargé les codes que vous m’avez donnés aux endroits requis. Mais cela n’a pas fonctionné comme ça fonctionne maintenant.
Les codes que vous m’avez donnés sont maintenant actifs sur le site. Voulez-vous jeter un coup d’œil ?
Je vois le problème !
C’est étrange ; il n’y a pas d’emplacement de plugin sur le modèle « liste des derniers sujets » sur la page de catégorie.
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/latest-topic-list-item.hbs#L13
Donc, oui, vous avez raison. Malheureusement, mon code ne fonctionne pas sur cette page.
Il devrait cependant fonctionner sur /latest.
ce que je vois sur mon discourse local
2 « J'aime »
Si jamais j’écris du code, ce sera avec CSS.
)
