DZ论坛DIY模块模板教程.doc

DZ论坛DIY模块模板教程
在使用DIY过程中的一些技巧与方法
仔细阅读，受益匪浅

一、如何在模块中增加“标题”及 “更多”的链接 如下图样式

2010-9-27 10:02 上传
下载附件 (21.58 KB)

方法：

通过框架或模块都可以实现上述样式   ，我们以框架为例，我们在DIY的时候  选中要编辑的框架点击编辑 如下图所示

2010-9-27 09:50 上传
下载附件 (22.02 KB)

之后点击标题

2010-9-27 09:59 上传
下载附件 (2.28 KB)

在弹出的层中可以添加标题及链接,位置选择居左  如下图所示  同时可以设置标题的颜色及大小

2010-9-27 10:08 上传
下载附件 (9.69 KB)

接下来增加“更多”的链接  点击弹出层的添加新标题按扭 如下图所示  ，会“复制”出一份新的标题  你只需修改就可以了
把其中的“精彩教程” 改成“更多” ，链接以及字体、颜色都进行修改就可以了，这里的位置一定要选择“居右”

2010-9-27 10:15 上传
下载附件 (13.22 KB)

完成，这样框架就有了标题及更多     ，模块的方法同上

二、DIY的模块中如何调整链接的颜色 如下图样式

2010-9-27 10:26 上传
下载附件 (28.05 KB)

方法：
选中要修改的模块 ， 点击编辑，选择数据  如下图所示

2010-9-27 10:42 上传
下载附件 (20.86 KB)

在弹出层中选择 编辑   如下图所示

2010-9-27 10:45 上传
下载附件 (20.49 KB)

在弹出的层中 可以对标题进行 加粗、斜体、加下划线、修改颜色 等操作

2010-9-27 12:17 上传
下载附件 (15 KB)

完成

三、如何在现有的模块中添加新的数据  

选中要添加数据的模块 点击编辑--数据  如下图所示

在弹出的层中 选择任意一条数据  点击编辑  如下图所示

点击编辑后 在弹出的层中选择从数据源获取 此处可以添写帖子ID、文章ID、日志ID、图片ID 来获取数据 如下图所示

2010-9-27 12:58 上传
下载附件 (15.02 KB)

点击获取会填充模块内相应的数据字段 （此处的数据字段会根据模块样式的不同有所变化，请注意）

完成

四、DIY时如何调用外部程序的数据  

当我们与第三方程序整合后 如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据

首先我们可以在需要调用的地方拖一个展示类中的静态模块 如下图所示

2010-9-27 13:15 上传
下载附件 (31.44 KB)

如上图所示 选择数据来源为“自定义HTML”  

一般第三方系统的数据调用都会有输出JS格式的 我们把第三方程序提供的JS代码粘贴进 HTML代码框就可以了

如下图所示   

2010-9-27 13:21 上传
下载附件 (10.65 KB)

完成

五、首页多格或首页四格如何DIY出来

我们以论坛首页为例 （在任何页面都可以） 来制作一个首页四格

首先在论坛首页拖一个 1:1的框架  如下图所示

2010-9-27 13:36 上传
下载附件 (47.78 KB)

接下来向已拖好的1-1框架的框架里 左侧的1 里面拖入一个1:1的框架 如下图所示

2010-9-27 13:41 上传
下载附件 (48.89 KB)

接下来向右侧的1里面也拖入一个1:1的框架  如下图所示

2010-9-27 13:52 上传
下载附件 (41.48 KB)

接下来我们就可以通过拖拽模块到框架中去了

2010-9-27 14:44 上传
下载附件 (28.15 KB)

此时我们可以去掉框架的标题 ，同时为每一个模块增加一个标题   如下图所示

2010-9-27 14:48 上传
下载附件 (16.51 KB)

你可以通过不同的模块样式或者CSS来美化这里   

完成

六、如何修改整个模块的链接样式  比如下图

2010-9-27 15:04 上传
下载附件 (10.25 KB)

方法：
选中要编辑的模块  ，点击编辑--样式   进行修改 如下图所示

2010-9-27 15:09 上传
下载附件 (13.95 KB)

以上修改针对整个模块

完成

七、如何修改两个模块或两个框架之间的距离  如下图样式

2010-9-27 15:45 上传
下载附件 (5.19 KB)

选择要编辑的框架或者模块  ，点击编辑--样式 选择外边距，勾选分别设置 ，在右边距中写入合适的数字就可以了 例如10
如下图所示

2010-9-27 15:51 上传
下载附件 (9.93 KB)

完成后的效果    如下图样式

2010-9-27 15:53 上传
下载附件 (4.74 KB)
全方位立体式讲解DIY技巧集锦第二弹
一、DIY中TAB框架如果切换点击方式（鼠标点击与鼠标滑过）

       如下图中的效果如何实现

2010-10-11 09:53 上传
下载附件 (5.3 KB)

     实现方法：

拖一个TAB框架到页面中，点编辑，选择标题 如下图所示

2010-10-11 09:53 上传
下载附件 (4.01 KB)

在弹出的窗口中选择切换类型 如下图所示。

2010-10-11 09:53 上传
下载附件 (9.4 KB)

你可以根据你的需要选择是点击还是滑过

完成

二、在DIY模块中的模块数据中固定是什么意思，如下图

2010-10-11 10:50 上传
下载附件 (18.17 KB)

解答： 当勾选固定后 此条数据将不会随着模块属性当中的条件进行更新，也就是说，此条数据将永久不变，除非把勾选去掉

三、如何实现两个模块中间一条竖线的效果，如下图效果

2010-10-11 15:13 上传
下载附件 (19.99 KB)

实现方法

       选中要操作的DIY模块 选择样式  如下图所示

2010-10-11 15:41 上传
下载附件 (23.98 KB)

       在弹出的层中 ，选择边框的分别设置 ，在边框的“左” 大小 设置为1px，“样式”选择实线，“颜色”选择灰色，如下图所示

2010-10-11 15:37 上传
下载附件 (12.51 KB)

这样设置后 我们就能看到一个边线了  这时你会看到内容与边线挤在了一起  如下图所示

2010-10-11 15:47 上传
下载附件 (14.77 KB)

接下来我们进行调整内边距改变上图中的样式  同理，打开样式编辑层 选择“内边距” 点分别设置 在“左”中添加10px

2010-10-11 16:17 上传
下载附件 (13.06 KB)

   调整后如下图所示  

2010-10-11 16:20 上传
下载附件 (14.98 KB)

大家可以根据实际情况调整 内、外边距的大小与边框的设置 ，灵活使用

四、如何将一个文章模块转换为一个帖子模块  

     比如官方提供的门户及频道都是文章类模块 ，我们如何转换为帖子类   

     编辑模块的属性  把其中的模块分类进行切换  如下图所示

2010-10-11 16:37 上传
下载附件 (12.89 KB)

选择帖子模块就可以变换  这里要注意  切换之后，原来的模块样式将变成私有的（自定义样式） 修改显示样式只能通过模块模板进行修改

五、如何在模板（官方发布的频道及门户）里面插入DIY区域  ，如下图所示

2010-10-11 17:39 上传
下载附件 (454.37 KB)

首先打开 模板文件 例如亲子模板， 打开template\default\portal\list_baby.htm  文件  

找到这两段代码的之间插入一行代码
1. <!--[diy=guanggao]--><div id="guanggao" class="area"></div><!--[/diy]-->
复制代码
其中 “guanggao” 可以任意取名，注意 不可与本模板中其它重名，必须保证唯一性 如下图所示

2010-10-11 17:53 上传
下载附件 (7.55 KB)

[功能介绍] 教你如何把切割好的html页面转换成可供DIY的页面（高级教程）
今天给大家讲讲 如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面
请跟随教程一步一步操作  如有疑问请提出

以下以家居频道为例为大家讲解

我们常见的切割好的html页面包含这么几个元素

如下图  图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面  

2010-9-26 10:14 上传
下载附件 (2.65 KB)

大家看下页面效果

2010-9-26 10:32 上传
下载附件 (1.61 MB)

接下来，我们就把这个页面转换成DIY页面  

首页我们用编辑工具打开 index.html页面

我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除

如下图所示

2010-9-26 10:50 上传
下载附件 (79.28 KB)

把系统头部（header）引入进来

引用代码
1. <!--{subtemplate common/header}-->
复制代码
如下图所示

2010-9-26 10:53 上传
下载附件 (14.82 KB)

给新的模板起个名字

如下代码
1. <!--[name]家居频道模板[/name]-->
复制代码
如下图所示

2010-9-26 11:22 上传
下载附件 (15.25 KB)

接下来增加可供DIY的CSS样式表

如下代码
1. <style id="diy_style" type="text/css"></style>
复制代码
如下图所示

2010-9-26 11:27 上传
下载附件 (16.22 KB)

头部

接下来更换底部代码  

找到底部代码删除掉 换成系统内置的通用底部代码   

如下图所示

2010-9-26 11:44 上传
下载附件 (22.92 KB)

增加如下代码
1. <!--{subtemplate common/footer}-->
复制代码
如下图所示

2010-9-26 11:47 上传
下载附件 (5.03 KB)

到此基本改造完成 接下来我们把改造好的文件放在系统目录中去

首先我们把index.html文件改名

把index.html改成list_home.htm   此处一定要注意  频道模板必须以list_开头，后缀名为.htm  

把改好名的list_home.htm文件拷贝到 template\default\portal 目录下  

同时在template\default\portal 目录新建一个home文件夹 用来放家居频道的图片及样式表

此时复制 原来的文件夹
2010-9-26 11:58 上传
下载附件 (4.5 KB)
到template\default\portal 目录的home文件夹 如下图所示

2010-9-26 13:11 上传
下载附件 (7.52 KB)

接下来 用编辑器打开list_home.htm文件引入样式表文件

代码如下
1. <link href="$_G['setting']['csspath']template/default/portal/home/style/style.css" rel="stylesheet" type="text/css" />
复制代码
如下图所示

2010-9-26 13:20 上传
下载附件 (12.99 KB)

同进查找<img src="images/   替换成 <img src="template/default/portal/home/images/

把其它用到的图片标签全替换成 template/default/portal/home/ 这个目录下就可以了

接下来 我们进入后台创建一个频道  模板名选择 “家居频道模板” 如下图

2010-9-26 13:45 上传
下载附件 (30.21 KB)

创建完成后，点击查看 就能看到已与系统完全整合的模板了 接下来我们把模板中的占位用的假数据换成DIY区域

用编辑器打开list_home.htm文件  大家会看到有类似的如下代码
1. <div class="list">
2.                     <ul>
3.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
4.                         <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
5.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
6.                         <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
7.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道 边角料再利用</a></li>
8.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
9.                     </ul>
10.               </div>
复制代码
把其中的
1. <ul>
2. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
3. <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
4. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
5. <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
6. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道 边角料再利用</a></li>
7. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
8. </ul>
复制代码
换成
1. <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->
复制代码
完成后是这个样子
1. <div class="list">
2.                      <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->
3.               </div>
复制代码
其中的 [diy=diy1] 和 div id="diy1"  要匹配 且 在一个页面中不能重复   如果要在第二个区域里面使用的话就应该是

[diy=diy2] 和 div id="diy2"    或者  [diy=home] 和 div id="home"    或者  [diy=discuz] 和 div id="discuz"   只要在一个页面内不重复 随你怎么写都可以

如下图所示

2010-9-26 14:15 上传
下载附件 (13.47 KB)

此时就完成了占位数据 转换成DIY区域的过程  在上面的过程中 这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活

此处的结构是这样子的  如下图

2010-9-26 14:21 上传
下载附件 (17.3 KB)

实现它的代码是这样子的
1. <div class="focus_div focustoday">
2.                 <h2><a href="#">玩转极简主义 构造冷色系居室空间</a></h2>
3.                 <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="#">[详细]</a></p>
4.                 <div class="list">
5.                     <ul>
6.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
7.                         <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
8.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
9.                         <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
10.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道 边角料再利用</a></li>
11.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
12.                     </ul>
13.               </div>
14.             </div>
复制代码
我们可以把整个区域做为一个DIY区域  

接下来 我们进入后台--》门户--》模块模板--》  

点击添加，这里我们以文章为例  ，选择文章类 进行提交

为模板起个名称  比如  “首页中间列表”

删除代码框里面的内容 拷贝上面的代码进来
1.   <div class="focus_div focustoday">
2.                 <h2><a href="#">玩转极简主义 构造冷色系居室空间</a></h2>
3.                 <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="#">[详细]</a></p>
4.                 <div class="list">
5.                     <ul>
6.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
7.                         <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
8.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
9.                         <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
10.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道 边角料再利用</a></li>
11.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
12.                     </ul>
13.               </div>
14.             </div>
复制代码
如下图所示

2010-9-26 14:31 上传
下载附件 (39.54 KB)

接下来把代码框中的代码进行转换  

把  以下代码
1.   <div class="focus_div focustoday">
2.                 <h2><a href="#">玩转极简主义 构造冷色系居室空间</a></h2>
3.                 <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="#">[详细]</a></p>
4.                 <div class="list">
5.                     <ul>
6.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
7.                         <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
8.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
9.                         <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
10.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道 边角料再利用</a></li>
11.                         <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
12.                     </ul>
13.               </div>
14.             </div>
复制代码
改造成如下代码
1.   <div class="focus_div focustoday">
2.
3. [index=1]
4.                 <h2><a href="{url}"{target}>{title}</a></h2>
5.                 <p>{summary}<a href="{url}"{target}>[详细]</a></p>
6. [/index]
7.
8.                 <div class="list">
9.                     <ul>
10. [loop]
11.                         <li><a href="{caturl}" {target}  class="gray">[{catname}]</a> <a href="{url}"{target}>{title}</a></li>
12. [/loop]
13.                     </ul>
14.               </div>
15.             </div>
复制代码
其中 {title} 表示标题，  {url} 表示 链接，  {target} 表示链接打开的方式，{summary}表示文章的简介。其它内容请参考说明

其中  [index=1]... [/index]表示第一条数据
1. [index=1]
2. <h2><a href="{url}"{target}>{title}</a></h2>
3. <p>{summary}<a href="{url}"{target}>[详细]</a></p>
4. [/index]
复制代码
其中 [loop]...[/loop]  表示循环
1. [loop]
2. <li><a href="{caturl}" {target} class="gray">[{catname}]</a> <a href="{url}"{target}>{title}</a></li>
3. [/loop]
复制代码
现在模块模板就制作完成了

接下来 我们在频道的前台进行调用

在频道的前台页面 点DIY  会看到中间部分没有内容 会多出一个浅色的条 便是DIY区域  如下图

2010-9-26 14:53 上传
下载附件 (13.36 KB)

我们在DIY区域里面拖入一个100%的框架

把标题去掉如下图

2010-9-26 14:56 上传
下载附件 (6.87 KB)

接下来选择样式   把边框设为0PX ，外边距也设为0PX  如下图

2010-9-26 15:00 上传
下载附件 (8.07 KB)

完成后 在此框架内拖入一个文章模块 并选择刚才创建的模块样式，如下图

2010-9-26 15:04 上传
下载附件 (18.15 KB)

完成后选择样式  把边框、外边距、内边距都设为0PX  如下图

2010-9-26 15:09 上传
下载附件 (11.22 KB)

到此模板的制作就完成了，其它内容可仿造以上设置 进行制作
[功能介绍] 百变幻灯片，完全DIY（高级教程）
在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片
请跟随教程从头到尾仔细阅读，你将收获不小

第一步制作幻灯片：后台--》门户--》模块模板

点击 添加按扭 如下图所示

2010-9-25 10:48 上传
下载附件 (12.23 KB)

此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类

下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片”  

把代码框里面的内容全部删除

2010-9-25 10:56 上传
下载附件 (27.19 KB)

接下来 我们输入代码

首先在代码框里面输入
1. <div class="slidebox"></div>
复制代码
其中的div可以是任意标签，如table，span等，我们这里以div为例

此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记
如下图所示

2010-9-25 11:07 上传
下载附件 (13.58 KB)

接下来，我们增加幻灯代码  下面代码用来实现图片（或内容）的显示作用 属性必须为class="slideshow"的标签
1. <div class="slideshow"></div>
复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下
1. <div class="slidebox">
2.
3. <div class="slideshow"></div>
4.
5. </div>
复制代码

接下来我们来增加“滑动”、“点击”的代码   
1. <div class="slidebar"></div>
复制代码

上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下
1. <div class="slidebox"><!--幻灯片开始-->
2.
3. <div class="slideshow"> </div><!--图片展示-->
4.
5. <div class="slidebar"> </div><!--幻灯片控制展示-->
6.
7. </div><!--幻灯片结束-->
复制代码
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码

在<div class="slideshow"> </div> 代码中间插入图片显示代码

如下代码
1. <div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--图片展示-->
复制代码
其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量

接下来为图片增加循环代码 如下代码
1. [loop]
2. <img src="{pic}" width="{picwidth}" height="{picheight}" />
3. [/loop]
复制代码
完整代码如下
1. <div class="slidebox"><!--幻灯片开始-->
2. <div class="slideshow">
3. [loop]
4. <img src="{pic}" width="{picwidth}" height="{picheight}" />
5. [/loop]
6. </div>
7. <!--图片展示-->
8. <div class="slidebar"> </div><!--幻灯片控制展示-->
9. </div><!--幻灯片结束-->
复制代码
接下来 为滑动条增加数字

在<div class="slidebar"> </div>中增加娄字变量 如下代码
1. <div class="slidebar">
2. [loop1]<span>{currentorder}</span>[/loop1]
3. </div>
复制代码
其中{currentorder} 是当前显示的顺序数字  ,其中[loop1]...[/loop1] 为循环，你可能注意到了，这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的

最后增加脚本代码 如下  以下代码放在模块代码的最后
1. <script type="text/javascript">
2. runslideshow();
3. </script>
复制代码

此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下
1. <div class="slidebox"><!--幻灯片开始-->
2. <div class="slideshow">
3. [loop]
4. <img src="{pic}" width="{picwidth}" height="{picheight}" />
5. [/loop]
6. </div>
7. <!--图片展示-->
8. <div class="slidebar">
9. [loop1]<span>{currentorder}</span>[/loop1]
10. </div><!--幻灯片控制展示-->
11. </div><!--幻灯片结束-->
12.
13. <script type="text/javascript">
14. runslideshow();
15. </script>
复制代码

如下图所示

2010-9-25 12:01 上传
下载附件 (16.1