密通学院

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 5980|回复: 0

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

[复制链接]
  • TA的每日心情
    可爱
    2018-6-29 10:04
  • 289

    主题

    319

    帖子

    9万

    铜板

    超级版主

    Rank: 8Rank: 8

    积分
    93815
    QQ
    发表于 2018-6-21 10:13:42 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    很多小伙伴可能碰到在看帖的时候帖子很长,鼠标滚轮滚很多次也看不到底的情况,这时候我们可以在帖子内容页增加阅读全文功能,实现非常简单,由于没有合适的嵌入点,不能做成插件,只能自己修改代码了,实现起来很简单。
    103801h1womkyuz5spmrvm.jpg.thumb.jpg

    代码如下:
    一、找到 你的模板目录/forum/viewthread_node_body.htm,打开这个文件,
    <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 **/
    后台更新CSS缓存、模板缓存,大功告成。
    如果您有业务需求,可以和我联系:http://wpa.qq.com/msgrd?V=3&amp; ... yes&amp;from=discuz
    回复

    使用道具 举报

    快速回复: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 感恩
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    首页|Archiver|手机版|小黑屋|密通学院:专业网络营销服务商

    GMT+8, 2024-4-20 11:48 , Processed in 0.142578 second(s), 30 queries QQ

    Powered by XMT Inc. © 2015-2025 ArrayV1.0 豫ICP备17022382号

    系统运营:密城通 豫公网安备 41018302000212 号

    快速回复 返回顶部 返回列表