Здравствуйте,
Как это исправить? Пожалуйста, помогите
<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
01.Май.2024 12:49:58
2
Почему вы делаете это с помощью JS, вместо применения CSS-стилей?
Теги не были расположены так, как я хотел, с помощью CSS
Firepup650
01.Май.2024 14:00:38
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;
}
}
Спасибо за вашу помощь.
<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>
Рад, что у вас получилось. Да, использование чистого JavaScript может сработать. Однако я настоятельно рекомендую использовать API Discourse и плагин-аутлет для достижения вашей цели. Это чище и более устойчиво к изменениям.
Моего знания английского не хватает во многих темах.
pfaffman
01.Май.2024 15:22:46
10
По-моему, это не лучший способ сделать то, что вы задумали.
Что именно вы пытаетесь сделать?
Я переместил теги влево от заголовка темы.
В моём предыдущем посте #6 я предложил вам более чистый способ сделать это.
В идеале вы должны обновлять шаблон напрямую, но это не лучшая практика, так как это приведёт к проблемам с поддержкой и совместимостью.
Я загрузил предоставленные вами коды в нужные места, но они не работают так, как сейчас.
Коды, которые вы предоставили, теперь активны на сайте. Хотите взглянуть?
Я вижу проблему!
Странно; на шаблоне «список последних тем» на странице категории нет плагина.
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/latest-topic-list-item.hbs#L13
Так что да, вы правы. К сожалению, мой код не работает на этой странице.
Однако он должен работать на /latest.
что я вижу в своём локальном Discourse
Если я когда-нибудь буду писать код, то только на CSS.
).
