子比主题美化 – 论坛Mini模式标题自动添加标签教程详解kobai1个月前更新关注私信0320 代码介绍 学习如何在子比主题中利用美化功能,轻松实现论坛Mini模式下标题自动获取并显示标签,像子比论坛板块Mini模式时发布的帖子让人难以琢磨帖子到底属于什么类型。所以给发布的帖子添加自动获取标签显示这样能更直观的让用户能查看出帖子属于什么类型,是否是自己关注的,有助于提升用户体验与论坛美观度,详细步骤教程等你来探索。 效果预览 说明 默认电脑版显示三个标签,如果有多个隐藏,鼠标放到标签抽屉效果拉出全部展示 手机版默认显示两个 现在是mini帖子模式才会显示,如果你不是mini模式自己添加 可以自行修改JS、CSS来适配自己想要的动画和样式 随机标签颜色,每次加载都不同 搬运请备注原文链接 来源:详情 代码部署 以下提供的CSS和JS,有需要可以自行编辑。自己放到喜欢的位置。 posts.phpCSSJS 此处内容已隐藏,请评论后刷新页面查看. 投放路径:网站后台->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); © 版权声明 版权声明 1 本网站名称:星空知 2 本站永久网址:https://www.xkzhi.cn/ 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ1397403557进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报 6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 THE END子比教程技术教程子比美化技术教程# WP# 子比# 美化# Html# PHP# wordpress# WordPress美化 喜欢就支持一下吧点赞0赞赏 分享QQ空间微博QQ好友海报分享复制链接收藏