·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室📱AI智能体
返回列表 发布新帖

修改dz社区首页板块以tab标题样式展示 New

86 3
发表于 昨天 14:16 | 查看全部 阅读模式

马上注册,免费下载更多dz插件网资源。

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

×
这是几天前折腾出来的,分享一下。

默认文件下,多少年了,官方一直以展开整个板块为默认方式。有时总感觉有点占用页面空间,特别是板块多的时候。

下面将分享由 Trae 解决的板块展示问题。

- 1.创建了一个可水平滚动的标题栏,所有分区标题都集中在一行显示;
- 2.实现了鼠标划动悬停时切换显示对应分区内容的功能;
- 3.添加了点击标题跳转到对应分区页面的链接功能;
- 4.修复了页面滚动、间距累积和底部间距过大等布局问题;
- 5.确保了右侧边栏的正常显示和整体页面布局的稳定性。

怎么操作呢。
打开社区首页文件,查到:

    <div class="bm bmw {if $cat['forumcolumns']} flg{/if} cl">



默认文件约344行,找到它上面的这二行代码:

    <!--{loop $catlist $key $cat}-->                        <!--{hook/index_catlist $cat['fid']}-->



接着在<!--{loop $catlist $key $cat}-->上面添加以下代码:

    <!-- 添加可滚动的分类tab容器 --><style type="text/css">/* 分类标签容器 */.category-tabs-wrapper {    width: 100%;    overflow-x: auto;    overflow-y: hidden;    white-space: nowrap;    -webkit-overflow-scrolling: touch;    scroll-behavior: smooth;    margin: 10px 0;    padding: 5px 0;    position: relative;    clear: both;}/* 滚动条样式 */.category-tabs-wrapper::-webkit-scrollbar {    height: 6px;}.category-tabs-wrapper::-webkit-scrollbar-track {    background: #f1f1f1;    border-radius: 3px;}.category-tabs-wrapper::-webkit-scrollbar-thumb {    background: #888;    border-radius: 3px;}.category-tabs-wrapper::-webkit-scrollbar-thumb:hover {    background: #555;}/* 分类标签样式 */.category-tab {    display: inline-block;    padding: 8px 12px;    margin-right: 6px;    background: #f5f5f5;    border-radius: 3px;    cursor: pointer;    min-width: 80px;    text-align: center;    transition: all 0.2s ease;    box-sizing: border-box;}.category-tab:hover {    background: #e8e8e8;}.category-tab.active {    background: #0066cc;    color: white;}.category-tab a {    text-decoration: none;    font-weight: bold;    display: block;    font-size: 13px;}.category-tab.active a {    color: white;}/* 内容容器 - 调整底部间距 */.category-content-container {    position: relative;    margin: 15px 0 0 0; /* 只保留上边距,移除下边距 */    clear: both;    min-height: 200px; /* 减小最小高度 */    padding-bottom: 0; /* 确保没有底部内边距 */}/* 确保右侧边栏正常显示 */#sd {    float: right !important;    display: block !important;}/* 确保内容区域位置稳定 */.bm {    position: relative;    clear: both;    margin-bottom: 0 !important; /* 强制移除底部边距 */}#ct {    position: relative;    clear: both;}/* 修复底部间距问题的关键样式 */.category-content-container + * {    margin-top: 10px !important; /* 限制内容容器后的元素上边距 */}/* 移除可能的多余空元素 */.category-content-container .bm {    margin-bottom: 0 !important;}</style><!-- 分类标签容器 - 添加链接 --><div class="category-tabs-wrapper" id="category-tabs">    <!--{loop $catlist $key $cat}-->        <div class="category-tab" id="tab_$cat[fid]">            <!-- 添加真实链接,使用fid构建forumdisplay页面URL -->            <a href="forum.php?gid=$cat[fid]">$cat[name]</a>        </div>    <!--{/loop}--></div><!-- 固定的内容容器 --><div class="category-content-container" id="content-container">    <!-- 这里将动态加载对应的分区内容 --></div><script type="text/javascript">jQuery(function($) {    // 计算每个tab的百分比宽度    var tabs = $('.category-tab');    var tabCount = tabs.length;    // 为每个tab设置宽度    tabs.each(function() {        var percentWidth = Math.min(20, Math.max(10, 80 / tabCount));        $(this).css('width', percentWidth + '%');    });    // 设置第一个tab为激活状态    tabs.first().addClass('active');    // 获取所有分区内容元素    var categoryContents = $('div[id^="category_"]');    // 保存原始分区内容到变量中,然后从DOM中移除    var contentMap = {};    categoryContents.each(function() {        var id = $(this).attr('id');        var fid = id.replace('category_', '');        contentMap[fid] = $(this).html();        $(this).remove(); // 从DOM中移除原始内容    });    // 初始显示第一个分区内容    if (tabs.length > 0) {        var firstTabId = tabs.first().attr('id');        var firstFid = firstTabId.replace('tab_', '');        if (contentMap[firstFid]) {            $('#content-container').html(contentMap[firstFid]);            // 移除内容中可能导致间距过大的元素            $('#content-container .bm').css('margin-bottom', '0');        }    }    // 添加触摸滑动支持    var isScrolling = false;    var startX, endX;    $('#category-tabs').on('touchstart', function(e) {        startX = e.originalEvent.touches[0].clientX;        isScrolling = true;    });    $('#category-tabs').on('touchend', function(e) {        endX = e.originalEvent.changedTouches[0].clientX;        var diff = startX - endX;        if (Math.abs(diff) > 50) {            $(this).scrollLeft($(this).scrollLeft() + diff);        }        setTimeout(function() { isScrolling = false; }, 100);    });    // 鼠标悬停时切换分区内容 - 注意不阻止点击事件    tabs.hover(function() {        if (isScrolling) return;        // 更新激活状态        tabs.removeClass('active');        $(this).addClass('active');        // 获取对应的分区ID        var tabId = $(this).attr('id');        var fid = tabId.replace('tab_', '');        // 动态加载对应的分区内容到固定容器中        if (contentMap[fid]) {            $('#content-container').html(contentMap[fid]);            // 移除内容中可能导致间距过大的元素            $('#content-container .bm').css('margin-bottom', '0');        }    });    // 为链接添加单独的点击处理,确保正常跳转    $('.category-tab a').on('click', function(e) {        // 这里不需要阻止默认行为,允许链接正常跳转        // 用户点击时会跳转到forumdisplay页面    });    // 添加键盘左右键支持    $(document).keydown(function(e) {        if (e.keyCode == 37) {            $('#category-tabs').scrollLeft($('#category-tabs').scrollLeft() - 200);        } else if (e.keyCode == 39) {            $('#category-tabs').scrollLeft($('#category-tabs').scrollLeft() + 200);        }    });});</script>



问题解决,当然,细节上,可能还需你自己调节,和美化一下,以适合你网站的风格。
我要说一句 收起回复
一花一世界,一叶一追寻。一曲一场叹,一生为一人。

评论3

IT618发布Lv.8 发表于 昨天 14:17 | 查看全部
以上是在已经修改的一级分类下的板块样式的基础上,修改而来。由 trae AI提供的原始数据。
至于,没有前面工作,没测试过。

重点是,在后台/社区,一级板块下的横排数目。请根据网站需求,应对更改和使用。
上面方法真的非常简单,添加的位置就一个地方,一步到位,不用修改其它。但是要隐藏原来标题栏代码,即 隐藏或删除标题所在的diy标签以内的所有代码。


另外,便于日后管理,请驳离样式代码到目前使用的模板样式文件中,其它放到社区首页文件里,即上面所说的文件位置里。
并做好注释,便于日后程序升级时,方便查找,复制到升级的文件中。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

IT618发布Lv.8 发表于 昨天 14:18 | 查看全部
注意,如果操作前,开启了社区首页边栏,并且,板块下,还有DIY模块。在板块效果出现后,可能右边栏跑到下面。
并且无法移动,这时就在右边重新DIY模块,或添加代码,再删除以前的边栏板块。不然,模块会重复。
这些将根据你的模板现状来操作,和调整。

所以,在决定操作前,要考虑好,整个首页是否需要开启边栏,以免增加工作量。
至于原因,不详,可能DIY模块代码放的位置不对,也懒得去找了。只要板块效果达到,就可以了。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

TyCodingLv.8 发表于 昨天 14:19 | 查看全部
下面是效果图,不包括下面的板块信息。只是红框里的标题优化。

修改dz社区首页板块以tab标题样式展示
New
 dz社区模板,dz论坛底部修改



板块信息这块,更改的地方不是一个,所以,有需要的,再说了。因为它是在模板基础上,进行的,还涉及到其它代码,样式。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

最新热评 加载中...
AI智能体
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:216.73.216.11, 36.158.231.68,GMT+8, 2025-10-15 05:56 , Processed in 1.115432 second(s), 85 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表