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

代码介绍

学习如何在子比主题中利用美化功能,轻松实现论坛Mini模式下标题自动获取并显示标签,像子比论坛板块Mini模式时发布的帖子让人难以琢磨帖子到底属于什么类型。所以给发布的帖子添加自动获取标签显示这样能更直观的让用户能查看出帖子属于什么类型,是否是自己关注的,有助于提升用户体验与论坛美观度,详细步骤教程等你来探索。

效果预览

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

说明

  • 默认电脑版显示三个标签,如果有多个隐藏,鼠标放到标签抽屉效果拉出全部展示
  • 手机版默认显示两个
  • 现在是mini帖子模式才会显示,如果你不是mini模式自己添加
  • 可以自行修改JS、CSS来适配自己想要的动画和样式
  • 随机标签颜色,每次加载都不同
  • 搬运请备注原文链接
  • 来源:详情

代码部署

以下提供的CSS和JS,有需要可以自行编辑。自己放到喜欢的位置。

投放路径:网站后台->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);
© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容