Discuz! 修改 X5 模板的主题页面图片横排显示

boonkiong

它最多一共能同时显示三排九张，每一排是三张，如下图：

Discuz! 修改 X5 模板的主题页面图片横排显示

感觉有点难看，现在把它改成只显示一排五张，如下图：

Discuz! 修改 X5 模板的主题页面图片横排显示

1、首先打开 template\discuzx5\forum\forumdisplay_list_box.php，在第二行的

1. $list_attach_num = 9;

复制代码

把 9 改成 5 就是一排，如果改成 10 就是两排，以此推类；

2、接着打开 template\discuzx5\common\extend_common.css，查找(大概在819行)：

1. .forumportal_listc li .kmimg_box {display: grid;gap: 4px;width: 392px;grid-template-rows: repeat(auto-fill, 128px);grid-template-columns: repeat(3, 128px);grid-auto-rows: 128px;margin:5px 0 15px 0px;font-size:0;overflow:hidden;position:relative}
   
2. .forumportal_listc li .kmimg_box .kmshowimg {position:relative;width:100%;height:100%;box-sizing:border-box;background:var(--dz-bgb);overflow:hidden;border-radius:var(--dz-radius-s)}
   
3. .forumportal_listc li .kmimg_box .kmshowimg:nth-child(3n) {margin-right:0}
   
4. .forumportal_listc li .kmimg_box .kmshowimg img {position:absolute;width:100%;height:100%;overflow:hidden;object-fit:cover;transition:all .4s}
   
5. .forumportal_listc li .kmimg_box .kmshowimg:hover img {transform:scale(1.1)}
   
6. .forumportal_listc li .kmimg_box .kmshowimg.kmmunbg:last-child:before {position:absolute;z-index:10;content:"";top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:var(--dz-radius-s)}
   
7. .forumportal_listc li .kmimg_box .kmshowimg .kmmun {position:absolute;z-index:20;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-style:normal;font-family:'hl-efont';font-weight:500;font-size:28px;color:var(--dz-ff)}
   
8. .forumportal_listc li .km_4img .kmshowimg {width:100%;padding-bottom:47%;margin-top:1.6%;margin-right:1.6%;box-sizing:border-box;background:var(--dz-bgb);overflow:hidden;border-radius:var(--dz-radius-s)}
   
9. .forumportal_listc li .km_4img .kmshowimg:nth-child(2n) {margin-right:0}
   
10. .forumportal_listc li .km_4img .kmshowimg:nth-child(3n) {margin-right:1.6%}

复制代码

替换为：

1. /* --- 改为每排 5 列 --- */
   
2. .forumportal_listc li .kmimg_box {
   
3.     display: grid;
   
4.     gap: 6px; /* 稍微加大一点图与图之间的间距 */
   
5.     width: 100%;
   
6.     max-width: 100%;
   
7.     grid-template-columns: repeat(5, 1fr); /* 核心：改为 5 列平分空间 */
   
8.     grid-auto-rows: 110px; /* 每张图的高度（5张图每排，这个高度比较适中，可按需改成 100px-130px） */
   
9.     margin: 5px 0 15px 0px;
   
10.     font-size: 0;
    
11.     overflow: hidden;
    
12.     position: relative;
    
13. }
    
14. 
    
15. .forumportal_listc li .kmimg_box .kmshowimg {position:relative;width:100%;height:100%;box-sizing:border-box;background:var(--dz-bgb);overflow:hidden;border-radius:var(--dz-radius-s)}
    
16. 
    
17. /* 每排第 5 个元素清除右边距（因为改成5列了，把原本的 9n 改成 5n） */
    
18. .forumportal_listc li .kmimg_box .kmshowimg:nth-child(5n) {margin-right:0}
    
19. 
    
20. .forumportal_listc li .kmimg_box .kmshowimg img {position:absolute;width:100%;height:100%;overflow:hidden;object-fit:cover;transition:all .4s}
    
21. .forumportal_listc li .kmimg_box .kmshowimg:hover img {transform:scale(1.1)}
    
22. .forumportal_listc li .kmimg_box .kmshowimg.kmmunbg:last-child:before {position:absolute;z-index:10;content:"";top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:var(--dz-radius-s)}
    
23. .forumportal_listc li .kmimg_box .kmshowimg .kmmun {position:absolute;z-index:20;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-style:normal;font-family:'hl-efont';font-weight:500;font-size:28px;color:var(--dz-ff)}
    
24. 
    
25. /* 4张图的特殊布局保持不变 */
    
26. .forumportal_listc li .km_4img .kmshowimg {width:100%;padding-bottom:47%;margin-top:1.6%;margin-right:1.6%;box-sizing:border-box;background:var(--dz-bgb);overflow:hidden;border-radius:var(--dz-radius-s)}
    
27. .forumportal_listc li .km_4img .kmshowimg:nth-child(2n) {margin-right:0}
    
28. .forumportal_listc li .km_4img .kmshowimg:nth-child(3n) {margin-right:1.6%}

复制代码

3、最后到后台更新缓存和浏览器缓存。