子比主题 – 帖子角标与标签修改美化版
这是一款子比主题论坛，是论坛，不是文章，论坛的一款左上角角标和右边标签修改美化版，很多人想要一种简约的，今天的这款美化也是算挺简约好看，喜欢的自行部署吧！首先定位：子比主题–>>社区&论坛–>>首页设置–>>综合–>>我们将列表样式改成简约，别忘了~
然后接下来就可以部署我们的代码，一共三个代码，话不多说直接开始！
posts.php文件
定位：/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>';
}
$plate_id = zib_bbs_get_plate_id($post->ID);
$plate_name = get_the_title($plate_id);
$plate_link = get_permalink($plate_id);
$plate_badge = '<a href="' . esc_url($plate_link) . '" class="plate-badge">' .
'<i class="fa fa-comments-o" aria-hidden="true"></i> ' .
'<span class="plate-name">' . esc_html($plate_name) . '</span>' .
'</a>';
$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 .= $plate_badge;
$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;
}
//标签CSS代码
将下面的代码放到子比主题–>>自定义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;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
a.liuke-biaoqian.tag-link {
font-size: 10px;
padding: 1px 5px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
font-weight: 500;
line-height: 20px;
border: none;
outline: none !important;
opacity: 1;
visibility: visible;
margin: 0;
border-radius: 0;
}
a.liuke-biaoqian.tag-link:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
/*6ke论坛 https://6.ke*/
a.liuke-biaoqian.tag-link:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
@media (hover: hover) {
.tag-container:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
a.liuke-biaoqian.tag-link:hover {
opacity: 0.8;
}
}
a.liuke-biaoqian.tag-link i {
margin-right: 3px;
}
@media (max-width: 768px) {
a.liuke-biaoqian.tag-link {
font-size: 9px;
padding: 0 4px;
}
}
.forum-title {
position: relative;
padding-right: 80px;
}
.forum-title {
position: relative;
padding-right: 80px;
}
.forum-posts {
position: relative;
}
.plate-badge {
position: absolute;
top: 0;
left: 0;
background-color: #007bff;
color: white !important;
padding: 2px 5px;
font-size: 12px;
line-height: 1.2;
border-radius: 8px 0 8px 0;
display: flex;
align-items: center;
transition: all 0.3s ease;
overflow: hidden;
}
.plate-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.3);
transition: all 0.3s ease;
}
.plate-badge:hover {
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
.plate-badge:hover::before {
left: 100%;
}
.plate-icon {
display: inline-flex;
align-items: center;
margin-right: 3px;
transition: transform 0.3s ease;
}
.plate-badge:hover .plate-icon {
transform: scale(1.1);
}
.plate-icon i {
font-size: 12px;
transition: color 0.3s ease;
}
.plate-name {
display: inline-block;
vertical-align: middle;
transition: color 0.3s ease;
}
.plate-badge:hover .plate-name,
.plate-badge:hover .plate-icon i {
color: #f0f0f0;
}
.forum-posts.mini {
padding-top: 20px;
}
@media (max-width: 767px) {
.forum-posts.mini {
padding-top: 20px;
}
}
/*帖子左上角标识*/
/*帖子标签*/
/* 引入现代字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
.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-family: 'Roboto', sans-serif; /* 使用Roboto字体 */
font-size: 12px; /* 调整字体大小 */
padding: 2px 8px; /* 增加内边距 */
border-radius: 8px; /* 圆角边框 */
text-decoration: none;
margin-left: 6px; /* 增加外边距 */
display: inline-block;
transition: all 0.3s ease;
font-weight: 500;
line-height: 1.5; /* 调整行高 */
border: none;
outline: none !important;
opacity: 1;
visibility: visible;
background: linear-gradient(135deg, #6a82fb, #fc5c7d); /* 渐变背景色 */
color: #fff; /* 字体颜色 */
}
a.liuke-biaoqian.tag-link:hover {
transform: scale(1.1); /* 鼠标悬停时放大 */
}
a.liuke-biaoqian.tag-link i {
margin-right: 3px;
}
@media (max-width: 768px) {
a.liuke-biaoqian.tag-link {
font-size: 10px;
padding: 1px 4px;
margin-left: 4px;
}
}
/*帖子标签*/
/* 新增高对比度板块颜色样式 */
.plate-badge.plate-color-0 { background: linear-gradient(135deg, #6D8EFF 0%, #A6C1FF 100%) !important; } /* 浅蓝渐变 */
.plate-badge.plate-color-1 { background: linear-gradient(135deg, #FF7E9F 0%, #FFB3C1 100%) !important; } /* 浅粉渐变 */
.plate-badge.plate-color-2 {background: linear-gradient(135deg, #0047AB 0%, #6B8CFF 100%) !important; } /* 深海钴蓝渐变（科技沉浸）*/
.plate-badge.plate-color-3 {background: linear-gradient(135deg, #00C9A7 0%, #70E0D6 100%) !important; }/*松石绿*/
.plate-badge.plate-color-10 { background: linear-gradient(135deg, #FFB347 0%, #FFD89C 100%) !important; } /* 浅橙渐变 */
.plate-badge.plate-color-5 { background: linear-gradient(135deg, #66C2FF 0%, #A3D8FF 100%) !important; } /* 天蓝渐变115 */
.plate-badge.plate-color-6 { background: linear-gradient(135deg, #7ED957 0%, #B4F0A7 100%) !important; } /* 苹果绿渐变 */
.plate-badge.plate-color-7 { background: linear-gradient(135deg, #FF6B6B 0%, #FFA1A1 100%) !important; } /* 珊瑚红渐变*/
.plate-badge.plate-color-8 { background: linear-gradient(135deg, #FF9F4D 0%, #FFC79E 100%) !important; } /* 蜜桃橙渐变 */
.plate-badge.plate-color-9 { background: linear-gradient(135deg, #C77DFF 0%, #E5C2FF 100%) !important; } /* 浅紫渐变*/
.plate-badge.plate-color-4 { background: linear-gradient(135deg, #FF5E84 0%, #FFB9C9 100%) !important; }/* 草莓粉 uc*/
.plate-badge.plate-color-11 { background: linear-gradient(135deg, #FFD74D 0%, #FFE9A3 100%) !important; } /* 浅金渐变 */
.plate-badge.plate-color-12 { background: linear-gradient(135deg, #C445F0 0%, #FF8DF5 100%) !important; } /* 霓虹紫渐变 */
.plate-badge.plate-color-13 { background: linear-gradient(135deg, #FF7F32 0%, #FFC470 100%) !important; } /* 活力橙渐变*/
.plate-badge.plate-color-14 { background: linear-gradient(135deg, #00E0D7 0%, #A4FFE8 100%) !important; } /* 荧光青渐变 */JS代码
将下面的代码放到子比主题–>>自定义JS样式即可！
const tagColors = [
{ bg: 'linear-gradient(135deg, #6a82fb, #fc5c7d)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #ff7e5f, #feb47b)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #23a6d5, #23d5ab)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #ff9966, #ff5e62)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #a1c4fd, #c2e9fb)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #ff5f6d, #ffc371)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #0093E9, #80D0C7)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #ff99cc, #b366cc)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #6dd5ed, #2193b0)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #f6d365, #fda085)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #74ebd5, #9face6)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #f093fb, #f5576c)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #a18cd1, #fbc2eb)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #e0c3fc, #8ec5fc)', textColor: '#ffffff' },
{ bg: 'linear-gradient(135deg, #ff9a9e, #fad0c4)', textColor: '#ffffff' }
];
let tagsInitialized = false;
function applyRandomColor(tag) {
if (tag.closest('.plate-badge')) return;
if (tag.dataset.colorApplied) return;
const randomColor = tagColors;
tag.style.setProperty('background', randomColor.bg, 'important');
tag.style.setProperty('color', randomColor.textColor, '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]