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

说明

像我这种站点，首页没有板块很人让难以琢磨帖子属于什么类型。所以给首页帖子添加标签显示让人能看出属于什么类型的是否自己关注的。

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

演示

教程

以下是我提供的 css 和 js，有需要可以自行编辑。自己放到喜欢的位置，然后在 全局&功能-自定义代码 添加 JS 和 CSS 路径

JS

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

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

找到 /wp-content/themes/zibll/inc/functions/bbs/inc/posts.php 搜索 zib_bbs_get_posts_mini_list  整个替换

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