二、在 DIY 模块中的模块数据中固定是什么意思，如下图
解答： 当勾选固定后 此条数据将不会随着模块属性当中的条件进行更新，也就是说，此条 数据将永久不变，除非把勾选去掉 三、如何实现两个模块中间一条竖线的效果，如下图效果
实现方法 选中要操作的 DIY 模块 选择样式 如下图所示
在弹出的层中 ，选择边框的分别设置 ，在边框的“左” 大小 设置为 1px， “样式”选择实线，“颜色”选择灰色，如下图所示
创建完成后，点击查看 就能看到已与系统完全整合的模板了 接下来我们把模板中的占位用 的假数据换成 DIY 区域
用编辑器打开 list_home.htm 文件 大家会看到有类似的如下代码
1. <div class="list">
2.
<ul>
3.
<li><a href="#"
class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜
文件
找到这两段代码的之间插入一行代码
1. <!--[diy=guanggao]--><div id="guanggao" class="area"></div><!--[/diy]-->
复制代码 其中 “guanggao” 可以任意取名，注意 不可与本模板中其它重名，必须保证唯一性 如下 图所示
完成
复制代码 如下图所示
同进查找<img src="images/ 替换成 <img src="template/default/portal/home/images/ 把其它用到的图片标签全替换成 template/default/portal/home/ 这个目录下就可以了 接下来 我们进入后台创建一个频道 模板名选择 “家居频道模板” 如下图
选择帖子模块就可以变换 这里要注意 切换之后，原来的模块样式将变成私有的（自 定义样式） 修改显示样式只能通过模块模板进行修改
五、如何在模板（官方发布的频道及门户）里面插入 DIY 区域 ，如下图所示
首先打开 模板文件 例如亲子模板， 打开 template\default\portal\list_baby.htm
1. 全方位立体式讲解 DIY 技巧集锦
今天为大家讲解一下 在使用 DIY 过程中的一些技巧与方法
仔细阅读，受益匪浅
一、如何在模块中增加“标题”及 “更多”的链接 如下图样式
方法：
通过框架或模块都可以实现上述样式 要编辑的框架点击编辑 如下图所示
，我们以框架为例，我们在 DIY 的时候 选中
之后点击标题
把改好名的 list_home.htm 文件拷贝到 template\default\portal 目录下
同时在 template\default\portal 目录新建一个 home 文件夹 用来放家居频道的图片及样 式表
此时复制 原来的文件夹 到 template\default\portal 目录的 home 文件夹 如下图所示
增加如下代码 1. <!--{subtemplate common/footer}-->
复制代码 如下图所示
到此基本改造完成 接下来我们把改造好的文件放在系统目录中去 首先我们把 index.html 文件改名
把 index.html 改成 list_home.htm 后缀名为.htm
此处一定要注意 频道模板必须以 list_开头，
在弹出的层中 选择任意一条数据 点击编辑 如下图所示
点击编辑后 在弹出的层中选择从数据源获取 此处可以添写帖子 ID、文章 ID、日志 ID、图 片 ID 来获取数据 如下图所示
点击获取会填充模块内相应的数据字段 （此处的数据字段会根据模块样式的不同有所变化， 请注意） 完成
四、DIY 时如何调用外部程序的数据 当我们与第三方程序整合后 如何在门户、频道、论坛、或可以 DIY 的区域调用这些第三方 程序的数据 首先我们可以在需要调用的地方拖一个展示类中的静态模块 如下图所示
大家看下页面效果
接下来，我们就把这个页面转换成 DIY 页面 首页我们用编辑工具打开 index.html 页面 我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面 中的关于头部的信息删除 如下图所示
把系统头部（header）引入进来 引用代码
1. <!--{subtemplate common/header}--> 复制代码 如下图所示
接下来 用编辑器打开 list_home.htm 文件引入样式表文件
代码如下 1. <link href="$_G['setting']['csspath']template/default/portal/home/style/s tyle.css" rel="stylesheet" type="text/css" />
要匹配 且 在一个页面中不能重复
如果要
[diy=diy2] 和 div id="diy2"
或者
者 [diy=discuz] 和 div id="discuz"
以
[diy=home] 和 div id="home"
或
只要在一个页面内不重复 随你怎么写都可
如下图所示
此时就完成了占位数据 转换成 DIY 区域的过程 在上面的过程中 这样的替换并不是最 优化的，我们接下来进行改进，让 DIY 更加灵活
构造冷色系居室空间</a></li> 5. <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤
分手 防小三家居风水</a></li> 6. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道
在弹出的层中可以添加标题及链接,位置选择居左 颜色及大小
如下图所示
同时可以设置标题的
接下来增加“更多”的链接 点击弹出层的添加新标题按扭 如下图所示 ，会“复 制”出一份新的标题 你只需修改就可以了 把其中的“精彩教程” 改成“更多” ，链接以及字体、颜色都进行修改就可以了，这里的 位置一定要选择“居右”
完成后的效果
如下图样式
完成
全方位立体式讲解 DIY 技巧集锦第二弹
一、DIY 中 TAB 框架如果切换点击方式（鼠标点击与鼠标滑过） 如下图中的效果如何实现
实现方法： 拖一个 TAB 框架到页面中，点编辑，选择标题 如下图所示
在弹出的窗口中选择切换类型 如下图所示。
你可以根据你的需要选择是点击还是滑过 完成
接下来向已拖好的 1-1 框架的框架里 左侧的 1 里面拖入一个 1:1 的框架 如下图所示 接下来向右侧的 1 里面也拖入一个 1:1 的框架 如下图所示
接下来我们就可以通过拖拽模块到框架中去了 此时我们可以去掉框架的标题 ，同时为每一个模块增加一个标题 如下图所示
你可以通过不同的模块样式或者 CSS 来美化这里 完成
教你如何把切割好的 html 页面转换成可供 DIY 的页面（高 级教程）
天给大家讲讲 如何把已经切割好的 html 页面或者模仿的页面转换成可供 DIY 的页面
请跟随教程一步一步操作 如有疑问请提出
以下以家居频道为例为大家讲解 我们常见的切割好的 html 页面包含这么几个元素 如下图 图片文件夹、CSS 文件夹、其它文件或图片文件夹、一个 html 页面
</a></li>
4.
<li><a href="#"
class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费
</a></li>
5.
<li><a href="#"
class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室
完成，这样框架就有了标题及更多
，模块的方法同上
二、DIY 的模块中如何调整链接的颜色 如下图样式
方法： 选中要修改的模块 ， 点击编辑，选择数据
如下图所示
在弹出层中选择 编辑 如下图所示
在弹出的层中 可以对标题进行 加粗、斜体、加下划线、修改颜色 等操作
完成
三、如何在现有的模块中添加新的数据 选中要添加数据的模块 点击编辑--数据 如下图所示
边角料再利用</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]-->