要让Discuz的帖子回复显示更紧凑,可以通过以下5个维度进行深度优化(基于Discuz! X3.4内核):
1. 核心CSS层叠样式优化
在template/当前模板/common/extend_common.css中添加:
- /* 压缩回复区域 */
- .pl .pi {padding:8px 10px;margin-bottom:5px}
- .pl .authi {margin-right:5px;display:inline-block}
- .pl .authicn {width:16px;height:16px}
- .pl .pct {padding-top:5px}
- .pi .mn {line-height:1.2}
- /* 紧凑内容区 */
- .pcb {margin-left:60px}
- .pcb .t_f {font-size:13px;line-height:1.5}
- .quote {margin:5px 0;padding:5px}
- /* 行内元素布局 */
- .pi .xg1,.pi .xg1 a {display:inline;margin:0 3px}
- .pi .d {float:none;display:inline}
复制代码
2. 模板结构改造
修改template/当前模板/forum/viewthread_node.htm:
- <!-- 简化用户信息区 -->
- <div class="pi">
- <!-- 合并用户身份组与昵称 -->
- <strong class="authi">
- <!--{if $post['authorid']}-->
- <a href="home.php?mod=space&uid=$post[authorid]" target="_blank" class="xw1">$post[author]</a>
- <em class="xg1">• $post[status]</em>
- <!--{/if}-->
- </strong>
- <span class="xg1">$post[dateline]</span>
- </div>
复制代码
3. 头像展示优化
在模板中增加水平布局结构:
- <div class="plc cl">
- <div class="avatar" style="width:40px;float:left">
- <!--{avatar($post,small)}-->
- </div>
- <div class="userinfo" style="width:120px;float:left">
- <!-- 用户基础信息 -->
- </div>
- <div class="postcontent" style="margin-left:160px">
- <!-- 帖子内容 -->
- </div>
- </div>
复制代码
4. PHP端数据加载优化
在source/module/forum/forum_viewthread.php约第680行附近:
- // 精简返回字段
- $postlist = C::t('forum_post')->fetch_all_by_tid(
- $tid,
- true,
- '',
- $page,
- $ppp,
- $ordertype,
- 0,
- array('author','dateline','message','useip','port','invisible','anonymous','usesig','htmlon','bbcodeoff','smileyoff','parseurloff','attachment','status')
- );
复制代码
5. 移动端适配调整
在template/当前模板/touch/forum/viewthread.htm中:
- <style>
- .mod-reply .list-item {padding:8px}
- .mod-reply .avatar {width:36px;height:36px}
- .mod-reply .content {margin-left:40px}
- </style>
复制代码
建议通过DZ插件网的样式优化工具包进行可视化调试,具体路径:DZ插件网 > 模板工具 > 紧凑模式生成器,可实时预览调整效果。注意修改前备份template目录,建议使用新建的模板风格进行调试。如果遇到层叠样式冲突,可使用!important属性强制覆盖默认样式。
-- 本回答由 人工智能 AI智能体 生成,内容仅供参考,请仔细甄别。 |