如何制作漂亮的 Discuz 的 DIY 聚焦视图

看到很多 Discuz 模板做的首页 Portal 图片聚焦都是美伦美央的,于是 Forece 就研究了一下。然后就有了这篇帖子。看起来很难,其实很容易。主要就是CSS。配合模块模板。

首先看下效果图。然后我们在一步一步来。

discuz-image

1. 首先在首页模板文件那插一个 DIY 代码,具体怎么做请参考之前 Forece 写的 Discuz 如何仿站的教程。

1
<!--[diy=portal_image_block]--><div id="portal_image_block" class="area"></div><!--[/diy]-->

2. 在 DIY 处添加一个 100% 框架
1-1-1框架

3. 然后开始往里边扔帖子模块(当然你也可以用文章模块),模块标识可以用视图左01,视图左02,视图中01,视图中02,视图右01,视图右02这种容易辨识的名称。必须包含图片附件选择是,要不然很多帖子就会没图啦。显示样式选择帖子图片列表。缩略图宽度218,高度128。这个根据自己模板自己修改。显示条数4个。然后我们的第一个模块就出来了。很丑是不是,不要紧,我们还没做CSS,需要先把内容填充起来。
帖子图片列表模块

4. 然后以此类推,我们把剩下的模块也照猫画虎做出来。图片大小 Forece 这里给大家一个参考,左下角大图是宽度448,高度270。中间图片宽度216,高度270。都做完如下图所示。
帖子图片列表模块-1

5. 非常恶心是不是,而且显示的都是从第一个帖子开始显示的。我们需要调整一下起始行数,注意,Discuz起始行数是从0开始计算的,也就是说如果你想从第10张图片开始显示,那么起始数据行数应该填9。
帖子图片列表模块-2

6. 然后打开模板中的 extend_common.css,加入下边代码

1
2
3
4
5
6
7
8
9
10
11
12
/*Portal Image Code*/
.forece .title {margin-left:10px; margin-right:10px; height:40px;line-height:40px;border-bottom:1px solid #ed8163;padding:0px;background:none;}
.forece .titletext {font-size:18px;font-family:Microsoft Yahei;font-weight:700;}
.forece .block {margin:0px;}
.forece .frame-1-1-1-l{ width:470px;}
.forece .frame-1-1-1-c{ width:216px;}
.forece .frame-1-1-1-r{ width:460px;}
.forece li{ padding:0px; margin-right:12px; margin-top:12px; position:relative;}
.forece li p{position:absolute;height:60px;line-height:60px;bottom:0px; left:0px;background:rgba(0, 0, 0, 0.5);white-space:normal;-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=50);opacity: 0;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.forece li:hover p{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=70);opacity: 1;}
.forece li p a{ font-size:16px; color:#fff; display:block; padding:0 15px;}
.forece li:hover p a{ text-decoration:underline;}

7. 然后调整模板1-1-1框架模板的样式,指定class填写forece
discuz聚焦视图

8. 然后将1-1-1框架的标题改成图片聚焦,把边框改为0px

9. 最后到后台刷新缓存,再回到首页刷新,见证奇迹的时刻~~,貌似还有一些小瑕疵,自己修改一下外边距就可以了。

10. 今天的教程到此结束~ 请根据自己模板自行调整宽度以及边距。