🎅挂件馆🌟铭牌馆✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
👮曝光台📜淘帖🧩导读👛帮助💰️钱包💖关注切换到宽版
  • 首页Portal
  • 社区BBS
  • 圈子
  • 资源
  • 商城
  • 任务
  • 家园Space
  • 排行Ranklist
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    返回列表 发布新帖
    查看: 248|回复: 0

    [代码技巧] 子比主题 – 帖子角标与标签修改美化版

    [复制链接]
    飞流 00001
    起源之星
    任务·年会员
    累计签到LV.3
    摩羯座
    +1
    社区贡献
    346 220 24796
    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 165 颗
       贡献 : 24991 点
       金币 : 4 枚
    Icon在线时间 : 1974 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-9-14
    送礼物：3 个 收礼物：1 个
    FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-5 22:06:23 | 查看全部 |阅读模式 浙江金华

    交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    这是一款子比主题论坛，是论坛，不是文章，论坛的一款左上角角标和右边标签修改美化版，很多人想要一种简约的，今天的这款美化也是算挺简约好看，喜欢的自行部署吧！
    O1CN01OWtyBN1QbIqkBPLib_!!2210123621994.gif.webp
    首先定位：子比主题–>>社区&论坛–>>首页设置–>>综合–>>我们将列表样式改成简约，别忘了~
    然后接下来就可以部署我们的代码，一共三个代码，话不多说直接开始！
    posts.php文件
    定位：/zibll/inc/functions/bbs/inc/posts.php，我们打开这个文件之后，搜下面的函数代码！
    1. zib_bbs_get_posts_mini_list
    复制代码
    把上面的整个函数替换成下面的代码即可！
    1. //标签
    2. function zib_bbs_get_posts_mini_list($class = 'ajax-item', $show_topping = false)
    3. {
    4.     $class = $class ? ' ' . $class : '';
    5.     global $post;
    6.     $term_links = zib_bbs_get_posts_tag_link($post->ID, 'liuke-biaoqian');
    7.     $term_html = '';
    8.     if ($term_links) {
    9.         $term_html .= '<div class="tag-wrapper">';
    10.         $term_html .= '<div class="tag-container">' . $term_links . '</div>';
    11.         $term_html .= '</div>';
    12.     }
    13.     $plate_id = zib_bbs_get_plate_id($post->ID);
    14.     $plate_name = get_the_title($plate_id);
    15.     $plate_link = get_permalink($plate_id);
    16.     $plate_badge = '<a href="' . esc_url($plate_link) . '" class="plate-badge">' .
    17.                    '<i class="fa fa-comments-o" aria-hidden="true"></i> ' .
    18.                    '<span class="plate-name">' . esc_html($plate_name) . '</span>' .
    19.                    '</a>';
    20.     $title = zib_bbs_get_posts_lists_title('forum-title flex ac', 'text-ellipsis', $show_topping, true);
    21.     $title = preg_replace('/(<a.*?class=".*?text-ellipsis.*?".*?>.*?<\/a>)/', '$1' . $term_html, $title, 1);
    22.     // $title             = zib_bbs_get_posts_lists_title('forum-title flex ac', 'text-ellipsis', $show_topping, true);
    23.     $author_id         = get_the_author_meta('ID');
    24.     $display_name_link = zib_get_user_name($author_id);
    25.     $avatar_html       = '<div class="mr20 forum-user">';
    26.     $avatar_html .= zib_get_avatar_box($author_id, 'avatar-img forum-avatar');
    27.     $avatar_html .= '<span class="show-sm ml6 flex ac" style="width: 90%;">' . $display_name_link . '</span>';
    28.     $avatar_html .= '</div>';

    30.     $info_top = '';
    31.     $info_top .= $title;

    33.     $last_reply       = get_post_meta($post->ID, 'last_reply', true);
    34.     $get_the_time     = get_the_time('Y-m-d H:i:s');
    35.     $get_the_time_ago = zib_get_time_ago($get_the_time);

    37.     if ($last_reply) {
    38.         $time = '<span class="icon-circle" title="最后回复：' . $last_reply . '">' . zib_get_time_ago($last_reply) . '回复</span>';
    39.     } else {
    40.         $time = '<span class="icon-circle" title="发布时间：' . $get_the_time . '">' . $get_the_time_ago . '发布</span>';
    41.     }

    43.     if ('publish' !== $post->post_status) {
    44.         $icon_meta = zib_bbs_get_posts_more_dropdown($post->ID, 'pull-right mrn10', 'padding-10 opacity8');
    45.     } else {
    46.         $icon_meta = zib_bbs_get_posts_icon_metas();
    47.     }

    49.     $info_down = '<div class="flex ac jsb item-meta">';
    50.     $info_down .= '<div class="meta-left em09-sm flex">';
    51.     $info_down .= '<span class="hide-sm">' . $display_name_link . '</span>';
    52.     $info_down .= $time;
    53.     $info_down .= '</div>';
    54.     $info_down .= '<div class="meta-right">' . $icon_meta . '</div>';
    55.     $info_down .= '</div>';

    57.     $info_html = '<div class="entry-info">';
    58.     $info_html .= $plate_badge;
    59.     $info_html .= $info_top;
    60.     $info_html .= $info_down;
    61.     $info_html .= '</div>';

    63.     $html = '<posts class="forum-posts mini' . $class . '">';
    64.     $html .= $avatar_html;
    65.     $html .= $info_html;
    66.     $html .= '</posts>';

    68.     return $html;
    69. }
    70. //标签
    复制代码
    CSS代码
    将下面的代码放到子比主题–>>自定义CSS样式即可！
    1. /*帖子左上角标识*/
    2. .tag-wrapper {
    3.     position: absolute;
    4.     right: 0;
    5.     top: 50%;
    6.     transform: translateY(-50%);
    7.     overflow: hidden;
    8.     white-space: nowrap;
    9.     transition: width 0.3s ease;
    10. }
    11. .tag-container {
    12.     display: inline-flex;
    13.     transition: transform 0.3s ease;
    14.     border-radius: 6px;
    15.     overflow: hidden;
    16.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    17. }
    18. a.liuke-biaoqian.tag-link {
    19.     font-size: 10px;
    20.     padding: 1px 5px;
    21.     text-decoration: none;
    22.     display: inline-block;
    23.     transition: all 0.3s ease;
    24.     font-weight: 500;
    25.     line-height: 20px;
    26.     border: none;
    27.     outline: none !important;
    28.     opacity: 1;
    29.     visibility: visible;
    30.     margin: 0;
    31.     border-radius: 0;
    32. }
    33. a.liuke-biaoqian.tag-link:first-child {
    34.     border-top-left-radius: 6px;
    35.     border-bottom-left-radius: 6px;
    36. }
    37. /*6ke论坛 https://6.ke*/
    38. a.liuke-biaoqian.tag-link:last-child {
    39.     border-top-right-radius: 6px;
    40.     border-bottom-right-radius: 6px;
    41. }
    42. @media (hover: hover) {
    43.     .tag-container:hover {
    44.         box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    45.     }
    46.    
    47.     a.liuke-biaoqian.tag-link:hover {
    48.         opacity: 0.8;
    49.     }
    50. }

    52. a.liuke-biaoqian.tag-link i {
    53.     margin-right: 3px;
    54. }
    55. @media (max-width: 768px) {
    56.     a.liuke-biaoqian.tag-link {
    57.         font-size: 9px;
    58.         padding: 0 4px;
    59.     }
    60. }

    62. .forum-title {
    63.     position: relative;
    64.     padding-right: 80px;
    65. }
    66. .forum-title {
    67.     position: relative;
    68.     padding-right: 80px;
    69. }
    70. .forum-posts {
    71.     position: relative;
    72. }
    73. .plate-badge {
    74.     position: absolute;
    75.     top: 0;
    76.     left: 0;
    77.     background-color: #007bff;
    78.     color: white !important;
    79.     padding: 2px 5px;
    80.     font-size: 12px;
    81.     line-height: 1.2;
    82.     border-radius: 8px 0 8px 0;
    83.     display: flex;
    84.     align-items: center;
    85.     transition: all 0.3s ease;
    86.     overflow: hidden;
    87. }
    88. .plate-badge::before {
    89.     content: '';
    90.     position: absolute;
    91.     top: 0;
    92.     left: -100%;
    93.     width: 100%;
    94.     height: 100%;
    95.     background: rgba(255,255,255,0.3);
    96.     transition: all 0.3s ease;
    97. }
    98. .plate-badge:hover {
    99.     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    100.     transform: translateY(-2px);
    101. }
    102. .plate-badge:hover::before {
    103.     left: 100%;
    104. }
    105. .plate-icon {
    106.     display: inline-flex;
    107.     align-items: center;
    108.     margin-right: 3px;
    109.     transition: transform 0.3s ease;
    110. }
    111. .plate-badge:hover .plate-icon {
    112.     transform: scale(1.1);
    113. }
    114. .plate-icon i {
    115.     font-size: 12px;
    116.     transition: color 0.3s ease;
    117. }
    118. .plate-name {
    119.     display: inline-block;
    120.     vertical-align: middle;
    121.     transition: color 0.3s ease;
    122. }
    123. .plate-badge:hover .plate-name,
    124. .plate-badge:hover .plate-icon i {
    125.     color: #f0f0f0;
    126. }
    127. .forum-posts.mini {
    128.     padding-top: 20px;
    129. }
    130. @media (max-width: 767px) {
    131.     .forum-posts.mini {
    132.         padding-top: 20px;
    133.     }
    134. }
    135. /*帖子左上角标识*/

    137. /*帖子标签*/
    138. /* 引入现代字体 */
    139. @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

    141. .tag-wrapper {
    142.     position: absolute;
    143.     right: 0;
    144.     top: 50%;
    145.     transform: translateY(-50%);
    146.     overflow: hidden;
    147.     white-space: nowrap;
    148.     transition: width 0.3s ease;
    149. }

    151. .tag-container {
    152.     display: inline-flex;
    153.     transition: transform 0.3s ease;
    154. }

    156. a.liuke-biaoqian.tag-link {
    157.     font-family: 'Roboto', sans-serif; /* 使用Roboto字体 */
    158.     font-size: 12px; /* 调整字体大小 */
    159.     padding: 2px 8px; /* 增加内边距 */
    160.     border-radius: 8px; /* 圆角边框 */
    161.     text-decoration: none;
    162.     margin-left: 6px; /* 增加外边距 */
    163.     display: inline-block;
    164.     transition: all 0.3s ease;
    165.     font-weight: 500;
    166.     line-height: 1.5; /* 调整行高 */
    167.     border: none;
    168.     outline: none !important;
    169.     opacity: 1;
    170.     visibility: visible;
    171.     background: linear-gradient(135deg, #6a82fb, #fc5c7d); /* 渐变背景色 */
    172.     color: #fff; /* 字体颜色 */
    173. }

    175. a.liuke-biaoqian.tag-link:hover {
    176.     transform: scale(1.1); /* 鼠标悬停时放大 */
    177. }

    179. a.liuke-biaoqian.tag-link i {
    180.     margin-right: 3px;
    181. }

    183. @media (max-width: 768px) {
    184.     a.liuke-biaoqian.tag-link {
    185.         font-size: 10px;
    186.         padding: 1px 4px;
    187.         margin-left: 4px;
    188.     }
    189. }


    192. /*帖子标签*/

    194. /* 新增高对比度板块颜色样式 */
    195. .plate-badge.plate-color-0 { background: linear-gradient(135deg, #6D8EFF 0%, #A6C1FF 100%) !important; } /* 浅蓝渐变 */
    196. .plate-badge.plate-color-1 { background: linear-gradient(135deg, #FF7E9F 0%, #FFB3C1 100%) !important; } /* 浅粉渐变 */
    197. .plate-badge.plate-color-2 {  background: linear-gradient(135deg, #0047AB 0%, #6B8CFF 100%) !important; } /* 深海钴蓝渐变（科技沉浸）*/
    198. .plate-badge.plate-color-3 {  background: linear-gradient(135deg, #00C9A7 0%, #70E0D6 100%) !important; }/*  松石绿*/
    199. .plate-badge.plate-color-10 { background: linear-gradient(135deg, #FFB347 0%, #FFD89C 100%) !important; } /* 浅橙渐变 */
    200. .plate-badge.plate-color-5 { background: linear-gradient(135deg, #66C2FF 0%, #A3D8FF 100%) !important; } /* 天蓝渐变115 */
    201. .plate-badge.plate-color-6 { background: linear-gradient(135deg, #7ED957 0%, #B4F0A7 100%) !important; } /* 苹果绿渐变 */
    202. .plate-badge.plate-color-7 { background: linear-gradient(135deg, #FF6B6B 0%, #FFA1A1 100%) !important; } /* 珊瑚红渐变*/
    203. .plate-badge.plate-color-8 { background: linear-gradient(135deg, #FF9F4D 0%, #FFC79E 100%) !important; } /* 蜜桃橙渐变 */
    204. .plate-badge.plate-color-9 { background: linear-gradient(135deg, #C77DFF 0%, #E5C2FF 100%) !important; } /* 浅紫渐变*/
    205. .plate-badge.plate-color-4 { background: linear-gradient(135deg, #FF5E84 0%, #FFB9C9 100%) !important; }/* 草莓粉 uc*/
    206. .plate-badge.plate-color-11 { background: linear-gradient(135deg, #FFD74D 0%, #FFE9A3 100%) !important; } /* 浅金渐变 */
    207. .plate-badge.plate-color-12 { background: linear-gradient(135deg, #C445F0 0%, #FF8DF5 100%) !important; } /* 霓虹紫渐变 */
    208. .plate-badge.plate-color-13 { background: linear-gradient(135deg, #FF7F32 0%, #FFC470 100%) !important; } /* 活力橙渐变*/
    209. .plate-badge.plate-color-14 { background: linear-gradient(135deg, #00E0D7 0%, #A4FFE8 100%) !important; } /* 荧光青渐变 */
    复制代码
    JS代码
    将下面的代码放到子比主题–>>自定义JS样式即可！
    1. const tagColors = [
    2.    { bg: 'linear-gradient(135deg, #6a82fb, #fc5c7d)', textColor: '#ffffff' },
    3.     { bg: 'linear-gradient(135deg, #ff7e5f, #feb47b)', textColor: '#ffffff' },
    4.     { bg: 'linear-gradient(135deg, #23a6d5, #23d5ab)', textColor: '#ffffff' },
    5.     { bg: 'linear-gradient(135deg, #ff9966, #ff5e62)', textColor: '#ffffff' },
    6.     { bg: 'linear-gradient(135deg, #a1c4fd, #c2e9fb)', textColor: '#ffffff' },
    7.     { bg: 'linear-gradient(135deg, #ff5f6d, #ffc371)', textColor: '#ffffff' },
    8.     { bg: 'linear-gradient(135deg, #0093E9, #80D0C7)', textColor: '#ffffff' },
    9.     { bg: 'linear-gradient(135deg, #ff99cc, #b366cc)', textColor: '#ffffff' },
    10.     { bg: 'linear-gradient(135deg, #6dd5ed, #2193b0)', textColor: '#ffffff' },
    11.     { bg: 'linear-gradient(135deg, #f6d365, #fda085)', textColor: '#ffffff' },
    12.     { bg: 'linear-gradient(135deg, #74ebd5, #9face6)', textColor: '#ffffff' },
    13.     { bg: 'linear-gradient(135deg, #f093fb, #f5576c)', textColor: '#ffffff' },
    14.     { bg: 'linear-gradient(135deg, #a18cd1, #fbc2eb)', textColor: '#ffffff' },
    15.     { bg: 'linear-gradient(135deg, #e0c3fc, #8ec5fc)', textColor: '#ffffff' },
    16.     { bg: 'linear-gradient(135deg, #ff9a9e, #fad0c4)', textColor: '#ffffff' }
    17. ];

    19. let tagsInitialized = false;

    21. function applyRandomColor(tag) {
    22.    
    23.     if (tag.closest('.plate-badge')) return;
    24.    
    25.     if (tag.dataset.colorApplied) return;
    26.     const randomColor = tagColors[Math.floor(Math.random() * tagColors.length)];
    27.     tag.style.setProperty('background', randomColor.bg, 'important');
    28.     tag.style.setProperty('color', randomColor.textColor, 'important');
    29.     tag.dataset.colorApplied = 'true';
    30. }

    32. function setupTagDrawer() {
    33.     const tagWrappers = document.querySelectorAll('.tag-wrapper');
    34.     const isMobile = window.innerWidth <= 768;
    35.     const visibleTagCount = isMobile ? 2 : 3;

    37.     tagWrappers.forEach(wrapper => {
    38.         const container = wrapper.querySelector('.tag-container');
    39.         const tags = container.querySelectorAll('a.liuke-biaoqian.tag-link');
    40.         
    41.         if (!tagsInitialized) {
    42.             tags.forEach(applyRandomColor);
    43.         }
    44.         

    46.         setTimeout(() => {
    47.             const visibleTags = Array.from(tags).slice(0, visibleTagCount);
    48.             const initialWidth = visibleTags.reduce((sum, tag) => sum + tag.offsetWidth + 6, 0);
    49.             const fullWidth = Array.from(tags).reduce((sum, tag) => sum + tag.offsetWidth + 6, 0);
    50.             
    51.             wrapper.style.width = `${initialWidth}px`;
    52.             
    53.             wrapper.addEventListener('mouseenter', () => {
    54.                 wrapper.style.width = `${fullWidth}px`;
    55.             });

    57.             wrapper.addEventListener('mouseleave', () => {
    58.                 wrapper.style.width = `${initialWidth}px`;
    59.             });
    60.         }, 100);
    61.     });
    62.    
    63.     tagsInitialized = true;
    64. }

    66. function initializeTags() {
    67.     setTimeout(setupTagDrawer, 100);
    68. }

    70. function applyTagEffects() {
    71.     const tags = document.querySelectorAll('a.liuke-biaoqian.tag-link');
    72.     tags.forEach(applyRandomColor);
    73.     initializeTags();
    74. }
    75. document.addEventListener('DOMContentLoaded', function() {
    76.     applyTagEffects();
    77.     document.addEventListener('ajaxComplete', function(event) {
    78.         applyTagEffects();
    79.     });
    80.     const observer = new MutationObserver((mutations) => {
    81.         let tagsAdded = false;
    82.         mutations.forEach((mutation) => {
    83.             if (mutation.type === 'childList') {
    84.                 mutation.addedNodes.forEach((node) => {
    85.                     if (node.nodeType === Node.ELEMENT_NODE) {
    86.                         if (node.matches('a.liuke-biaoqian.tag-link')) {
    87.                             tagsAdded = true;
    88.                         } else if (node.querySelector('a.liuke-biaoqian.tag-link')) {
    89.                             tagsAdded = true;
    90.                         }
    91.                     }
    92.                 });
    93.             }
    94.         });
    95.         if (tagsAdded) {
    96.             applyTagEffects();
    97.         }
    98.     });
    99.     const config = { childList: true, subtree: true };
    100.     if (document.body) {
    101.         observer.observe(document.body, config);
    102.     } else {
    103.         console.warn('document.body is not available yet.');
    104.     }
    105. });
    106. window.addEventListener('load', function() {
    107.     setTimeout(setupTagDrawer, 100);
    108. });
    109. window.addEventListener('resize', setupTagDrawer);
    110. const style = document.createElement('style');
    111. style.textContent = `
    112.     a.liuke-biaoqian.tag-link {
    113.         transition: background 0.3s ease, color 0.3s ease;
    114.         opacity: 0;
    115.         animation: fadeIn 0.3s ease forwards;
    116.     }
    117.     @keyframes fadeIn {
    118.         to { opacity: 1; }
    119.     }
    120. `;
    121. document.head.appendChild(style);
    复制代码

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复 送礼

    使用道具 举报

    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    		07-23 18:52
    飞流：这论坛到底有没有资本给我投资一下啊！
    		07-20 22:07
    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    		01-24 12:40
    站内通告

    📢 六月份后均不在线，请悉知

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：1003810038钉推群：BAYR2383 站长QQ：3388700000

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索
    快速回复
    返回列表

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-9-14 10:50 , Processed in 0.058479 second(s), 65 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表