更漂亮的首页四格效果【完整代码已提供】（喜欢你就顶一下吧）6月1日更新

演示效果： http://www.yelia.com/bbs/

非AD。如果不想送IP的话，请看附件图中的演示效果~



代码很简单，只是在表格中加入两个背景图片即可。为了与背景图片相适应，指定了表格的行高

1. <td width="24" background="images/yelia/nature/rank.gif"></td>
   
2. <td background="images/yelia/nature/rankbg.gif" style="line-height:26px" valign="top">

复制代码

之前想给每一条最新TOP10的前面加一个序号图片，研究了很久代码，因为对php不熟所以失败了。后来采用了Maxspead模板的显示方法，直接用背景图来显示。
这样的方法是比较简单。你也可以把这个设置加入到css.html中去，再在discuz.html里使用指定的样式即可。

可能有人对这样每行的行高不满意，，，我给大家另外做了一套 20px 行高的图，自己选择使用即可~ 顺便把代码里的“ line-height:26px ”改为“ line-height:20px ”......

个人感觉这样还是比较漂亮的。当然，要根据各自的论坛的风格，气质来决定四格的显示效果。。。这里只是提供了一种思路。


哦，对了，，没有安装首页四格的朋友，我不必再重复了。在插件区随便搜索一下就能找到好多个教程。都差不多的啦~



【5月7日补充】

首页四格的插件已经有好些版本了，在插件区一搜就能找到。由于原作者不是我，所以我也没有直接帖出，以占据他人的功劳。。我只是提供了一种显示效果的方法而已。。。

但是楼下好些兄弟看来没有装这个插件？那好吧，确实需要的话，我晚上整理一下，把我自己的修改方法帖上来供参考~`当然插件版权还是属于原作者`````
我自己采用的四格是直接调用的方法，不是最新的那种cache缓存的版本。因为这样对文件的改动最少。以后升级的时候也方便点~~采用Cache版首页四格的兄弟也同样可以用这个思路加上背景图``````

PS：不要再说我AD啦，，，我很冤哦~


【完整的四格修改方法】

一.  上传附件包中的文件至你自己的论坛目录中。其中pic.php可以用记事本打开，在开头部位根据你自己的需要调整参数。另外，寻找以下代码以调整你实际想要显示的Flash动画的尺寸：

1. var focus_width=250        （这是Flash动画的宽度）
   
2. var focus_height=220               （这是Flash动画的高度）
   
3. var text_height=20           （这是其中的文字链接部分的高度。尽量采用偶数以免显示不完整）

复制代码

并且，上传两个背景图rank.gif和rankbg.gif到images目录中，你想要安装首页四格的那个风格模板的图片目录下~


二.  修改文件两个index.php 以及任意模板中的 discuz.htm

    1.  index.php

         找到：

1. $memberenc = rawurlencode($lastmember);
   
2. $newthreads = round(($timestamp - $lastvisit + 600) / 1000) * 1000;

复制代码

         在下面添加：

1. //四格代码//
   
2. $colorarray = array('', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple', 'gray');
   
3. //新贴//
   
4. $hack_cut_str =28; //修改标题显示字数
   
5. $hack_cut_strauthor = 9;
   
6. $new_post_threadlist = array();
   
7. $nthread = array();
   
8. $query = $db->query("SELECT t.*, f.name FROM {$tablepre}threads t, {$tablepre}forums f WHERE t.fid<>'$fid' AND f.fid=t.fid AND t.displayorder>='0' ORDER BY t.dateline DESC LIMIT 0, 10");
   
9. while($nthread = $db->fetch_array($query)) {
   
10.         $nthread['forumname'] = ereg_replace('<[^>]*>','',$nthread['name']);
    
11.         $nthread['view_subject'] = cutstr($nthread['subject'],$hack_cut_str);
    
12.         $nthread['view_author'] = cutstr($nthread['author'],$hack_cut_strauthor);
    
13.         $nthread['date']= gmdate("$dateformat $timeformat", $nthread['dateline'] + $timeoffset * 3600);
    
14.         $nthread['lastreplytime']= gmdate("$dateformat $timeformat", $nthread[lastpost] + ($timeoffset * 3600));
    
15.         if($nthread['highlight']) {
    
16.                 $string = sprintf('%02d', $nthread['highlight']);
    
17.                 $stylestr = sprintf('%03b', $string[0]);
    
18.                 $nthread['highlight'] = 'style="';
    
19.                 $nthread['highlight'] .= $stylestr[0] ? 'font-weight: bold;' : '';
    
20.                 $nthread['highlight'] .= $stylestr[1] ? 'font-style: italic;' : '';
    
21.                 $nthread['highlight'] .= $stylestr[2] ? 'text-decoration: underline;' : '';
    
22.                 $nthread['highlight'] .= $string[1] ? 'color: '.$colorarray[$string[1]] : '';
    
23.                 $nthread['highlight'] .= '"';
    
24.         } else {
    
25.                 $nthread['highlight'] = '';
    
26.         }
    
27.         $new_post_threadlist[] = $nthread;
    
28. }
    
29. //新贴//
    
30. //回覆//
    
31. $hack_cut_str = 28; //修改标题显示字数
    
32. $hack_cut_strauthor = 9;
    
33. $new_reply_threadlist = array();
    
34. $rthread = array();
    
35. $query = $db->query("SELECT t.*, f.name FROM {$tablepre}threads t, {$tablepre}forums f WHERE t.fid<>'$fid' AND f.fid=t.fid AND t.displayorder>='0' AND t.closed NOT LIKE 'moved|%' AND t.replies !=0 ORDER BY t.lastpost DESC LIMIT 0, 10");
    
36. while($rthread = $db->fetch_array($query)) {
    
37.         $rthread['forumname'] = ereg_replace('<[^>]*>','',$rthread['name']);
    
38.         $rthread['view_subject'] = cutstr($rthread['subject'],$hack_cut_str);
    
39.         $rthread['view_lastposter'] = cutstr($rthread['lastposter'],$hack_cut_strauthor);
    
40. $rthread['date']= gmdate("$dateformat $timeformat", $rthread['dateline'] + $timeoffset * 3600);
    
41.         $rthread['lastreplytime']= gmdate("$dateformat $timeformat", $rthread[lastpost] + ($timeoffset * 3600));
    
42.         if($rthread['highlight']) {
    
43.                 $string = sprintf('%02d', $rthread['highlight']);
    
44.                 $stylestr = sprintf('%03b', $string[0]);
    
45.                 $rthread['highlight'] = 'style="';
    
46.                 $rthread['highlight'] .= $stylestr[0] ? 'font-weight: bold;' : '';
    
47.                 $rthread['highlight'] .= $stylestr[1] ? 'font-style: italic;' : '';
    
48.                 $rthread['highlight'] .= $stylestr[2] ? 'text-decoration: underline;' : '';
    
49.                 $rthread['highlight'] .= $string[1] ? 'color: '.$colorarray[$string[1]] : '';
    
50.                 $rthread['highlight'] .= '"';
    
51.         } else {
    
52.                 $rthread['highlight'] = '';
    
53.         }
    
54.         $new_reply_threadlist[] = $rthread;
    
55. }
    
56. //回覆//
    
57. //热帖//
    
58. $hack_cut_str = 30; //修改标题显示字数
    
59. $hack_cut_strauthor = 10; //热贴指定天数//
    
60. $this_time= time();
    
61. $sort_time = $today - ( 60*60*24*7); //括号最后一位数代表x天内
    
62. $new_hot_threadlist = array();
    
63. $mthread = array();
    
64. $query = $db->query("SELECT t.*, f.name FROM {$tablepre}threads t, {$tablepre}forums f WHERE t.fid<>'$fid' AND f.fid=t.fid AND t.displayorder>='0' AND t.closed NOT LIKE 'moved|%' AND t.replies !=0 and t.dateline > $sort_time ORDER BY t.views DESC LIMIT 0, 10"); //修改显示帖子条数
    
65. while($mthread = $db->fetch_array($query)) {
    
66.         $mthread['forumname'] = ereg_replace('<[^>]*>','',$mthread['name']);
    
67.         $mthread['view_subject'] = cutstr($mthread['subject'],$hack_cut_str);
    
68.         $mthread['view_lastposter'] = cutstr($mthread['lastposter'],$hack_cut_strauthor);
    
69. $mthread['date']= gmdate("$dateformat $timeformat", $mthread['dateline'] + $timeoffset * 3600);
    
70.         $mthread['lastreplytime']= gmdate("$dateformat $timeformat", $mthread[lastpost] + ($timeoffset * 3600));
    
71.         if($mthread['highlight']) {
    
72.                 $string = sprintf('%02d', $mthread['highlight']);
    
73.                 $stylestr = sprintf('%03b', $string[0]);
    
74.                 $mthread['highlight'] = 'style="';
    
75.                 $mthread['highlight'] .= $stylestr[0] ? 'font-weight: bold;' : '';
    
76.                 $mthread['highlight'] .= $stylestr[1] ? 'font-style: italic;' : '';
    
77.                 $mthread['highlight'] .= $stylestr[2] ? 'text-decoration: underline;' : '';
    
78.                 $mthread['highlight'] .= $string[1] ? 'color: '.$colorarray[$string[1]] : '';
    
79.                 $mthread['highlight'] .= '"';
    
80.         } else {
    
81.                 $mthread['highlight'] = '';
    
82.         }
    
83.         $new_hot_threadlist[] = $mthread;
    
84. }
    
85. //热帖//
    
86. //四格代码结束//

复制代码

说明：① 这里为了适应背景图，都调整为了10条。② 根据你的模板的实际宽度，调整标题显示字数以避免出现换行，与背景图错位。


   2.  discuz.htm

        在这里，建议不要对默认风格default目录中的 discuz.htm 进行修改。因为这是公用的默认模板文件。还是选择自己的其他风格的discuz.htm比较好：）

        在discuz.htm中找个合适的位置来放首页四格的代码。比如我的论坛是放在“X-Space个人空间热点导读”的下面，那么就找到代码

1. <!--{if $supe['status'] && $supe['items']['status'] && $_DCACHE['supe_updateitems']}-->
   
2.         <div style="clear: both; margin-top: 5px;">
   
3.         <div class="spaceborder" style="width: {TABLEWIDTH}">
   
4.         <table cellspacing="0" border="0" cellpadding="{TABLESPACE}" width="100%" style="table-layout: fixed;">
   
5.         <tr><td colspan="$supe[items][columns]" class="header" style="padding-left:20px">
   
6.         <div class="subtable" style="padding: 0px"><a href="$supe[siteurl]" target="_blank">{lang supe_updateitems}</a></div>
   
7.         </td></tr>
   
8.         <script language="javascript">document.write('$_DCACHE[supe_updateitems]');</script></table>
   
9.         </div><br></div>
   
10. <!--{/if}-->

复制代码

在下面添加

1. <!--首页四格开始-->
   
2.   <div class="spaceborder spacebottom" style="width: {TABLEWIDTH}; clear: both; margin-top: 5px;">
   
3.     <table cellspacing="{INNERBORDERWIDTH}" cellpadding="{TABLESPACE}" width="100%" align="center">
   
4.     <tr class="header">
   
5.     <td width="30%"><a href="#" onclick="toggle_collapse('top10');"><b>&raquo; 图片推荐</b></a></td>
   
6.     <td width="24%"><a href="#" onclick="toggle_collapse('top10');"><b>&raquo; 最新主题</b></a></td>
   
7.     <td width="24%"><a href="#" onclick="toggle_collapse('top10');"><b>&raquo; 最新回复</b></a></td>
   
8.     <td width="20%"><a href="#" onclick="toggle_collapse('top10');"><b>&raquo; 本周热点</b></a></td>
   
9.     <td><div class="right"><a href="#" onclick="toggle_collapse('top10');"><img id="top10_img" src="{IMGDIR}/collapsed_no.gif" border="0" alt="" /></a>&nbsp;</div></td>
   
10.   </tr>
    
11. <tbody id="top10">
    
12.   <tr>
    
13.     <td align="middle" valign="bottom"><iframe src="pic.php" width="270" height="250" frameborder=0 scrolling=no marginwidth="8" marginheight="8"></iframe>
    
14.     </td>
    
15.     <td valign="top">
    
16.      <div>
    
17.       <table border="0" cellpadding="0" cellspacing="0" width="100%">
    
18.       <tbody>
    
19.         <tr>
    
20.           <td width="24" background="{IMGDIR}/rank.gif"></td>
    
21.           <td background="{IMGDIR}/rankbg.gif" style="line-height:26px" valign="top">
    
22.         <!--{loop $new_post_threadlist $nthread}-->
    
23.                 <!--{if $nthread[replies]}-->
    
24.                   <a href="viewthread.php?tid=$nthread[tid]" $nthread['highlight'] title="论坛： $nthread[forumname]{LF}主题： $nthread[subject] {LF}作者： $nthread[author]{LF}发表： $nthread[date]{LF}点击： $nthread[views] {LF}回复： $nthread[replies] {LF}更新： $nthread[lastposter]{LF}时间： $nthread[lastreplytime]" >$nthread[view_subject]</a><br>
    
25.                 <!--{else}-->
    
26.                   <a href="viewthread.php?tid=$nthread[tid]" $nthread['highlight'] title="论坛： $nthread[forumname]{LF}主题： $nthread[subject] {LF}作者： $nthread[author]{LF}发表： $nthread[date]{LF}点击： $nthread[views] {LF}回复： $nthread[replies] {LF}更新： 暂时没有回复" >$nthread[view_subject]</a><br>
    
27.                 <!--{/if}-->
    
28.         <!--{/loop}-->
    
29.           </td>
    
30.         </tr>
    
31.       </tbody>
    
32.       </table>
    
33.      </div>
    
34.     </td>
    
35.     <td valign="top">
    
36.      <div>
    
37.       <table border="0" cellpadding="0" cellspacing="0" width="100%">
    
38.       <tbody>
    
39.         <tr>
    
40.           <td width="24" background="{IMGDIR}/rank.gif"></td>
    
41.           <td background="{IMGDIR}/rankbg.gif" style="line-height:26px" valign="top">
    
42.         <!--{loop $new_reply_threadlist $rthread}-->
    
43.                 <a href="viewthread.php?tid=$rthread[tid]" $rthread['highlight'] title="论坛： $rthread[forumname]{LF}主题： $rthread[subject]{LF}作者： $rthread[author]{LF}发表： $rthread[date]{LF}点击： $rthread[views] {LF}回复： $rthread[replies] {LF}更新： $rthread[lastposter]{LF}时间： $rthread[lastreplytime]">$rthread[view_subject]</a><br>
    
44.         <!--{/loop}-->
    
45.           </td>
    
46.         </tr>
    
47.       </tbody>
    
48.       </table>
    
49.      </div>
    
50.     </td>
    
51.     <td colspan="2" valign="top">
    
52.      <div>
    
53.       <table border="0" cellpadding="0" cellspacing="0" width="100%">
    
54.       <tbody>
    
55.         <tr>
    
56.           <td width="24" background="{IMGDIR}/rank.gif"></td>
    
57.           <td background="{IMGDIR}/rankbg.gif" style="line-height:26px" valign="top">
    
58.         <!--{loop $new_hot_threadlist $mthread}-->
    
59.                 <a href="viewthread.php?tid=$mthread[tid]" $mthread['highlight'] title="论坛： $mthread[forumname]{LF}主题： $mthread[subject]{LF}作者： $mthread[author]{LF}发表： $mthread[date]{LF}点击： $mthread[views] {LF}回复： $mthread[replies] {LF}更新： $mthread[lastposter]{LF}时间： $mthread[lastreplytime]">$mthread[view_subject]</a><br>
    
60.         <!--{/loop}-->
    
61.           </td>
    
62.         </tr>
    
63.       </tbody>
    
64.       </table>
    
65.      </div>
    
66.     </td>
    
67.   </tr>
    
68. </tbody>
    
69. </table>
    
70. </div>
    
71. <br>
    
72. <!--首页四格结束-->

复制代码

说明：这里的显示效果就根据自己的论坛风格去做实际调整了。
①  <iframe src="pic.php" width="270" height="250" frameborder=0 scrolling=no marginwidth="8" marginheight="8"></iframe>
这里是调整第一栏“图片推荐”的显示尺寸和效果~
②  <td background="{IMGDIR}/rankbg.gif" style="line-height:26px" valign="top">
如果你采用的是20px行高的那两个图片，这里就修改为 “line-height:20px” 就可以了。共三处。


补充说明：

一.  如果采用论坛后台生成的js调用来显示新帖等等数据，肯定会更少消耗资源，速度更快，而且不用改动index.php 。我还没找到怎么用js调用来显示最新回复的方法，所以就暂时还是按原插件进行；
二.  论坛热帖这里，也可以改为显示最新精华TOP10 。如有需要的朋友请向我索取代码；
三.  首页四格插件版权归原作者所有。

5月26日更新内容：

在启动rewrite静态化地址功能的情况下，四格中图片调用的地址仍然是默认的原始地址，与其他地方不一致。这点想必不够完美。因此，增加图片调用地址也可以静态化的小调整。在关闭帖子静态化功能后会自动恢复默认格式。：

打开pic.php，找到：

1. $data['pic'][$pic[aid]]['showpiclinks'] = "viewthread.php?tid=$pic[tid]";

复制代码

改为

1.                 if (in_array($rewritestatus, array(2, 3))) {
   
2.                         $data['pic'][$pic[aid]]['showpiclinks'] = "thread-$pic[tid]-1-1.html";
   
3.                 } else {
   
4.                         $data['pic'][$pic[aid]]['showpiclinks'] = "viewthread.php?tid=$pic[tid]";
   
5.                 }

复制代码

附件包已更新。

6月1日更新内容
经过管理员 liuqiang 指正，修复了四格中会将“待审核的主题”和“回收站中的主题”直接显示出来的bug。现在帖子被审核通过前以及被删除后都不会在首页显示。

PS：再次说明，该插件作者不是我。因此这个小BUG也是原插件延续下来的

修正方法：

在之前的教程中，添加到index.php的代码里，找到三处

1. WHERE t.fid<>'$fid' AND f.fid=t.fid

复制代码

后面添加：

1. AND t.displayorder>='0'

复制代码

共三处。注意用空格与前后代码分离开。

原教程已更新。

[ 本帖最后由 阿喀琉斯 于 2007-6-1 14:52 编辑 ]

自己占一楼了，呵呵~

我赶紧支持，呵呵，感觉比较不错。顺便到你网站看看。
补充一下：请楼主把代码加的具体位置说清楚好吗？是不是在discuz.html里面加的呀？谢谢，呵呵

[ 本帖最后由 yzwei666 于 2007-5-8 00:41 编辑 ]

顶一个，确实比我现在用的这个美观些。不过问lz以下，你这个flash支不支持远程图片调用还是只能调用附件？

顶一个，确实比我现在用的这个美观些

支持啊~！~！~！支持~！~！~！漂亮~！~！·1

www.54sk.com


楼主 打个包 提供下载吧~！~！~！谢谢了。。。。

代码到底是要加在那个文件里.或者是加在哪行

谢谢楼主分享，正看着呢，先顶一下

非常喜欢，LZ的论坛风格也很漂亮，不知道能不能分享一下啊，呵呵，谢谢啊！
还有就是，LZ说的代码放在什么位置啊？

支持,很好

很漂亮!!