源码介绍

子比论坛Mini模式标题自动获取标签功能分享

在子比论坛的Mini模式下，我们实现了一个自动获取并显示帖子标签的功能。通过为帖子添加标签，用户能够更直观地了解帖子的相关内容，从而提升点击率和浏览量。此外，这一功能还增强了用户体验，使论坛界面更加美观。

功能亮点：

标签显示优化：
- 电脑版：默认显示三个标签，超过三个时隐藏，鼠标悬停时可拉出全部标签。
- 手机版：默认显示两个标签。
适配性：
- 该功能仅在Mini帖子模式下生效。若您使用的是其他模式，请自行添加相关代码。
自定义选项：
- 您可以根据需求修改JavaScript和CSS，以实现您想要的动画效果和样式。
随机标签颜色：
- 每次页面加载时，标签颜色都会随机变化，为论坛增添一抹动态色彩。

如何使用：

确保您的论坛处于Mini模式。
根据需要调整JavaScript和CSS代码。
自行测试效果，确保功能正常运行。
使用教程

1.文件路径： /wp-content/themes/zibll/inc/functions/bbs/inc/posts.php

搜索 $title = zib_bbs_get_posts_lists_title('forum-title flex ac', 'text-ellipsis', $show_topping, true); 替换为下方代码。

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

2.CSS

投放路径：网站后台->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;

}
3.JS

投放路径：网站后台->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);

子比美化论坛Mini模式添加标签教程

源码介绍

评论 (0)