zibll主题论坛mini模式添加标签-6ke论坛

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);

.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; 
}

function zib_bbs_get_posts_mini_list($class = 'ajax-item', $show_topping = false)
{
    $class = $class ? ' ' . $class : '';
    global $post;
    
    $term_links = zib_bbs_get_posts_tag_link($post->ID, 'liuke-biaoqian');
    
    $term_html = '';
    if ($term_links) {
        $term_html .= '<div class="tag-wrapper">';
        $term_html .= '<div class="tag-container">' . $term_links . '</div>';
        $term_html .= '</div>';
    }
    $title = zib_bbs_get_posts_lists_title('forum-title flex ac', 'text-ellipsis', $show_topping, true);
    $title = preg_replace('/(<a.*?class=".*?text-ellipsis.*?".*?>.*?<\/a>)/', '$1' . $term_html, $title, 1);
    // $title             = zib_bbs_get_posts_lists_title('forum-title flex ac', 'text-ellipsis', $show_topping, true);
    $author_id         = get_the_author_meta('ID');
    $display_name_link = zib_get_user_name($author_id);
    $avatar_html       = '<div class="mr20 forum-user">';
    $avatar_html .= zib_get_avatar_box($author_id, 'avatar-img forum-avatar');
    $avatar_html .= '<span class="show-sm ml6 flex ac" style="width: 90%;">' . $display_name_link . '</span>';
    $avatar_html .= '</div>';

    $info_top = '';
    $info_top .= $title;

    $last_reply       = get_post_meta($post->ID, 'last_reply', true);
    $get_the_time     = get_the_time('Y-m-d H:i:s');
    $get_the_time_ago = zib_get_time_ago($get_the_time);

    if ($last_reply) {
        $time = '<span class="icon-circle" title="最后回复：' . $last_reply . '">' . zib_get_time_ago($last_reply) . '回复</span>';
    } else {

        $time = '<span class="icon-circle" title="发布时间：' . $get_the_time . '">' . $get_the_time_ago . '发布</span>';
    }

    if ('publish' !== $post->post_status) {
        $icon_meta = zib_bbs_get_posts_more_dropdown($post->ID, 'pull-right mrn10', 'padding-10 opacity8');
    } else {
        $icon_meta = zib_bbs_get_posts_icon_metas();
    }

    $info_down = '<div class="flex ac jsb item-meta">';

    $info_down .= '<div class="meta-left em09-sm flex">';
    $info_down .= '<span class="hide-sm">' . $display_name_link . '</span>';
    $info_down .= $time;
    $info_down .= '</div>';

    $info_down .= '<div class="meta-right">' . $icon_meta . '</div>';
    $info_down .= '</div>';

    $info_html = '<div class="entry-info">';
    $info_html .= $info_top;
    $info_html .= $info_down;
    $info_html .= '</div>';

    $html = '<posts class="forum-posts mini' . $class . '">';
    $html .= $avatar_html;
    $html .= $info_html;

    $html .= '</posts>';

    return $html;
}