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

时间:2021-05-02

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

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

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

    二、找到第180行,
  • <div id="comment_$post[pid]" class="cm">
  • 复制代码
    在此之前粘贴以下代码
  • <!--{if $post['first']}--> <div class="read_all pbw cl" > <div class="read_more_mask"></div> <a class="read_more_btn" target="_self">阅读全文</a> </div> <script type="text/javascript"> jq(function(){ var widHeight = jq(window).height(); var artHeight = jq('#rt').height(); if(artHeight>(widHeight * 2.5)){ jq('#rt').height(widHeight * 2.5 - 260).css({'overflow':'hidden'}); var article_show = true; jq('.read_more_btn').on('click',bindRead_more); }else{ article_show = true; jq('.read_all').hide().addClass('readall_box_nobg'); } function bindRead_more(){ if(!article_show){ jq('#rt').height(widHeight * 2.5).css({'overflow':'hidden'}); jq('.read_all').show().removeClass('readall_box_nobg'); article_show = true; }else{ jq('#rt').height("").css({'overflow':'hidden'}); jq('.read_all').show().addClass('readall_box_nobg'); jq('.read_all').hide().addClass('readall_box_nobg'); article_show = false; } } }) </script> <!--{/if}-->复制代码

  • 三、css样式如下
    找到 你的模板目录/common/module.css 或 模板目录/common/extend_module.css,粘贴一下代码即可。
  • /** forum::viewthread,group::viewthread **/.read_all { position: relative; margin-top: -200px; z-index:999; text-align: center; }.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)); }.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; }.read_more_btn:hover { background:{HIGHLIGHTLINK}; color:#fff; text-decoration:none; }/** end **/

  • 声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章