Discuz 手动DIY美化四格+显示高亮帖子方法

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