很多全站共享的网页如门户页,日志页,论坛页等都有DIY功能,供站长添加各色各样的模块(block)。每个加到页面上去的模块都对应这一个模块分类(如日志模块)和一个模块模板(template)这个模板可以是预先定义的,定义后可以为多个模块所使用。也可以定义在该模块里,仅用于该模块。模板决定了模块的显示形式。Discuz系统给各个模块分类提供了多个模板,比如对日志分类就提供了九个模板。另外Discuz网站的应用中心里有很多第三方提供的模板。建造模板相对容易因为
1)只需对html和css有基本的了解
2)管理中心提供了添加和管理模板的界面 (门户->模块模板)
3)可以直接在模块设置时测试模板
而且和其它网站功能的修改相比是事半而功倍,因为一个简单的修改就可能给网站界面很大的改进。
我们先来看看Discuz系统提供的日志模块的九种模板。
可以看出这些模板的定义非常简单而且类同。如果每个记录显示在一行里的话,用的都是ul-li组合。如果一个记录显示成有层次感的几行的话,用dl-dt-dd组合。除了日志图片幻灯用到了Javascript代码来产生幻灯效果外,其余八种模板都是靠HTML代码和CSS风格的些许不同来产生不同的数据显示效果的。
下面我们来观摩一下N岸N地网站上一些值得称道的模块,看看如何来达到类似的显示效果。
1。双列显示
美中网的博客首页
http://news.sinovision.net/portal.php?mod=list&catid=1 上有多个模块用的是双列显示
要达到这个效果,只需在前述的日志标题+作者模板里对里面出现的 li 加个风格: style="float:left; width: 48%;":
2。突出首篇
Discuz的模块模板语言提供了index标签来让站长对按位置对某条数据做特殊的显示处理,如珍珠湾
http://zhenzhubay.com/portal.php 那样突出最新一篇博文
下面我们在日志标题+作者模板的基础上对第一篇博文添加作者头像:
3。栏目配图
夜夜城 http://yeyeclub.com/portal.php 的好几个栏目里的标题栏右端都有配图,颇为别致
有三种方式可以达到类似的效果:
1)添加多个标题: 模块可以有多个标题 (在标题窗口里点击'添加新标题'),比如我们可以放一个文字标题在标题栏的左侧,再放一个图片标题在标题栏的右侧。
2)自定义内容: 与设置标题相比,还有一种自由度更大的设置模块顶部的办法:在属性->模块属性的底部点击'编辑自定义内容',在那里加入的HTML内容会出现在模块顶部。
3)嵌入模块模板: 我们还可以把顶部放在模块模板里,效果和前者类似,自由度还更大些,更容易将顶部和内容融为一体。缺点是一般顶部不是通用的,所以这样写的模板往往只适用于单个模块。
下面是第三种方法的又一例子,它不容易用其它方法来实现。
4。嵌字套框
快乐之城社区演示站 http://182.92.223.135/86/
要达到这个效果,只需在前述的日志标题+作者+简介模板的最外层套个fieldset,并在其中的legend里加上标题 (去掉原来设在模块标题上的文字):
|
|
一些注意事项:
1。模块的外边距(margin)有默认值是10px,尽管这值没在性质窗口里显示。
2。框架的边框有默认值1px, 如果不要边框要在大小那设成0px。
3。图片(如标题图片和背景图片)可以是站内图片,那么只需填写相对地址(如 /static/image/common/ad.gif),也可以是其它网站的图片。
4。虽然日志里可以加网络上的图片,但这样的图片不会被选为日志图片出现在模块里。
5。如果模板里显示日志图片,最好在模块属性里过滤掉无图日志,不然会出现一个小相机照。一种解决办法见 http://www.phpjyz.com/article-130.html
参考文献:
1。 starting with HTML + CSS http://www.w3.org/Style/Examples/011/firstcss.en.html
2。 DIY 使用指导 http://faq.comsenz.com/library/diy/diyuse/diyuse_index.htm