广告位招租 qq245909083

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

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

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


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

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

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

三、css样式如下
找到 你的模板目录/common/module.css 或 模板目录/common/extend_module.css,粘贴一下代码即可。
  1. /** forum::viewthread,group::viewthread **/
  2. /*阅读全文按钮*/
  3. .read_all { position: relative; margin-top: -200px;&#160;&#160;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;&#160;&#160;}
  7. /** end **/
复制代码
返回顶部