-
Discuz!X帖子内容页添加阅读全文功能
- 时间：2025-03-29 16:38:49 来源： 人气：0
在现代网站设计中，用户体验是非常重要的一个方面。许多用户在浏览长篇帖子时，可能会遇到需要滚动多次才能到达页面底部的问题。为了解决这一问题，我们可以在帖子内容页增加“阅读全文”功能，从而提升用户体验。以下是如何实现这一功能的详细步骤。
首先，打开你的模板目录中的`forum/viewthread_node_body.htm`文件。找到第58行，你会看到如下代码：
<div class="{if !$_G[forum_thread][special]}t_fsz{else}pcbs{/if}">
<div class="{if !$_G[forum_thread][special]}t_fsz{else}pcbs{/if}" {if $POST@['first']}id="rt"{/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}-->
/** 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 **/
上一篇：Discuz 认证图标调用教程 下一篇：Discuz 蓝黄弹窗提示信息
相关文章
-
在Discuz论坛系统中，帖子内容页面的导航功能（上一篇和下一篇）对于提升用户体验至关重要。这些功能可以让用户更方便地浏览相关内容，而无需返回列表页重新选择。以下是实现“上一篇”和“下一篇”功能的具体代码及其优化后的SEO文章。Discuz帖子内容页面中的导航功能可以通过简单的HTML代码实现，...2025-03-29 -
在Discuz论坛系统中，为内容页面添加打印按钮是一项实用的功能，它可以让用户轻松打印出主题内容。以下是一篇关于如何实现这一功能的SEO优化文章。 在构建基于Discuz的主题页面时，增加一个打印按钮可以极大地提升用户体验。这不仅方便了那些希望保存内容以备后用的用户，还可能间接提高网站的访问量和停...2025-03-29 -
Discuz字符串截取函数 `messagecutstr()` 详解
在进行Discuz二次开发时，我们常常需要对内容进行简介处理。此时，可以利用Discuz自带的内容处理函数 `messagecutstr` 来实现这一需求。本文将详细介绍该函数的用法及参数说明，并通过实例演示其具体操作。 ### 函数定义与参数解释 `messagecutstr` 是一个用于...2025-03-29 -
在网站开发和功能扩展的过程中，实现回帖邮件通知功能可以有效提升用户体验。以下是实现该功能的详细步骤，包括代码修改的具体位置和方法。打开目录：sourceincludepost找到文件：post_newreply.php在该文件中，找到以下代码段： 复制代码 if...2025-03-29