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

阿喀琉斯 · 发表于 2007-5-7 02:11:28

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

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

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

<td width="24" background="images/yelia/nature/rank.gif"></td>
<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动画的尺寸：

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

复制代码

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

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

1.  index.php

      找到：

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

复制代码

在下面添加：

//四格代码//
$colorarray = array('', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple', 'gray');
//新贴//
$hack_cut_str =28; //修改标题显示字数
$hack_cut_strauthor = 9;
$new_post_threadlist = array();
$nthread = array();
$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");
while($nthread = $db->fetch_array($query)) {
$nthread['forumname'] = ereg_replace('<[^>]*>','',$nthread['name']);
$nthread['view_subject'] = cutstr($nthread['subject'],$hack_cut_str);
$nthread['view_author'] = cutstr($nthread['author'],$hack_cut_strauthor);
$nthread['date']= gmdate("$dateformat $timeformat", $nthread['dateline'] + $timeoffset * 3600);
$nthread['lastreplytime']= gmdate("$dateformat $timeformat", $nthread[lastpost] + ($timeoffset * 3600));
if($nthread['highlight']) {
$string = sprintf('%02d', $nthread['highlight']);
$stylestr = sprintf('%03b', $string[0]);
$nthread['highlight'] = 'style="';
$nthread['highlight'] .= $stylestr[0] ? 'font-weight: bold;' : '';
$nthread['highlight'] .= $stylestr[1] ? 'font-style: italic;' : '';
$nthread['highlight'] .= $stylestr[2] ? 'text-decoration: underline;' : '';
$nthread['highlight'] .= $string[1] ? 'color: '.$colorarray[$string[1]] : '';
$nthread['highlight'] .= '"';
} else {
$nthread['highlight'] = '';
}
$new_post_threadlist[] = $nthread;
}
//新贴//
//回覆//
$hack_cut_str = 28; //修改标题显示字数
$hack_cut_strauthor = 9;
$new_reply_threadlist = array();
$rthread = array();
$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");
while($rthread = $db->fetch_array($query)) {
$rthread['forumname'] = ereg_replace('<[^>]*>','',$rthread['name']);
$rthread['view_subject'] = cutstr($rthread['subject'],$hack_cut_str);
$rthread['view_lastposter'] = cutstr($rthread['lastposter'],$hack_cut_strauthor);
$rthread['date']= gmdate("$dateformat $timeformat", $rthread['dateline'] + $timeoffset * 3600);
$rthread['lastreplytime']= gmdate("$dateformat $timeformat", $rthread[lastpost] + ($timeoffset * 3600));
if($rthread['highlight']) {
$string = sprintf('%02d', $rthread['highlight']);
$stylestr = sprintf('%03b', $string[0]);
$rthread['highlight'] = 'style="';
$rthread['highlight'] .= $stylestr[0] ? 'font-weight: bold;' : '';
$rthread['highlight'] .= $stylestr[1] ? 'font-style: italic;' : '';
$rthread['highlight'] .= $stylestr[2] ? 'text-decoration: underline;' : '';
$rthread['highlight'] .= $string[1] ? 'color: '.$colorarray[$string[1]] : '';
$rthread['highlight'] .= '"';
} else {
$rthread['highlight'] = '';
}
$new_reply_threadlist[] = $rthread;
}
//回覆//
//热帖//
$hack_cut_str = 30; //修改标题显示字数
$hack_cut_strauthor = 10; //热贴指定天数//
$this_time= time();
$sort_time = $today - ( 60*60*24*7); //括号最后一位数代表x天内
$new_hot_threadlist = array();
$mthread = array();
$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"); //修改显示帖子条数
while($mthread = $db->fetch_array($query)) {
$mthread['forumname'] = ereg_replace('<[^>]*>','',$mthread['name']);
$mthread['view_subject'] = cutstr($mthread['subject'],$hack_cut_str);
$mthread['view_lastposter'] = cutstr($mthread['lastposter'],$hack_cut_strauthor);
$mthread['date']= gmdate("$dateformat $timeformat", $mthread['dateline'] + $timeoffset * 3600);
$mthread['lastreplytime']= gmdate("$dateformat $timeformat", $mthread[lastpost] + ($timeoffset * 3600));
if($mthread['highlight']) {
$string = sprintf('%02d', $mthread['highlight']);
$stylestr = sprintf('%03b', $string[0]);
$mthread['highlight'] = 'style="';
$mthread['highlight'] .= $stylestr[0] ? 'font-weight: bold;' : '';
$mthread['highlight'] .= $stylestr[1] ? 'font-style: italic;' : '';
$mthread['highlight'] .= $stylestr[2] ? 'text-decoration: underline;' : '';
$mthread['highlight'] .= $string[1] ? 'color: '.$colorarray[$string[1]] : '';
$mthread['highlight'] .= '"';
} else {
$mthread['highlight'] = '';
}
$new_hot_threadlist[] = $mthread;
}
//热帖//
//四格代码结束//

复制代码

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

2.  discuz.htm

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

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

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

复制代码

在下面添加

<div class="spaceborder spacebottom" style="width: {TABLEWIDTH}; clear: both; margin-top: 5px;">
<table cellspacing="{INNERBORDERWIDTH}" cellpadding="{TABLESPACE}" width="100%" align="center">
<tr class="header">
<td width="30%"><a href="#" onclick="toggle_collapse('top10');"><b>» 图片推荐</b></a></td>
<td width="24%"><a href="#" onclick="toggle_collapse('top10');"><b>» 最新主题</b></a></td>
<td width="24%"><a href="#" onclick="toggle_collapse('top10');"><b>» 最新回复</b></a></td>
<td width="20%"><a href="#" onclick="toggle_collapse('top10');"><b>» 本周热点</b></a></td>
<td><div class="right"><a href="#" onclick="toggle_collapse('top10');"><img id="top10_img" src="{IMGDIR}/collapsed_no.gif" border="0" alt="" /></a> </div></td>
</tr>
<tbody id="top10">
<tr>
<td align="middle" valign="bottom"><iframe src="pic.php" width="270" height="250" frameborder=0 scrolling=no marginwidth="8" marginheight="8"></iframe>
</td>
<td valign="top">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="24" background="{IMGDIR}/rank.gif"></td>
<td background="{IMGDIR}/rankbg.gif" style="line-height:26px" valign="top">
<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>
<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>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td valign="top">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="24" background="{IMGDIR}/rank.gif"></td>
<td background="{IMGDIR}/rankbg.gif" style="line-height:26px" valign="top">
<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>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td colspan="2" valign="top">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="24" background="{IMGDIR}/rank.gif"></td>
<td background="{IMGDIR}/rankbg.gif" style="line-height:26px" valign="top">
<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>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<br>

复制代码

说明：这里的显示效果就根据自己的论坛风格去做实际调整了。
①  <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，找到：

$data['pic'][$pic[aid]]['showpiclinks'] = "viewthread.php?tid=$pic[tid]";
复制代码

改为

            if (in_array($rewritestatus, array(2, 3))) {

                     $data['pic'][$pic[aid]]['showpiclinks'] = "thread-$pic[tid]-1-1.html";

            } else {

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

            }
复制代码

附件包已更新。

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

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

修正方法：

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

WHERE t.fid<>'$fid' AND f.fid=t.fid
复制代码

后面添加：

AND t.displayorder>='0'
复制代码

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

原教程已更新。

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

阿喀琉斯 · 发表于 2007-5-7 02:12:17

自己占一楼了，呵呵~

yzwei666 · 发表于 2007-5-7 02:18:45

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

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

chn_ping · 发表于 2007-5-7 02:47:58

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

【兄弟合租】 · 发表于 2007-5-7 02:50:53

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

泡泡小新 · 发表于 2007-5-7 07:53:19

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

www.54sk.com

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

yitlong · 发表于 2007-5-7 08:38:59

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

deek · 发表于 2007-5-7 08:42:47

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

ok196 · 发表于 2007-5-7 08:58:54

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

willerce · 发表于 2007-5-7 09:17:06

支持,很好

很漂亮!!

		自动登录	找回密码
密码			立即注册