Discuz!X帖子内容页增加阅读全文功能-Discuz教程下载

登录/ 注册
站长工具
 找回密码
 立即注册
QQ登录
搜索
返回列表 发新帖

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

来自版块: Discuz教程
25308
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员，全站资源免费下
很多小伙伴可能碰到在看帖的时候帖子很长，鼠标滚轮滚很多次也看不到底的情况，这时候我们可以在帖子内容页增加阅读全文功能，实现非常简单，由于没有合适的嵌入点，不能做成插件，只能自己修改代码了，实现起来很简单，代码如下：
一、找到 你的模板目录/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样式如下
  1. 找到 你的模板目录/common/module.css 或 模板目录/common/extend_module.css，粘贴一下代码即可。
  2. /** forum::viewthread,group::viewthread **/
  3. /*阅读全文按钮*/
  4. .read_all { position: relative; margin-top: -200px;  z-index:999; text-align: center; }
  5. .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)); }
  6. .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; }
  7. .read_more_btn:hover { background:{HIGHLIGHTLINK}; color:#fff; text-decoration:none;  }
  8. /** end **/
复制代码
后台更新CSS缓存、模板缓存，大功告成。
Discuz，帖子，内容页，增加，阅读，全文，功能

举报

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块

您需要登录后才可以回帖 立即登录
登录
0
0
0

©2015-2022 www.tuyuanma.com 版权所有 Sitemap.xml

本站内容皆来自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

联系邮箱：tuyuanma@qq.com 联系QQ：3197813386

返回顶部