discuz 门户首页调用帖子列表带分页+多图显示(之一)-Discuz教程下载

登录/ 注册
站长工具
搜索
返回列表 发新帖

discuz 门户首页调用帖子列表带分页+多图显示(之一)

来自版块: Discuz教程发表于: 2018-6-22 19:15:36
50115
0
如本资源下载地址失效,请点击此处进行反馈
这和之前贴的分页效果是相同的，因为加了多图调用，所以再贴一下。
模板代码中使用了font awesome 4.5.0图标。


1.页面顶部放：
  1. <!--{eval require './source/function/function_post.php';}-->
  2. <!--{eval require './config/config_global.php';}-->
  3. <!--{eval $prefix=$_config['db']['1']['tablepre'] }-->
  4. <!--{eval $pagesize = 15;}-->
  5. <!--{eval $amount=0;}-->
  6. <!--{eval $res = mysql_query("SELECT COUNT(*) as count FROM ".$prefix."forum_thread t1 LEFT OUTER JOIN  ".$prefix."forum_threadimage t3 ON t1.tid = t3.tid WHERE t1.displayorder >- 1 AND t3.attachment <> ''");}-->
  7. <!--{eval while($re=mysql_fetch_array($res)) $amount=$re['count']}-->
  8. <!--{eval $pagecount = $amount ? (($amount < $pagesize) ? 1 : (($amount % $pagesize) ? ((int)($amount / $pagesize) + 1) : ($amount / $pagesize))) : 0; }-->
  9. <!--{eval $page = !empty($_G['gp_page']) ? max(1, intval($_G['gp_page'])) : 1;}-->
  10. <!--{eval $page = $page > $pagecount ? 1 : $page;}-->
  11. <!--{eval $startlimit = ($page - 1) * $pagesize;}-->
  12. <!--{eval $multipage = multi($amount, $pagesize, $page, 'portal.php?', $pagecount);}-->
  13. <!--{eval $res = mysql_query("SELECT t1.tid,t1.digest,t1.fid,t2.`name`,t1.author,t1.authorid,t1.`subject`,t4.message,t1.views,t1.replies from_unixtime(t1.dateline) as dateline,t3.attachment FROM ".$prefix."forum_thread t1 LEFT OUTER JOIN  ".$prefix."forum_forum t2 ON t1.fid = t2.fid LEFT OUTER JOIN  ".$prefix."forum_threadimage t3 ON t1.tid = t3.tid LEFT OUTER JOIN  ".$prefix."forum_post t4 ON t1.tid = t4.tid WHERE t1.displayorder >- 1<> '' AND t4.`first` > 0 ORDER BY t1.dateline DESC LIMIT $startlimit, $pagesize");}-->
复制代码
列表调用：
  1. <link href="$_G['style'][styleimgdir]/CSS/fsgallery.css" rel="stylesheet">
  2. <link href="$_G['style'][styleimgdir]/css/font-awesome.min.css" rel="stylesheet">
  3. <script type="text/javascript" src="$_G['style'][styleimgdir]/js/fs_forse.js"></script>
  4. <script src="$_G['style'][styleimgdir]/js/my.js" type="text/javascript"></script>
  5. <h2 class="g_tit">最新发布<li id="qinghideimg" {if $_G['cookie']['qinghideimg'] > 0}onclick="hideimg(1)"{else}onclick="hideimg(-1)" class="y qinghideimg_1" {/if}><i></i>图文</li></h2>
  6. <ul class="ui_list cl" id="itemContainer">
  7. <!--{eval while($re1=mysql_fetch_array($res)) {}-->
  8. <!--{eval}-->            
  9. $acount = DB::result(DB::query("SELECT count(*) FROM ".DB::table('common_tagitem')." b LEFT JOIN ".DB::table('common_tag')." bf ON bf.tagid=b.tagid WHERE b.itemid='$re1[tid]' group by b.tagid"));
  10. //$alist
  11. $taglists = array();
  12. if ($acount) {
  13. $tag = DB::query("SELECT  bf.*, b.* FROM ".DB::table('common_tagitem')." b LEFT JOIN ".DB::table('common_tag')." bf ON bf.tagid=b.tagid WHERE b.itemid='$re1[tid]' group by b.tagid  ORDER BY b.tagid DESC ");
  14. while ($tags = DB::fetch($tag)) {
  15. $taglists[] = $tags;
  16. }
  17. }
  18. <!--{/eval}-->
  19. <!--{eval $tbid = DB::result(DB::query("SELECT tableid FROM ".DB::table('forum_attachment')." WHERE `tid`= '$re1[tid]'"));}-->
  20. <!--{if $tbid}-->
  21. <!--{eval $picount = DB::fetch_all("SELECT aid FROM ".DB::table('forum_attachment_'.$tbid.'')." WHERE `tid`= '$re1[tid]' AND `isimage`=1;");}-->
  22. <!--{eval $picnum = count($picount);}-->
  23. <!--{if $picnum < 4}-->
  24. <!--{eval $litpicnum = '1';}-->
  25. <!--{elseif $picnum > 3 && $picnum < 8}-->
  26. <!--{eval $litpicnum = '4';}-->
  27. <!--{elseif $picnum > 7}-->
  28. <!--{eval $litpicnum = '8';}-->
  29. <!--{/if}-->
  30. <!--{if $picnum>0}-->
  31. <!--{eval $covers = DB::fetch_all("SELECT attachment,aid,description FROM ".DB::table('forum_attachment_'.$tbid.'')." WHERE `tid`= '$re1[tid]' AND `isimage`=1 LIMIT 0,$litpicnum");}-->
  32. <!--{/if}-->
  33.     <li class="ui_2_ul_li  cl border_b_gray">
  34.         <!--{if $litpicnum == 1}-->
  35.         <div class="ui_2_ul_li_imgouter  ovh position_a <!--{if $_G['cookie']['qinghideimg'] > 0}-->qnone_-1<!--{else}-->qnone_1<!--{/if}-->" id="gallery_$re1[tid]">
  36.             <!--{loop $covers $thecover}-->
  37.             <!--{eval $imagelistkey = getforumimg($thecover[aid], 0, 225, 0); }-->
  38.             <a id="aimg_$thecover['aid']" aid="$thecover['aid']" target="_blank" class="flt ds_inlineB cdg" href="data/attachment/forum/$thecover['attachment']" <!--{if $thecover['description']}-->title="$thecover['description']"<!--{else}-->title="$re1[subject](图$keys)"<!--{/if}-->><img src="$imagelistkey" height="auto" width="200" <!--{if $thecover['description']}-->alt="$thecover['description']" title="$thecover['description']"<!--{else}-->alt="$re1[subject](图$keys)" title="$re1[subject](图$keys)"<!--{/if}-->></a>
  39.             <!--{/loop}-->
  40.         </div>
  41.         <script language="javascript">
  42.             jQuery(document).ready(function() {
  43.             jQuery("#gallery_$re1['tid'] img").fsgallery()
  44.             })
  45.         </script>
  46.         <div class="ui_2_ul_li_con lcon">
  47.             <h3 class="clr"><a target="_blank" href="forum.php?mod=viewthread&tid=$re1[tid]" title="$re1[subject]" class="ui_colorG">$re1[subject]</a><!--{if !$picnum == 0}--><small><i class="fa fa-image fa-fw"></i><!--{$picnum}--></small><!--{/if}--></h3>
  48.             <p class="cdg ovh"><!--{eval echo messagecutstr($re1['message'],150)}-->...</p>
  49.             <div class="ui_2_userinfo  clg cl">
  50.                 <span><a href="forum.php?mod=forumdisplay&fid=$re1[fid]" class="article-info-cat z">$re1[name]</a></span>
  51.                 <span class="xfg">/</span>
  52.                 <span class="authors"><a href="home.php?mod=space&uid=$re1[authorid]">$re1[author]</a></span>
  53.                 <span class="xfg">/</span>
  54.                 <span>$re1[dateline]</span>
  55.                 <span class="xfg">/</span>
  56.                 <span class="views" title="已浏览$re1[views]次">$re1[views]</span>
  57.                 <span class="xfg"></span>
  58.                 <span class="replies" title="已有$re1[replies]条评论">$re1[replies]</span>
  59.                 <!--{if $re1['digest'] == 1}-->
  60.                 <span class="xfg">/</span>
  61.                 <span><i class="fa fa-diamond fa-fw" title="精华"></i>精华</span>
  62.                 <!--{/if}-->
  63.                 <span class="xfg">/</span>
  64.                 <em class="ptg xc_tag"><i class="fa fa-tag fa-fw"></i>
  65.                 <!--{loop $taglists $key $tags}-->
  66.                 <a title="$tags[tagname]"
  67. href="misc.php?mod=tag&id=$tags[tagid]"
  68. target="_blank">$tags[tagname]</a>
  69.                 <!--{/loop}-->
  70.                 </em>
  71.             </div>
  72.         </div>
  73.     <!--{else}-->
  74.     <div class="ui_2_ul_li_con">
  75.         <h3 class="clr"><a target="_blank" href="forum.php?mod=viewthread&tid=$re1[tid]" title="$re1[subject]" class="ui_colorG">$re1[subject]</a><!--{if !$picnum == 0}--><small><i class="fa fa-image fa-fw"></i><!--{$picnum}--></small><!--{/if}--></h3>
  76.         <p class="cdg ovh"><!--{eval echo messagecutstr($re1['message'],150)}-->...</p>
  77.         <div class="ui_2_ul_li_imgouter  ovh position_a <!--{if $_G['cookie']['qinghideimg'] > 0}-->qnone_-1<!--{else}-->qnone_1<!--{/if}-->" id="gallery_$re1[tid]">
  78.             <!--{loop $covers $key $thecover}-->
  79.             <!--{eval $keys = $key+1;}-->
  80.             <!--{eval $imagelistkey = getforumimg($thecover[aid], 0, 225, 0); }-->
  81.             <a id="aimg_$thecover['aid']" aid="$thecover['aid']" target="_blank" class="flt ds_inlineB cdg" href="data/attachment/forum/$thecover['attachment']" title="<!--{if $thecover['description']}-->$thecover['description']<!--{else}-->$re1[subject](图$keys)<!--{/if}-->"><img src="$imagelistkey" height="auto" width="200" <!--{if $thecover['description']}-->alt="$thecover['description']" title="$thecover['description']"<!--{else}-->alt="$re1[subject](图$keys)" title="$re1[subject](图$keys)"<!--{/if}-->></a>
  82.             <!--{/loop}-->
  83.         </div>
  84.         <script language="javascript">
  85.             jQuery(document).ready(function() {
  86.             jQuery("#gallery_$re1['tid'] img").fsgallery()
  87.             })
  88.         </script>
  89.         <div class="ui_2_userinfo  clg cl">
  90.             <span><a href="forum.php?mod=forumdisplay&fid=$re1[fid]" class="article-info-cat z">$re1[name]</a></span>
  91.             <span class="xfg">/</span>
  92.             <span class="authors"><a href="home.php?mod=space&uid=$re1[authorid]">$re1[author]</a></span>
  93.             <span class="xfg">/</span>
  94.             <span>$re1[dateline]</span>
  95.             <span class="xfg">/</span>
  96.             <span class="views" title="已浏览$re1[views]次">$re1[views]</span>
  97.             <span class="xfg"></span>
  98.             <span class="replies" title="已有$re1[replies]条评论">$re1[replies]</span>
  99.             <!--{if $re1['digest'] == 1}-->
  100.             <span class="xfg">/</span>
  101.             <span><i class="fa fa-diamond fa-fw" title="精华"></i>精华</span>
  102.             <!--{/if}-->
  103.             <span class="xfg">/</span>
  104.             <em class="ptg xc_tag"><i class="fa fa-tag fa-fw"></i>
  105.             <!--{loop $taglists $key $tags}-->
  106.             <a title="$tags[tagname]" href="misc.php?mod=tag&id=$tags[tagid]" target="_blank">$tags[tagname]</a>
  107.             <!--{/loop}-->
  108.             </em>
  109.         </div>
  110.     </div>
  111.     <!--{/if}-->
  112. </li>
  113. <!--{else}-->
  114.     <li class="ui_2_ul_li  cl border_b_gray">
  115.         <div class="ui_2_ul_li_con lcon">
  116.             <h3 class="clr"><a target="_blank" href="forum.php?mod=viewthread&tid=$re1[tid]" title="$re1[subject]" class="ui_colorG">$re1[subject]</a></h3>
  117.             <p class="cdg ovh"><!--{eval echo messagecutstr($re1['message'],150)}-->...</p>
  118.             <div class="ui_2_userinfo  clg cl">
  119.                 <span><a href="forum.php?mod=forumdisplay&fid=$re1[fid]" class="article-info-cat z">$re1[name]</a></span>
  120.                 <span class="xfg">/</span>
  121.                 <span class="authors"><a href="home.php?mod=space&uid=$re1[authorid]">$re1[author]</a></span>
  122.                 <span class="xfg">/</span>
  123.                 <span>$re1[dateline]</span>
  124.                 <span class="xfg">/</span>
  125.                 <span class="views" title="已浏览$re1[views]次">$re1[views]</span>
  126.                 <span class="xfg"></span>
  127.                 <span class="replies" title="已有$re1[replies]条评论">$re1[replies]</span>
  128.                 <!--{if $re1['digest'] == 1}-->
  129.                 <span class="xfg">/</span>
  130.                 <span><i class="fa fa-diamond fa-fw" title="精华"></i>精华</span>
  131.                 <!--{/if}-->
  132.                 <span class="xfg">/</span>
  133.                 <em class="ptg xc_tag"><i class="fa fa-tag fa-fw"></i>
  134.                 <!--{loop $taglists $key $tags}-->
  135.                 <a title="$tags[tagname]" href="misc.php?mod=tag&id=$tags[tagid]" target="_blank">$tags[tagname]</a>
  136.                 <!--{/loop}-->
  137.                 </em>
  138.             </div>
  139.         </div>
  140.     </li>
  141. <!--{/if}-->
  142. <!--{eval }}-->
  143. </ul>
  144. <div class="cl" style="background: #FFFFFF;">
  145.     <div id="holder" class="holder">$multipage</div>
  146. </div>
复制代码
以上这两段就够了。
---------------------------------------------------------------------------------------------------
解释下这个列表里的多图，写有点乱，我写完再看都蒙圈：
  1. <!--{eval $tbid = DB::result(DB::query("SELECT tableid FROM ".DB::table('forum_attachment')." WHERE `tid`= '$re1[tid]'"));}-->
复制代码
是用帖子tid获取对应的表tableid。
接下来开始判断：
  1. <!--{if $tbid}-->
复制代码
即如果存在tid，开始调用列表。原本没写这个判断，导致出错，获取不到附件分表id，琢磨好久才想到，没有附件的帖子就没有tableid，后面的查询找不到表。
接下来要先获取下每个帖子的图片附件数：
  1. <!--{eval $picount = DB::fetch_all("SELECT aid FROM ".DB::table('forum_attachment_'.$tbid.'')." WHERE `tid`= '$re1[tid]' AND `isimage`=1;");}-->
  2. <!--{eval $picnum = count($picount);}-->
复制代码
得到变量$picnum，直接使用就可以显示图片数，这里拿它做判断：
  1. <!--{if $picnum < 4}-->
  2. <!--{eval $litpicnum = '1';}-->
  3. <!--{elseif $picnum > 3 && $picnum < 8}-->
  4. <!--{eval $litpicnum = '4';}-->
  5. <!--{elseif $picnum > 7}-->
  6. <!--{eval $litpicnum = '8';}-->
  7. <!--{/if}-->
复制代码
大于等于不会写，只好退一步用大于和小于来判断图片数：
如果小于4张，即只有1、2、3张，变量$litpicnum=1。
如果图片大于3张且小于8张，即4、5、6、7张，变量$litpicnum=4。
如果图片大于7张，即8张及8张以上，变量$litpicnum=8。到此为止不再判断，即最多让它显示8张。
这个变量$litpicnum下面要用，作为每帖调用的图片数，即LIMIT 0,$litpicnum
# 说下为何做这个图片数量判断，因为我的测试列表一排最多显示4张图，当图片数量不能铺满一行时，样式不好看。这个判断不能有逻辑错误，否则数量正好赶上空挡就出错。
下面是查询分表的的图片附件地址和aid，条数使用上面经过判断的变量$litpicnum
  1. <!--{eval $covers = DB::fetch_all("SELECT attachment,aid FROM ".DB::table('forum_attachment_'.$tbid.'')." WHERE `tid`= '$re1[tid]' AND `isimage`=1 LIMIT 0,$litpicnum;");}-->
复制代码
判断下，如果只有一张图或多张图，示例：
  1. <!--{if $litpicnum == 1}-->单图列表html<!--{else}-->多图列表html<!--{/if}-->
复制代码
接下来是无图帖子，（对应开始的<!--{if $tbid}-->）
  1. <!--{else}-->无图帖子列表<!--{/if}-->
复制代码
哦，对了还有，帖子标题后面我都加了段代码：
  1. <!--{if !$picnum == 0}--><small><i class="fa fa-image fa-fw"></i><!--{$picnum}--></small><!--{/if}-->
复制代码
如果有图，就显示数量。

总结起来就是两层列表，3层判断：
外有帖子列表，内有帖子图片列表
关于图片列表获得流程：先判断帖子是否有图，有图再获取总张数，根据条件得出想要的数量，再拿这个数量调用图片，获得图片再判断是单张还是多张，单张什么样式、多张什么样式。
204310pf9b5fjhh558bp3n.jpg
==========================更新记录=================================
更新 2016-09-12 21:41

修复图太大加载慢的问题，已加了个生成缩略图代码

更新 2016-09-13 19:44

解决了判断图片数量来控制样式的问题。

更新 2016-09-13 22:31

增加大图预览效果（可惜登录后会发生jq导致弹出失效）。

更新 2016-09-16 08:59

大图预览效果冲突已解决（与插件的jq冲突，关闭了一个群聊插件后正常）。
代码已经更新，需要增加一个css和一个js文件（见附件）。
注意代码里引用路径，我的是扩展图片目录下css和js目录。

更新 2016-09-16 11:58

重帖代码，增加：
1.<!--{eval $res = mysql_query加digest字段查询，以显示精华帖标志。
2.图片列表a标签title，优先图片描述，无描述显示标题（序号）。
3.图片alt和title，优先图片描述，无描述显示标题（序号）。

更新 2016-09-16 15:47

1.增加tag调用。
2.增加“图文”按钮，可用来控制显示或隐藏图片容器（js文件见附件）。

更新 2016-12-22 14:03

增加ajax点击加载更多。
方法：复制一份数据查询和调用部分代码，做成模板，使用自定义单页面可访问的形式。
使用jq代码：
  1. <div id="loading"><p>加载内容（接着列表放）</p></div>
  2. <script>
  3. jQuery(function () {
  4.          var p = {if $_GET['page'] <> ''}$_GET['page']{else}1{/if}; //记录第几页
  5.         jQuery('#loading').click(function () {
  6.              p += 1; //下一页
  7.               jQuery.ajax({
  8.                 url: '自定义php单页文件',
  9.                 data: { page: p },
  10.                 cache: false,
  11.                 dataType: 'html',
  12.                 beforeSend:function(){jQuery("#loading").html("<img src='$_G['style'][styleimgdir]/images/loading.gif' />");},
  13.                 error: function() {jQuery("#loading").text("请求出错，请重试")},
  14.                 success: function (html) {
  15.                     jQuery("#loading").html("<p>加载更多</p>");
  16.                jQuery('#loading').before(html);
  17.               } });
  18.              return false;
  19.          });
  20.              });
  21.      </script>
复制代码

更新 2017-10-28 18:56

修复了当没有附件的时候limit变量获取不到数值导致页面出现错误提示的问题。

调用头像和支持人数只需要很简单的改动。多说点，希望能够让你知道为什么这么做。
在最开始的代码：
  1. <!--{eval $res = mysql_query("SELECT t1.tid,t1.digest,t1.fid,t2.`name`,t1.author,t1.authorid,t1.`subject`,t4.message,t1.views,t1.replies from_unixtime(t1.dateline) as dateline,t3.attachment FROM ".$prefix."forum_thread t1 LEFT OUTER JOIN  ".$prefix."forum_forum t2 ON t1.fid = t2.fid LEFT OUTER JOIN  ".$prefix."forum_threadimage t3 ON t1.tid = t3.tid LEFT OUTER JOIN  ".$prefix."forum_post t4 ON t1.tid = t4.tid WHERE t1.displayorder >- 1<> '' AND t4.`first` > 0 ORDER BY t1.dateline DESC LIMIT $startlimit, $pagesize");}-->
复制代码
这段代码里，共调用了4个表，分表是表t1——pre_forum_thread，t2——pre_forum_forum，t3——pre_forum_threadimage，t4——pre_forum_post，查数据字典可知，帖子支持人数字段是表pre_forum_thread里的recommend_add，用t1代表，那么在SELECT t1.tid,t1.digest,t1.fid,t2.`name`,t1.author,t1.authorid,t1.`subject`,t4.message,t1.views,t1.replies这段里加上个逗号t1.recommend_add即可。
完整即：
  1. <!--{eval $res = mysql_query("SELECT t1.tid,t1.digest,t1.fid,t2.`name`,t1.author,t1.authorid,t1.`subject`,t4.message,t1.views,t1.replies,t1.recommend_add from_unixtime(t1.dateline) as dateline,t3.attachment FROM ".$prefix."forum_thread t1 LEFT OUTER JOIN ".$prefix."forum_forum t2 ON t1.fid = t2.fid LEFT OUTER JOIN ".$prefix."forum_threadimage t3 ON t1.tid = t3.tid LEFT OUTER JOIN ".$prefix."forum_post t4 ON t1.tid = t4.tid WHERE t1.displayorder >- 1<> '' AND t4.`first` > 0 ORDER BY t1.dateline DESC LIMIT $startlimit, $pagesize");}-->
复制代码
以上啰嗦的是帖子支持人数。使用$re1[recommend_add]调用。

至于头像，获取方式灰常简单，在任意页面，只要你能获取到会员的uid，使用
  1. <img src="uc_server/avatar.php?uid=会员UID&size=midlle"/>
复制代码

这样的形式就能获取这个uid的头像，这里已经有了t1.authorid，那么用
  1. <img src="uc_server/avatar.php?uid={$re1[authorid]}&size=midlle"/>
复制代码

可获取这个列表的头像，size=midlle是中等尺寸，size=small是小，size=big是大。最终显示尺寸最好用css来设定。

这是方法之一，这帖太长了，另开一帖写discuz 调用帖子列表带分页+多图显示(之二)。
多图的放大效果css js.zip (4.06 KB, 下载次数: 403) 图文按钮js.zip (613 Bytes, 下载次数: 419)

相关阅读：
discuz 门户文章列表多图显示



discuz，门户，首页，调用，帖子，列表，分页，多图，显示

举报

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块

您需要登录后才可以回帖 立即登录
登录

©2015-2022 tuyuanma.com 版权所有 Sitemap.xml

本站内容皆来自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

联系邮箱：tuyuanma@qq.com 联系QQ：3197813386

返回顶部