这是一款子比主题论坛，是论坛，不是文章，论坛的一款左上角角标和右边标签修改美化版，很多人想要一种简约的，今天的这款美化也是算挺简约好看，喜欢的自行部署吧！

代码部署

首先定位：子比主题–>>社区&论坛–>>首页设置–>>综合–>>我们将列表样式改成简约，别忘了~

然后接下来就可以部署我们的代码，一共三个代码，话不多说直接开始！

 

posts.php 代码一

CSS代码二

将下面的代码放到子比主题–>>自定义CSS样式即可！

JS代码三

将下面的代码放到子比主题–>>自定义JS样式即可！

const tagColors = [
   { bg: 'linear-gradient(135deg, #6a82fb, #fc5c7d)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #ff7e5f, #feb47b)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #23a6d5, #23d5ab)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #ff9966, #ff5e62)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #a1c4fd, #c2e9fb)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #ff5f6d, #ffc371)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #0093E9, #80D0C7)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #ff99cc, #b366cc)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #6dd5ed, #2193b0)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #f6d365, #fda085)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #74ebd5, #9face6)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #f093fb, #f5576c)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #a18cd1, #fbc2eb)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #e0c3fc, #8ec5fc)', textColor: '#ffffff' },
    { bg: 'linear-gradient(135deg, #ff9a9e, #fad0c4)', textColor: '#ffffff' }
];

let tagsInitialized = false;

function applyRandomColor(tag) {
    
    if (tag.closest('.plate-badge')) return;
    
    if (tag.dataset.colorApplied) return;
    const randomColor = tagColors[Math.floor(Math.random() * tagColors.length)];
    tag.style.setProperty('background', randomColor.bg, 'important');
    tag.style.setProperty('color', randomColor.textColor, 'important');
    tag.dataset.colorApplied = 'true';
}

function setupTagDrawer() {
    const tagWrappers = document.querySelectorAll('.tag-wrapper');
    const isMobile = window.innerWidth <= 768;
    const visibleTagCount = isMobile ? 2 : 3;

    tagWrappers.forEach(wrapper => {
        const container = wrapper.querySelector('.tag-container');
        const tags = container.querySelectorAll('a.liuke-biaoqian.tag-link');
        
        if (!tagsInitialized) {
            tags.forEach(applyRandomColor); 
        }
        

        setTimeout(() => {
            const visibleTags = Array.from(tags).slice(0, visibleTagCount);
            const initialWidth = visibleTags.reduce((sum, tag) => sum + tag.offsetWidth + 6, 0);
            const fullWidth = Array.from(tags).reduce((sum, tag) => sum + tag.offsetWidth + 6, 0);
            
            wrapper.style.width = `${initialWidth}px`;
            
            wrapper.addEventListener('mouseenter', () => {
                wrapper.style.width = `${fullWidth}px`;
            });

            wrapper.addEventListener('mouseleave', () => {
                wrapper.style.width = `${initialWidth}px`;
            });
        }, 100);
    });
    
    tagsInitialized = true;
}

function initializeTags() {
    setTimeout(setupTagDrawer, 100);
}

function applyTagEffects() {
    const tags = document.querySelectorAll('a.liuke-biaoqian.tag-link');
    tags.forEach(applyRandomColor);
    initializeTags();
}
document.addEventListener('DOMContentLoaded', function() {
    applyTagEffects();
    document.addEventListener('ajaxComplete', function(event) {
        applyTagEffects();
    });
    const observer = new MutationObserver((mutations) => {
        let tagsAdded = false;
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach((node) => {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        if (node.matches('a.liuke-biaoqian.tag-link')) {
                            tagsAdded = true;
                        } else if (node.querySelector('a.liuke-biaoqian.tag-link')) {
                            tagsAdded = true;
                        }
                    }
                });
            }
        });
        if (tagsAdded) {
            applyTagEffects();
        }
    });
    const config = { childList: true, subtree: true };
    if (document.body) {
        observer.observe(document.body, config);
    } else {
        console.warn('document.body is not available yet.');
    }
});
window.addEventListener('load', function() {
    setTimeout(setupTagDrawer, 100);
});
window.addEventListener('resize', setupTagDrawer);
const style = document.createElement('style');
style.textContent = `
    a.liuke-biaoqian.tag-link {
        transition: background 0.3s ease, color 0.3s ease;
        opacity: 0;
        animation: fadeIn 0.3s ease forwards;
    }
    @keyframes fadeIn {
        to { opacity: 1; }
    }
`;
document.head.appendChild(style);