子比主题美化 – 论坛Mini模式标题自动添加标签教程详解

投放路径：网站后台->Zibll主题设置->全局&功能->自定义代码->自定义CSS样式

.tag-wrapper {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.3s ease;
}
.tag-container {
    display: inline-flex;
    transition: transform 0.3s ease;
}
a.liuke-biaoqian.tag-link {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 6px;
    text-decoration: none;
    margin-left: 5px;
    display: inline-block;
    transition: all 0.3s ease;
    font-weight: 500;
    line-height: 20px;
    border: none;
    outline: none !important;
    opacity: 1;
    visibility: visible;
}
@media (hover: hover) {
    a.liuke-biaoqian.tag-link:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}
a.liuke-biaoqian.tag-link i {
    margin-right: 3px;
}
@media (max-width: 768px) {
    a.liuke-biaoqian.tag-link {
        font-size: 9px;
        padding: 0 4px;
        margin-left: 4px;
    }
}
.forum-title {
    position: relative;
    padding-right: 80px; 
}

投放路径：网站后台->Zibll主题设置->全局&功能->自定义代码->自定义javascript代码

const tagColors = [
  { bg: '#e6a23c', textColor: '#ffffff' },
  { bg: '#6ecc71', textColor: '#ffffff' },
  { bg: '#e74f5e', textColor: '#ffffff' },
  { bg: '#ae5ac6', textColor: '#ffffff' },
  { bg: '#177ddc', textColor: '#ffffff' },
  { bg: '#686465', textColor: '#ffffff' },
  { bg: '#a1624f', textColor: '#ffffff' },
  { bg: '#c01d2f', textColor: '#ffffff' },
  { bg: '#333147', textColor: '#ffffff' },
  { bg: '#903539', textColor: '#ffffff' },
  { bg: '#ff4500', textColor: '#ffffff' },
  { bg: '#ff8c00', textColor: '#ffffff' },
  { bg: '#ffd700', textColor: '#ffffff' },
  { bg: '#90ee90', textColor: '#ffffff' },
  { bg: '#00ced1', textColor: '#ffffff' },
  { bg: '#1e90ff', textColor: '#ffffff' },
  { bg: '#c71585', textColor: '#ffffff' },
  { bg: '#00bfff', textColor: '#ffffff' },
  { bg: '#00ff7f', textColor: '#ffffff' },
  { bg: '#ff1493', textColor: '#ffffff' }
];

let tagsInitialized = false;

function applyRandomColor(tag) {
    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.style.setProperty('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.1)', '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);