找回密码
 立即注册
搜索

    途迹耕耘

    Powered by Discuz! X3.5

    © 2001-2024 Discuz! Team.

    GMT+8, 2025-12-22 07:19 , Processed in 0.124471 second(s), 13 queries .

    返回列表 发新帖

    [DZ教程] discuz x3.2为主导航各栏目前增加图标

    [复制链接]
    bdk 发表于 2020-5-2 11:48:57 | 显示全部楼层 |阅读模式
    先做说明再贴代码。
    这和之前贴的分页效果是相同的，因为加了多图调用，所以再贴一下。
    模板代码中使用了font awesome 4.5.0图标。
    本帖持续更新，不断完善，没贴css，太长。
    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层判断：
    外有帖子列表，内有帖子图片列表
    关于图片列表获得流程：先判断帖子是否有图，有图再获取总张数，根据条件得出想要的数量，再拿这个数量调用图片，获得图片再判断是单张还是多张，单张什么样式、多张什么样式。



    ==========================更新记录=================================
    更新 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变量获取不到数值导致页面出现错误提示的问题。


    回复

    举报

    返回列表 发新帖