今天为大家讲解一下 在使用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中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.
复制代码
其中 “guanggao” 可以任意取名，注意 不可与本模板中其它重名，必须保证唯一性 如下图所示
2010-10-11 17:53 上传
下载附件 (7.55 KB)
完成
天给大家讲讲 如何把已经切割好的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.
复制代码
如下图所示
2010-9-26 10:53 上传
下载附件 (14.82 KB)
给新的模板起个名字 如下代码
1.
复制代码
如下图所示
2010-9-26 11:22 上传
下载附件 (15.25 KB)
接下来增加可供DIY的CSS样式表如下代码
1.
复制代码
如下图所示
2010-9-26 11:27 上传
下载附件 (16.22 KB)
头部接下来更换底部代码 找到底部代码删除掉 换成系统内置的通用底部代码 如下图所示
2010-9-26 11:44 上传
下载附件 (22.92 KB)
增加如下代码
1.
复制代码
如下图所示
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.
复制代码
如下图所示
2010-9-26 13:20 上传
下载附件 (12.99 KB)
同进查找把其它用到的图片标签全替换成 template/default/portal/home/ 这个目录下就可以了接下来 我们进入后台创建一个频道 模板名选择 “家居频道模板” 如下图
2010-9-26 13:45 上传
下载附件 (30.21 KB)
创建完成后，点击查看 就能看到已与系统完全整合的模板了 接下来我们把模板中的占位用的假数据换成DIY区域 用编辑器打开list_home.htm文件 大家会看到有类似的如下代码
1.
复制代码
把其中的
1.
2.
3.
4.
5.
6.
7.
8.
复制代码
换成
1.
复制代码
完成后是这个样子
1. 2. 3.
复制代码
其中的 [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.
复制代码
我们可以把整个区域做为一个DIY区域 接下来 我们进入后台--》门户--》模块模板--》 点击添加，这里我们以文章为例 ，选择文章类 进行提交为模板起个名称 比如 “首页中间列表”删除代码框里面的内容 拷贝上面的代码进来
1.
复制代码
如下图所示
2010-9-26 14:31 上传
下载附件 (39.54 KB)
接下来把代码框中的代码进行转换 把 以下代码
1.
复制代码
改造成如下代码
1.
复制代码
其中 {title} 表示标题， {url} 表示 链接， {target} 表示链接打开的方式，{summary}表示文章的简介。其它内容请参考说明其中 [index=1]... [/index]表示第一条数据
1. [index=1]
2. {title}
3. {summary}[
4. [/index]
复制代码
其中 [loop]...[/loop] 表示循环
1. [loop]
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时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片
请跟随教程从头到尾仔细阅读，你将收获不小
第一步制作幻灯片：后台--》门户--》模块模板点击 添加按扭 如下图所示
2010-9-25 10:48 上传
下载附件 (12.23 KB)
此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片” 把代码框里面的内容全部删除
2010-9-25 10:56 上传
下载附件 (27.19 KB)
接下来 我们输入代码 首先在代码框里面输入
1.
复制代码
其中的div可以是任意标签，如table，span等，我们这里以div为例此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记如下图所示
2010-9-25 11:07 上传
下载附件 (13.58 KB)
接下来，我们增加幻灯代码 下面代码用来实现图片（或内容）的显示作用 属性必须为class="slideshow"的标签
1.
复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下
1.
复制代码
接下来我们来增加“滑动”、“点击”的代码
1.
复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下
1.
复制代码
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码 在 代码中间插入图片显示代码如下代码
1.
复制代码
其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量接下来为图片增加循环代码 如下代码
1. [loop]
2.
3. [/loop]
复制代码
完整代码如下
1. 2. 3. [loop] 4. 5. [/loop] 6. 7. 8. 9.
复制代码
接下来 为滑动条增加数字 在中增加娄字变量 如下代码
1.
复制代码
其中{currentorder} 是当前显示的顺序数字 ,其中[loop1]...[/loop1] 为循环，你可能注意到了，这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的 最后增加脚本代码 如下 以下代码放在模块代码的最后
1.
复制代码
此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下
1.
12.
13.
复制代码
如下图所示
2010-9-25 12:01 上传
下载附件 (16.18 KB)
此时我们就可以通过前台DIY调用了 如下图所示 调用
2010-9-25 13:46 上传
下载附件 (13.82 KB)
显示效果
2010-9-25 13:46 上传
下载附件 (38.19 KB)
至此简易幻灯片就完成了，需要你通过CSS样式来配合美化一下 下面讲解一些高级参数 1、滑动条如何控制让用户点击还是滑动 在 1. 复制代码 2、如何实现上一个 下一个的效果 如下图样式 2010-9-25 12:18 上传 下载附件 (759 Bytes) 添加如下代码即可实现 1. 4. 5. 复制代码 标签为 class="slidebarup" 的为上一个 标签为 class="slidebardown" 的为下一个 3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法 在需要展示的地方增加如下代码 1. 复制代码 同时支持多个slideother 如下代码 1. 4. 5. 复制代码 4、如何控制幻灯片播放的速度 在 1. 复制代码 5、如何实现 一次显示多个图片，每次切换多个 如下图样式 2010-9-25 13:40 上传 下载附件 (13.52 KB) 在 1. 复制代码 其中 slidenum="3" 表示显示数量 ， slidestep="1" 表示每点击一次左右按扭 移动的次数 以上为幻灯片的所有功能下面提供演示站点中门户及频道所用到的幻灯片代码 （大家可以参照所提供的代码制作出炫丽的幻灯片）以下所示效果都需要CSS配合效果一 2010-9-25 13:52 上传 下载附件 (48.82 KB) 实现代码 1. 2. 3. [loop] 4. 5. [/loop] 6. 7. 8. 13. 18. 19. 20. 复制代码 效果二 2010-9-25 13:55 上传 下载附件 (6.85 KB) 实现代码 1. 29. 复制代码 效果三 2010-9-25 13:58 上传 下载附件 (13.61 KB) 实现代码 1. 10. 13. 复制代码 效果四 2010-9-25 14:02 上传 下载附件 (30.53 KB) 实现代码 1. 21. 复制代码 效果五 2010-9-25 14:05 上传 下载附件 (100.65 KB) 实现代码 1. 2. 3. [loop] 4. 5. 6. 7. [/loop] 8. 9. 16. 22. 23. 复制代码 效果六 2010-9-25 14:09 上传 下载附件 (45.85 KB) 实现代码 1. 2. 3. 8. 9. 复制代码 效果七 2010-9-25 14:12 上传 下载附件 (14.85 KB) 实现代码 1. 2. 3. 4. [loop1] 5. 6. [/loop1] 7. 8. 18. 19. 复制代码 效果八 2010-9-25 14:15 上传 下载附件 (68.99 KB) 实现代码 1. 17. 复制代码 效果九 2010-9-25 14:17 上传 下载附件 (42.58 KB) 实现代码 1. 2. 3. 4. [loop] 5. 6. [/loop] 7. 8. 9. 10. [loop1] 11. 12. 13. 18. 19. 复制代码 效果十 2010-9-25 14:21 上传 下载附件 (65.43 KB) 实现代码 1. 2. 3. 4. [loop] 5. 6. [/loop] 7. 8. 9. 10. 11. 12. 13. [loop1] 14. {currentorder} 15. [/loop1] 16. 17. 18. 19. 27. 28. 29. 复制代码 大家可以参照上面提供的十套代码 仔细研究一下。百变幻灯 随你而变 感谢大家 本文来源：https://www.2haoxitong.net/k/doc/e2d5710f52ea551810a687c9.html 文档为doc格式[/loop]
[/loop]
[/loop1]
