源码介绍
子比论坛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);
评论 (0)