discuz 的首页列表是没有什么实际的效果,默认的,可以通过 diy 模式来添加文件列表,但这不是我喜欢的做法,通过代码实现效果,更能优化网站性能。
对于首页的列表,默认是没有 ajax 分页的,如果想要做成帖子列表页的 ajax 分页效果,需要改动几个文件,如下预览图:
点击加载更多将会加载下一页。
教程开始。
1、新建 PHP 文件
1.1、新建一个名为 ajax-load-page.php 文件,把该文件放到根目录,并放入以下代码:
- <?php
- require './source/class/class_core.php'; // 引入系统核心文件
- $discuz = & discuz_core::instance();
- $discuz->init(); // 创建及初始化对象
- loadcache('diytemplatename');
- include template('diy:portal/ajax_page'); // 调用单页模版文件,路径为:当前模板目录/portal/ajax_page.htm
- ?>
1.2、新建一个名为 ajax-load-msg.php 文件,把该文件放到:模板目录/php/ 文件夹中,请放入以下代码:
- <?php
- if(!defined('IN_DISCUZ')) {
- exit('Access Denied');
- }
- $fids='1,2,3';// 调用版块的 fid ,多个用半角逗号分开
- if($_GET['order']=='dateline' || $_GET['order']=='views' || $_GET['order']=='replies' || $_GET['order']=='digest'){
- $order= $_GET['order'];
- }else{
- $order= 'dateline';
- }
- $messagelength='500';// 内容字数
- $num = 20; // 每页展示数量
- $begin=($_G['page']-1)*$num;
- $manylist=array();
- require_once libfile('function/post');
- $rs=DB::query("
- SELECT t.*,p.message,p.pid,f.name
- FROM ".DB::table("forum_thread")." t
- LEFT JOIN ".DB::table("forum_post")." p on p.tid=t.tid
- LEFT JOIN ".DB::table("forum_forum")." f on f.fid=t.fid
- WHERE t.`fid` in ($fids) and t.displayorder>=0 and p.first=1
- group by t.tid
- ORDER BY t.`$order` DESC
- LIMIT $begin , $num");
- while ($rw=DB::fetch($rs)) {
- $rw['message']=messagecutstr($rw['message'],$messagelength,'');
- $rw['message']=dhtmlspecialchars($rw['message']);
- $manylist1[]=$rw;
- }
- foreach($manylist1 as $val){
- $tagdata = DB::fetch_all("SELECT tagid FROM ".DB::table('common_tagitem')." where itemid=".$val[tid]);
- $item=array();
- foreach($tagdata as $v1){
- $itemdata=DB::fetch_first("SELECT * FROM ".DB::table('common_tag')." where tagid=".$v1[tagid]);
- $item[]=$itemdata;
- }
- $val['itemdata']=$item;
- $manylist[]=$val;
- }
- $allnum=DB::result_first("select count(*) from ".DB::table("forum_thread")." where fid in ($fids)"); // 所有帖子
- $pagenav=multi($allnum,$num+10,$_G['page'],"portal.php?order=$order#threadsbody");
- $uid = $_G[uid];
- $magic = mysql_query("select * from ".DB::table('common_magiclog')." where uid=$uid");
- $magicnums = mysql_num_rows($magic);
- $medal = mysql_query("select * from ".DB::table('common_member_medal')." where uid=$uid");
- $medalnums = mysql_num_rows($medal);
- $task = mysql_query("select * from ".DB::table('common_task')." where available=2");
- $tasknums = mysql_num_rows($task);
- ?>
2、新建 htm 文件
新建名为 ajax_page.htm 文件,放到:模板目录/portal/ 文件夹中,并放入以下代码:
- <!--{eval $list_count=0;}-->
- <!--{loop $manylist $thread}-->
- <!--{eval $list_count+=1;}-->
- <div class="threadlst">
- <div class="threadhead">
- <span><a href="forum.php?mod=forumdisplay&fid=$thread[fid]"><strong>$thread[name]</strong></a></span><h2 {if $thread['message']} tip="<!--{echo cutstr($thread['message'],300)}-->" onmouseover="showTip(this)" {/if}><a href="forum.php?mod=viewthread&tid=$thread[tid]" onclick="atarget(this)" title="$thread[subject]">$thread[subject]</a><!--{if $thread['attachment'] == 2}--><img src="static/image/filetype/image_s.gif" alt="attach_img" title="图片附件" align="absmiddle"/><!--{/if}--> </h2>
- </div>
- <div class="threadbody">
- <div class="threadmessage"><!--{echo cutstr($thread['message'],300)}--></div>
- <div class="threadthumb">
- <!--{if $thread['attachment'] == 'number'}-->
- <!--{eval $table='forum_attachment_'.substr($thread['tid'], -1);}-->
- <!--{eval $query = DB::fetch_all("SELECT aid,tid,description,filename FROM ".DB::table($table)." WHERE tid='$thread[tid]' AND isimage!=0 ORDER BY `dateline` DESC LIMIT 0,12"); }-->
- <!--{eval $thread['pics']=count($query);}-->
- <div class="imglst{if $_G['cookie']['threadthumbhide']}dn{/if}">
- <!--{eval $i=1}-->
- <!--{loop $query $pic}-->
- <!--{if $i<6}-->
- <a href="forum.php?mod=viewthread&tid=$thread[tid]#aimg_$pic[aid]"><img src="{eval echo(getforumimg($pic[aid],0,120,80))}" alt="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}" title="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}"/></a>
- <!--{/if}-->
- <!--{eval $i++}-->
- <!--{/loop}-->
- </div>
- <!--{/if}-->
- </div>
- <div class="threadinfo">
- <div class="postauthor z">
- <a href="home.php?mod=space&uid=$thread[authorid]" rel="nofollw" c="1">$thread[author]</a> 发表于: {echo date('Y-m-d', $thread['dateline']);}
- </div>
- <div class="lastreply">
- <a href="forum.php?mod=redirect&tid=$thread[tid]&goto=lastpost#lastpost" title="跳转到最新回复楼层【$thread['replies']楼】">回复: $thread[replies]</a> / <span>浏览: $thread[views]</span>
- </div>
- <div>
- <!--{loop $thread[itemdata] $tag}-->
- <a href="misc.php?mod=tag&id=$tag[tagid]">$tag[tagname]</a>
- <!--{/loop}-->
- </div>
- </div>
- </div><!-- threadbody -->
- </div><!-- threadlst -->
- <!--{/loop}-->
想要风格 2 的改为
- <!--{eval $list_count=0;}-->
- <!--{loop $manylist $thread}-->
- <!--{eval $list_count+=1;}-->
- <article class="hm-post">
- <div class="post-head hm">
- <h1 class="post-title"><a href="forum.php?mod=viewthread&tid=$thread[tid]">$thread[subject]</a></h1>
- <div class="post-meta"><span>作者:<a href="home.php?mod=space&uid=$thread[authorid]" class="xg1" target="_blank">$thread[author]</a></span> ?
- <time class="post-date" datetime="{echo date('Y-m-d', $thread['dateline']);}" title="{echo date('Y-m-d', $thread['dateline']);}">{echo date('Y-m-d', $thread['dateline']);}</time>
- </div>
- </div>
- <div class="post-content">
- <p><!--{echo cutstr($thread['message'],300)}--></p>
- </div>
- <div class="post-morelink"><a href="forum.php?mod=viewthread&tid=$thread[tid]">阅读全文</a></div>
- <footer class="post-footer">
- <span>
- <a href="forum.php?mod=forumdisplay&fid=$thread[fid]">[ <strong>$thread[name] ] </strong></a>
- <!--{loop $thread[itemdata] $tag}-->
- <a href="misc.php?mod=tag&id=$tag[tagid]">$tag[tagname]</a>
- <!--{/loop}-->
- </span><span class="y">阅读数 $thread[views]</span>
- </footer>
- </article>
- <!--{/loop}-->
3、修改首页文件。
如果是门户为首页则修改「模板目录/portal/index.htm」文件,如果是论坛为首页则修改「模板目录/forum/discuz.htm」文件。
合适位置添加如下代码:
- <!--{eval include TPLDIR.'/php/ajax-load-msg.php';}-->
- <div class="home-main cl">
- <div class="hm-mainpost">
- <h3 class="hm-title">
- <!-- {if $_GET['order']=='dateline' || $_GET['order']==''} -->最新文章<!-- {elseif $_GET['order']=='replies'} -->最新回复<!-- {elseif $_GET['order']=='views'} -->热门文章<!-- {elseif $_GET['order']=='digest'} -->精华推荐<!-- {/if} -->
- <ul id="threadsbody" class="cl"><li{if $_GET['order']=='dateline' || $_GET['order']==''} class="a"{/if}><a href="portal.php?order=dateline" rel="nofollw">默认时间</a></li>/<li{if $_GET['order']=='replies'} class="a"{/if}><a href="portal.php?order=replies" rel="nofollw">回复时间</a></li>/<li{if $_GET['order']=='views'} class="a"{/if}><a href="portal.php?order=views" rel="nofollw">查看次数</a></li>/<li{if $_GET['order']=='digest'} class="a"{/if}><a href="portal.php?order=digest" rel="nofollw">精华推荐</a></li></ul>
- </h3>
- <div class="hm-body">
- <!-- 帖子列表 -->
- <div class="hm-thread" style="position: relative;">
- <!--{eval $list_count=0;}-->
- <!--{loop $manylist $thread}-->
- <!--{eval $list_count+=1;}-->
- <div class="threadlst">
- <div class="threadhead">
- <span><a href="forum.php?mod=forumdisplay&fid=$thread[fid]"><strong>$thread[name]</strong></a></span><h2 {if $thread['message']} tip="<!--{echo cutstr($thread['message'],300)}-->" onmouseover="showTip(this)" {/if}><a href="forum.php?mod=viewthread&tid=$thread[tid]" onclick="atarget(this)" title="$thread[subject]">$thread[subject]</a><!--{if $thread['attachment'] == 2}--><img src="static/image/filetype/image_s.gif" alt="attach_img" title="图片附件" align="absmiddle"/><!--{/if}--> </h2>
- </div>
- <div class="threadbody">
- <div class="threadmessage"><!--{echo cutstr($thread['message'],300)}--></div>
- <div class="threadthumb">
- <!--{if $thread['attachment'] == 'number'}-->
- <!--{eval $table='forum_attachment_'.substr($thread['tid'], -1);}-->
- <!--{eval $query = DB::fetch_all("SELECT aid,tid,description,filename FROM ".DB::table($table)." WHERE tid='$thread[tid]' AND isimage!=0 ORDER BY `dateline` DESC LIMIT 0,12"); }-->
- <!--{eval $thread['pics']=count($query);}-->
- <div class="imglst{if $_G['cookie']['threadthumbhide']}dn{/if}">
- <!--{eval $i=1}-->
- <!--{loop $query $pic}-->
- <!--{if $i<6}-->
- <a href="forum.php?mod=viewthread&tid=$thread[tid]#aimg_$pic[aid]"><img src="{eval echo(getforumimg($pic[aid],0,120,80))}" alt="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}" title="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}"/></a>
- <!--{/if}-->
- <!--{eval $i++}-->
- <!--{/loop}-->
- </div>
- <!--{/if}-->
- </div>
- <div class="threadinfo">
- <div class="postauthor z">
- <a href="home.php?mod=space&uid=$thread[authorid]" rel="nofollw" c="1">$thread[author]</a> 发表于: {echo date('Y-m-d', $thread['dateline']);}
- </div>
- <div class="lastreply">
- <a href="forum.php?mod=redirect&tid=$thread[tid]&goto=lastpost#lastpost" title="跳转到最新回复楼层【$thread['replies']楼】">回复: $thread[replies]</a> / <span>浏览: $thread[views]</span>
- </div>
- <div>
- <!--{loop $thread[itemdata] $tag}-->
- <a href="misc.php?mod=tag&id=$tag[tagid]">$tag[tagname]</a>
- <!--{/loop}-->
- </div>
- </div>
- </div><!-- threadbody -->
- </div><!-- threadlst -->
- <!--{/loop}-->
- </div>
- </div>
- <!--{if !$_GET['order']}--><div id="ajaxloading"><a href="javasctipt:void(0);">加载更多</a></div><!--{/if}-->
- <!--{if $_GET['order']}-->$pagenav <!--{/if}-->
- </div>
- </div>
在列表下方添加 js 代码:
注:考虑到 discuz 的 js 与 jq 的 $ 冲突,我改为了 jq , var jq = jQuery.noConflict(true);
- jq(function () {
- var p = {if $_GET['page'] <> ''}$_GET['page']{else}1{/if}; //记录第几页
- jq('#ajaxloading').click(function () {
- p += 1; //下一页
- jq.ajax({
- url: 'ajax_page.php?basescript=portal',
- data: { page: p },
- cache: false,
- dataType: 'html',
- beforeSend:function(){
- jq("#ajaxloading").html("<a href='javasctipt:void(0);'>加载中...</a>");
- },
- error: function() {
- jq("#ajaxloading").html("<a href='javasctipt:void(0);'>请求出错,请重试</a>")
- },
- success: function (html) {
- if (html) {
- jq("#ajaxloading").html("<a href='javasctipt:void(0);'>加载更多</a>");
- jq('#ajaxloading').before(html);
- }else{
- jq("#ajaxloading").html("<a href='javasctipt:void(0);'>加载完毕</a>");
- }
- }
- });
- return false;
- });
- });
完毕,不考虑样式的情况下,内容完整了。
想要风格 2 的改为
- <!--{eval $list_count=0;}-->
- <!--{loop $manylist $thread}-->
- <!--{eval $list_count+=1;}-->
- <article class="hm-post">
- <div class="post-head hm">
- <h1 class="post-title"><a href="forum.php?mod=viewthread&tid=$thread[tid]">$thread[subject]</a></h1>
- <div class="post-meta"><span>作者:<a href="home.php?mod=space&uid=$thread[authorid]" class="xg1" target="_blank">$thread[author]</a></span> ?
- <time class="post-date" datetime="{echo date('Y-m-d', $thread['dateline']);}" title="{echo date('Y-m-d', $thread['dateline']);}">{echo date('Y-m-d', $thread['dateline']);}</time>
- </div>
- </div>
- <div class="post-content">
- <p><!--{echo cutstr($thread['message'],300)}--></p>
- </div>
- <div class="post-morelink"><a href="forum.php?mod=viewthread&tid=$thread[tid]">阅读全文</a></div>
- <footer class="post-footer">
- <span>
- <a href="forum.php?mod=forumdisplay&fid=$thread[fid]">[ <strong>$thread[name] ] </strong></a>
- <!--{loop $thread[itemdata] $tag}-->
- <a href="misc.php?mod=tag&id=$tag[tagid]">$tag[tagname]</a>
- <!--{/loop}-->
- </span><span class="y">阅读数 $thread[views]</span>
- </footer>
- </article>
- <!--{/loop}-->
- <!--{if !$_GET['order']}--><div id="ajaxloading"><a href="javasctipt:void(0);">加载更多</a></div><!--{/if}-->
js 部分
- jq(function () {
- var p = {if $_GET['page'] <> ''}$_GET['page']{else}1{/if}; //记录第几页
- jq('#ajaxloading').click(function () {
- p += 1; //下一页
- jq.ajax({
- url: 'ajax_page.php',
- data: { page: p },
- cache: false,
- dataType: 'html',
- beforeSend:function(){
- jq("#ajaxloading").html("<a href='javasctipt:void(0);' class=\"xg1\">加载中...</a>");
- },
- error: function() {
- jq("#ajaxloading").html("<a href='javasctipt:void(0);' class=\"xi1\">请求出错</a>")
- },
- success: function (html) {
- if (html) {
- jq("#ajaxloading").html("<a href='javasctipt:void(0);' class=\"\">加载更多</a>");
- jq('#ajaxloading').before(html);
- }else{
- jq("#ajaxloading").html("<a href='javasctipt:void(0);' class=\"xg1\">加载完毕</a>");
- }
- }
- });
- return false;
- });
- });
参考样式:
- /* 帖子列表 */
- .threadhead { }
- .threadhead strong { float: left; font-size: 12px; color: #999; background: #f3f3f3; padding: 4px 7px; font-weight: normal; margin: 3px 10px 0 0; -webkit-transition: all .25s linear; transition: all .25s linear; }
- .threadlst:hover .threadhead strong { background: {MENUBGCOLOR}; color: {MENUTEXT}; }
- .threadlst:hover .threadhead strong:hover { background: {MENUHOVERBGCOLOR}; }
- .threadhead h2 a { font-size: 18px; font-weight: normal; height: 32px; line-height: 32px; }
- .threadlst { background: #fff; border-bottom: 1px solid #eee; padding: 15px 15px 0; -webkit-transition: all .25s linear; transition: all .25s linear;}
- .threadlst:hover { background: #fafbfc; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.175); box-shadow: 0 0 15px rgba(0, 0, 0, 0.175); border-bottom: 1px solid #06b2b6; position: relative; z-index: 1; }
- .threadmessage { color: #777; font-size: 12px; font-weight: 300; text-indent: 2em; line-height: 1.75; margin: 10px 0; }
- .threadinfo { display: block; height: 22px; line-height: 22px; padding: 10px 0;}
- .threadinfo .lastreply { float: right; }
- .threadinfo * { color: #aaa;}
- .threadthumb img { max-width: 120px; -webkit-transition: all .25s linear; transition: all .25s linear; }
- .threadthumb img:hover { opacity: 0.75; -webkit-transform: scalescale(1.5); transform: scalescale(1.5); }
- .threadthumb a { display: inline-block; width: 120px; overflow: hidden; border: 1px solid #eee; margin: 0 5px; }
- #ajaxloading { text-align: center;}
- #ajaxloading a { display: block; background: #fff; padding: 9px 21px; margin: 15px 0; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; text-decoration: none; border: 1px solid #eee;-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.07);box-shadow: 0 1px 7px rgba(0, 0, 0, 0.07);}
- #ajaxloading a:hover { color: {MENUTEXT}; background: {MENUBGCOLOR}; border: 1px solid {MENUBGCOLOR}; }
样式效果预览:
风格 2 样式
- /* 文章列表 */
- .hm-post { padding: 35px; background: #fff; margin-bottom: 35px; position: relative; overflow: hidden; }
- .hm-post a { -webkit-transition: all 0.15s linear; transition: all 0.15s linear; }
- .hm-post .post-head a:hover { text-decoration: none; color: #3abc9d; }
- .hm-post .post-head .post-title { margin: 0; font-size: 2em; line-height: 1.2em; }
- .hm-post .post-head .post-meta { color: #959595; margin: 14px 0 0; }
- .hm-post .post-head .post-meta span { margin: 0 7px; white-space: nowrap; }
- .hm-post .post-content { margin: 30px 0; }
- .hm-post .post-content p { color: #787878; font-size: 14px; }
- .hm-post .post-morelink { text-align: right; }
- .hm-post .post-morelink a { display: inline-block; cursor: pointer; outline: none; text-decoration: none; padding: 7px 11px; border-radius: 2px; border: 1px solid #3abc9d; background: #3abc9d; color: #fff; }
- .hm-post .post-morelink a:hover { border: 1px solid #38b798; background: #38b798; }
- .hm-post .post-footer { margin-top: 30px; border-top: 1px solid #eee; padding: 21px 0 0; }
- .hm-post .post-footer span { color: #959595; line-height: 28px }
- .hm-post .post-footer a { color: #959595; margin-left: 7px }
- .hm-post .post-footer a:hover { color: #f4645f }
风格 2 预览图
完毕!