请选择 进入手机版 | 继续访问电脑版



吾爱汇站网官方联系方式

工作时间: 周一到周五早上09:00-11:00, 下午03:00-05:00, 晚上20:30-22:30(周六、日休息)
QQ: 211985957  168528823  97147700  53150916 汇聚、帮助、交流   E-Mail: postmaster@5ihz.cn
用户交流QQ群
1群21532443 2群413446685 ←提醒:请勿重复加群,谢谢!(本站提供低价收费技术服务,详情联系在线客服)
查看: 2923|回复: 25

Discuz!X帖子内容页增加阅读全文功能

[复制链接]

2

主题

2

帖子

24

积分

新手上路

Rank: 1

积分
24
发表于 2018-12-25 13:04:12 | 显示全部楼层 |阅读模式
很多小伙伴可能碰到在看帖的时候帖子很长,鼠标滚轮滚很多次也看不到底的情况,这时候我们可以在帖子内容页增加阅读全文功能,实现非常简单,由于没有合适的嵌入点,不能做成插件,只能自己修改代码了,实现起来很简单,代码如下:
一、找到 你的模板目录/forum/viewthread_node_body.htm,打开这个文件,找到第58行,
  1. <div class="{if !$_G[forum_thread][special]}t_fsz{else}pcbs{/if}">
复制代码

给这个div增加一个id
  1. <div class="{if !$_G[forum_thread][special]}t_fsz{else}pcbs{/if}" {if $post['first']}id="rt"{/if}>
复制代码

{if $post['first']}{/if}这个判断是为了保证代码只在楼主这层有效。

二、找到第180行,
  1. <div id="comment_$post[pid]" class="cm">
复制代码

在此之前粘贴以下代码
  1. <!--{if $post['first']}-->
  2.     <div class="read_all pbw cl" >
  3.         <div class="read_more_mask"></div>
  4.         <a class="read_more_btn" target="_self">阅读全文</a>
  5.     </div>
  6.   <script type="text/javascript">
  7.   jq(function(){
  8.     var widHeight = jq(window).height();
  9.     var artHeight = jq('#rt').height();
  10.     if(artHeight>(widHeight * 2.5)){
  11.       jq('#rt').height(widHeight * 2.5 - 260).css({'overflow':'hidden'});
  12.       var article_show = true;
  13.       jq('.read_more_btn').on('click',bindRead_more);
  14.     }else{
  15.       article_show = true;
  16.       jq('.read_all').hide().addClass('readall_box_nobg');
  17.     }
  18.     function bindRead_more(){
  19.       if(!article_show){
  20.         jq('#rt').height(widHeight * 2.5).css({'overflow':'hidden'});
  21.         jq('.read_all').show().removeClass('readall_box_nobg');
  22.         article_show = true;
  23.       }else{
  24.         jq('#rt').height("").css({'overflow':'hidden'});
  25.         jq('.read_all').show().addClass('readall_box_nobg');
  26.         jq('.read_all').hide().addClass('readall_box_nobg');
  27.         article_show = false;
  28.       }
  29.     }
  30.   })
  31.     </script>
  32.     <!--{/if}-->
复制代码

三、css样式如下
找到 你的模板目录/common/module.css 或 模板目录/common/extend_module.css,粘贴一下代码即可。

  1. /** forum::viewthread,group::viewthread **/
  2. /*阅读全文按钮*/
  3. .read_all { position: relative; margin-top: -200px;  z-index:999; text-align: center; }
  4. .read_all .read_more_mask { height: 200px; background: -moz-linear-gradient(bottom,rgba(255,255,255,0.1),rgba(255,255,255,0)); background: -webkit-gradient(linear,0 top,0 bottom,from(rgba(255,255,255,0)),to(#fff)); background: -o-linear-gradient(bottom,rgba(255,255,255,0.1),rgba(255,255,255,0)); }
  5. .read_more_btn { display:inline-block; padding:0 20px; background: #fff; border-radius: 4px; border: 1px solid {HIGHLIGHTLINK}; cursor:pointer; font-size: 16px; color:{HIGHLIGHTLINK}; line-height: 32px; }
  6. .read_more_btn:hover { background:{HIGHLIGHTLINK}; color:#fff; text-decoration:none;  }
  7. /** end **/
复制代码


回复

使用道具 举报

恐怖的秋千 该用户已被删除
发表于 2018-12-25 13:14:57 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

1

主题

249

帖子

519

积分

高级会员

Rank: 4

积分
519
发表于 2018-12-25 17:10:16 | 显示全部楼层
真是难得给力的资源啊!支持
回复

使用道具 举报

0

主题

240

帖子

489

积分

高级会员

Rank: 4

积分
489
发表于 2018-12-25 18:36:11 | 显示全部楼层
看到这样的好资源真是高兴!感谢无私分享!
回复

使用道具 举报

12

主题

257

帖子

529

积分

钻石会员(永久)

Rank: 8Rank: 8

积分
529
发表于 2018-12-25 22:47:04 | 显示全部楼层
听说回帖是一种美德
回复

使用道具 举报

0

主题

244

帖子

500

积分

高级会员

Rank: 4

积分
500
发表于 2018-12-26 06:55:10 | 显示全部楼层
听说回帖是一种美德
回复

使用道具 举报

9

主题

269

帖子

559

积分

高级会员

Rank: 4

积分
559
发表于 2018-12-26 14:15:45 | 显示全部楼层
不错 支持一个了
回复

使用道具 举报

3

主题

254

帖子

527

积分

高级会员

Rank: 4

积分
527
发表于 2018-12-26 14:35:42 | 显示全部楼层
太生气了,无法HOLD啦 >_<......为什么我才发现吾爱汇站网这样的好站!
回复

使用道具 举报

2

主题

243

帖子

492

积分

高级会员

Rank: 4

积分
492
发表于 2018-12-26 19:31:00 | 显示全部楼层
谢谢分享
回复

使用道具 举报

0

主题

249

帖子

508

积分

高级会员

Rank: 4

积分
508
发表于 2018-12-26 20:07:53 | 显示全部楼层
找了很久,终于找到了!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


客服中心
关闭

欢迎来到汇站网

如果你有建站技术问题、仿站需求、设计服务请联系我们!高效率,低价帮格你搞定!

·······························

主机购买:查看
设计服务:查看
网站建设:查看
技术协助:查看
售前
售后
技术支持(收费)
客服中心
快速回复 返回顶部 返回列表