首页 教程资源正文

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

娜迦源码 教程资源 2019-03-25 01:10:12 302 0 教程资源

很多小伙伴可能碰到在看帖的时候帖子很长,鼠标滚轮滚很多次也看不到底的情况,这时候我们可以在帖子内容页增加阅读全文功能,实现非常简单,由于没有合适的嵌入点,不能做成插件,只能自己修改代码了,实现起来很简单,代码如下:
一、找到 你的模板目录/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 **/


复制代码


版权声明

1:如非特殊说明,本站对提供的源码不拥有任何权利,其版权归原著者拥有。

2:请勿将该源码、软件进行商业交易、转载等行为,该源码、软件只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。

3:本网站所有源码和软件均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。如有侵犯你版权的,请来信(邮箱:393249296@qq.com)指出,本站将立即改正。

本文链接:https://www.wsx6.cn/post/650.html

分享:

支付宝

微信

嘿,我是客服
请先 登录 再评论,若不是会员请先 注册