立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] https://github.com/txgz999/discuz/wiki

日志

Discuz系统学习:模块设置和模板定义

热度 2已有 3310 次阅读2015-5-23 02:12 PM |个人分类:Discuz

很多全站共享的网页如门户页,日志页,论坛页等都有DIY功能,供站长添加各色各样的模块(block)。每个加到页面上去的模块都对应这一个模块分类(如日志模块)和一个模块模板(template)这个模板可以是预先定义的,定义后可以为多个模块所使用。也可以定义在该模块里,仅用于该模块。模板决定了模块的显示形式。Discuz系统给各个模块分类提供了多个模板,比如对日志分类就提供了九个模板。另外Discuz网站的应用中心里有很多第三方提供的模板。建造模板相对容易因为
1)只需对html和css有基本的了解
2)管理中心提供了添加和管理模板的界面 (门户->模块模板)
3)可以直接在模块设置时测试模板
而且和其它网站功能的修改相比是事半而功倍,因为一个简单的修改就可能给网站界面很大的改进。
我们先来看看Discuz系统提供的日志模块的九种模板。

日志标题+作者
(另外三种模板:日志标题,日志标题+发布时间,日志标题+评论数与之非常接近,这里略而不述)
<div class="module cl xl xl1"> <ul> [loop] <li><em><a href="home.php?mod=space&uid={uid}"{target}>{username}</a></em> <a href="{url}" title="{title}"{target}>{title}</a></li> [/loop] </ul> </div>
日志图片幻灯 <div class="module cl slidebox"> <ul class="slideshow"> [loop] <li style="width: {picwidth}px; height: {picheight}px;"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{title}</span></li> [/loop] </ul> </div> <script type="text/javascript"> runslideshow(); </script>
日志标题+作者+简介 <div class="module cl xld"> [loop] <dl class="cl"> <dt><em class="y xg1 xw0"><a href="home.php?mod=space&uid={uid}"{target}>{username}</a></em><a href="{url}" title="{title}"{target}>{title}</a></dt> <dd>{summary}</dd> </dl> [/loop] </div>
日志缩略图+标题+简介 <div class="module cl xld"> [loop] <dl class="cl"> <dd class="m"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dd> <dt><em class="y xg1 xw0"><a href="home.php?uid={uid}"{target}>{username}</a></em><a href="{url}" title="{title}"{target}>{title}</a></dt> <dd>{summary}</dd> </dl> [/loop] </div>
焦点模式 <div class="module cl xld fcs"> [loop] <dl class="cl"> <dt><a href="{url}" title="{title}"{target}>{title}</a></dt> <dd>{summary}</dd> </dl> [/loop] </div>
首页热议-日志 <div class="module cl xld"> [loop] <dl> <dd style="margin-bottom: 0; font-size: 12px; color: #369">{username} ›</dd> <dt style="padding: 0;"><a href="{url}" title="{title}"{target}>{title}</a></dt> <dd style="margin-bottom: 0;">{summary}</dd> </dl> [/loop] </div>
可以看出这些模板的定义非常简单而且类同。如果每个记录显示在一行里的话,用的都是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%;":

<div class="module cl xl xl1"> <ul> [loop] <li style="float:left; width: 48%;"><em><a href="home.php?mod=space&uid={uid}"{target}>{username}</a></em> <a href="{url}" title="{title}"{target}>{title}</a></li> [/loop] </ul> </div>
2。突出首篇
Discuz的模块模板语言提供了index标签来让站长对按位置对某条数据做特殊的显示处理,如珍珠湾 http://zhenzhubay.com/portal.php 那样突出最新一篇博文


下面我们在日志标题+作者模板的基础上对第一篇博文添加作者头像:
<div class="module cl xl xl1"> <ul> [index=1] <li style="height: 50px;"><em><a href="home.php?mod=space&uid={uid}"{target}>{username}</a></em> <img src="{avatar}" /><a href="{url}" title="{title}"{target} style="vertical-align: top; font-weight: bold;" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank">{title}</a></li> [/index] [loop] <li><em><a href="home.php?mod=space&uid={uid}"{target}>{username}</a></em><a href="{url}" title="{title}"{target}>{title}</a></li> [/loop] </ul> </div>


3。栏目配图
夜夜城 http://yeyeclub.com/portal.php 的好几个栏目里的标题栏右端都有配图,颇为别致

有三种方式可以达到类似的效果:


1)添加多个标题: 模块可以有多个标题 (在标题窗口里点击'添加新标题'),比如我们可以放一个文字标题在标题栏的左侧,再放一个图片标题在标题栏的右侧。


2)自定义内容: 与设置标题相比,还有一种自由度更大的设置模块顶部的办法:在属性->模块属性的底部点击'编辑自定义内容',在那里加入的HTML内容会出现在模块顶部。


3)嵌入模块模板: 我们还可以把顶部放在模块模板里,效果和前者类似,自由度还更大些,更容易将顶部和内容融为一体。缺点是一般顶部不是通用的,所以这样写的模板往往只适用于单个模块。


下面是第三种方法的又一例子,它不容易用其它方法来实现。


4。嵌字套框
快乐之城社区演示站 http://182.92.223.135/86/

要达到这个效果,只需在前述的日志标题+作者+简介模板的最外层套个fieldset,并在其中的legend里加上标题 (去掉原来设在模块标题上的文字):
<fieldset> <legend>最新博文</legend> <div class="module cl xld"> [loop] <dl class="cl"> <dt><em class="y xg1 xw0"><a href="home.php?mod=space&uid={uid}"{target}>{username}</a></em><a href="{url}" title="{title}"{target}>{title}</a></dt> <dd>{summary}</dd> </dl> [/loop] </div> </fieldset>



一些注意事项:
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

 



 

发表评论 评论 (8 个评论)

回复 TING 2015-6-8 07:08 PM
真棒
回复 小虫摄影 2015-5-26 07:48 PM
其他网站都没有后面的一个框,白色的空方块--编辑源码
回复 小虫摄影 2015-5-26 07:44 PM
天香公主:    我贴了张你贴在村里的图没问题,但估计那里把你的图缩小过了 (900*600),你能email我一张你要上传的图给我看看? [email protected] ...
我的图是900.以前发都没有问题。刚才我发到中文网,然后拷贝过了。没有问题。成功发布。但是发图到这里不行。我后来又试过。
回复 天香公主 2015-5-26 06:23 PM
小虫摄影: 还是发不出来?
   我贴了张你贴在村里的图没问题,但估计那里把你的图缩小过了 (900*600),你能email我一张你要上传的图给我看看? [email protected]
回复 小虫摄影 2015-5-26 04:27 PM
天香公主: 小虫姐好,我试了试没问题啊。你这张照片在其它网站发过吗?如果发过,告诉我是哪篇博文里的哪张照片。我来试试 ...
还是发不出来?
回复 小虫摄影 2015-5-26 04:23 PM
天香公主: 小虫姐好,我试了试没问题啊。你这张照片在其它网站发过吗?如果发过,告诉我是哪篇博文里的哪张照片。我来试试 ...
我刚才发给贝壳,只有文字我是拷贝,照片我是一张一张是上的,我知道 贝壳的照片是不能拷贝的。我再试试
回复 天香公主 2015-5-26 02:16 PM
小虫摄影: 天香,您好,我今天想发照片,为什么发不出来。好像上面多了一个白色框
小虫姐好,我试了试没问题啊。你这张照片在其它网站发过吗?如果发过,告诉我是哪篇博文里的哪张照片。我来试试
回复 小虫摄影 2015-5-26 02:08 PM
天香,您好,我今天想发照片,为什么发不出来。好像上面多了一个白色框

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2024-3-28 04:17 PM , Processed in 0.022216 second(s), 10 queries. ,ApcOn

返回顶部