Discuz 发展这么多年，四格这个插件一直陪伴着我左右。不过随着 Discuz 论坛的发展，DIY功能越来越强大，我们已经可以抛弃这个插件了。自己手动做出各式各样的四格。今天 Forece 写个教程，一来是为了自己做个笔记，二来是为了帮助一些对 DIY 还不熟悉的朋友了解怎么制作。

无TAB版四格

首先，来看下效果图

discuz diy四格-1

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、然后编辑帖子模块样式

discuz diy四格-4

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框架，如图所示：
tabgrid-1

2. 然后往右侧Tab框架里边添加帖子模块。注意写上模块标题。如图所示：
tabgrid-2

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
tabgrid-3

5. Tab框架标题下边有个切换标签类型，一个是点击，一个是划过。一般四格都是划过实现切换效果。默认是点击的，这里我们把切换类型改为划过。
tabgrid-4

6. Tab框架左侧多处来一点空间，而一般的四格都是整齐顶着边框排列的。这里需要修改一下CSS。在模板的 extend_common.css 中加入下边代码

1
2
.frame-tab .tb{padding-left:0px;}
.tb{padding-left:0px;}

7. 然后把框架标题删除，后台刷新模板缓存，整体效果如下：
tabgrid-5

打赏分享