Discuz 发展这么多年，四格这个插件一直陪伴着我左右。不过随着 Discuz 论坛的发展，DIY功能越来越强大，我们已经可以抛弃这个插件了。自己手动做出各式各样的四格。今天 Forece 写个教程，一来是为了自己做个笔记，二来是为了帮助一些对 DIY 还不熟悉的朋友了解怎么制作。
无TAB版四格
首先，来看下效果图
1、添加一个1:1框架
2、再添加两个1:1框架分别放到之前的1:1框架
3、添加四个自定义HTML静态模块
1 2 3 4 5 | <table cellspacing="0" cellpadding="0" width="100%" align="center"> <tr style="border-right:1px solid #CDCDCD;"> <td align="center" valign="middle" style="text-align:center;height:31px;border:1px solid #CDCDCD;border:1px solid #CDCDCD;background:#F2F2F2;"><h3>自定义标题</h3></td> </tr> </table> |
4、然后添加帖子模块即可
只不过数据来源需要选择高级自定义，这样才会有 “获得高亮值” 这个选项哟。
5、然后编辑帖子模块样式
6、另外帖子模块的模板也需要修改一下
1 2 3 4 5 6 7 | <div class="module cl xl xl1"> <ul> [loop] <li><em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em><img src="template/default/top10/{currentorder}.gif" /><a href="{url}" title="{title}"{target}>{title}</a></li> [/loop] </ul> </div> |
最后将自己制作的10个数字图标放到 default 下 top10 文件夹中即可。
附一个自己制作的top10图标下载地址：
宋体
最后再附 DIY 导入文件一枚
forum-discuz
TAB版四格
1. 首先在首页添加一个1-3框架，然后左侧放一个帖子模块，显示样式为幻灯，大小根据自己的模板设置。然后右侧放一个Tab框架，如图所示：
2. 然后往右侧Tab框架里边添加帖子模块。注意写上模块标题。如图所示：
3. 小修改一下模块模板，让他显示作者和排序。
1 2 3 4 5 6 7 | <div class="module cl xl xl1"> <ul> [loop] <li><em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em><img src="template/default/top10/{currentorder}.gif" /><a href="{url}" title="{title}"{target}>{title}</a></li> [/loop] </ul> </div> |
4. 设置Tab框架的左侧外边距为10px
5. Tab框架标题下边有个切换标签类型，一个是点击，一个是划过。一般四格都是划过实现切换效果。默认是点击的，这里我们把切换类型改为划过。
6. Tab框架左侧多处来一点空间，而一般的四格都是整齐顶着边框排列的。这里需要修改一下CSS。在模板的 extend_common.css 中加入下边代码
1 2 | .frame-tab .tb{padding-left:0px;} .tb{padding-left:0px;} |
7. 然后把框架标题删除，后台刷新模板缓存，整体效果如下：
