DIY 专题, 频道的制作开发

1. 如下图：图片文件夹、CSS 文件夹、其它文件或图片文件夹、一个 HTML 页面.
   


2. 下页是制作好的效果图：
   


3. 接下来, 我们就把这个页面转换成DIY页面
   
首页我们用编辑工具打开 index.html 页面
我们为了能够使用统一的头部样式, 这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除
如下图所示：


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

[list=1]

5. 
   

如下图所示：

给新的模板起个名字, 如下代码:

1. 
   

如下图所示：

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

如下代码

1. 
   

如下图所示：

接下来更换底部代码, 找到底部代码删除掉换成系统内置的通用底部代码, 如下图所示：

增加如下代码

1. 
   

如下图所示：

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

首先我们把 index.html 文件改名
把 index.html 改成list_home.htm 此处一定要注意 频道模板必须以 list_ 开头, 后缀名为 .htm
把改好名的 list_home.htm 文件拷贝到 templatedefaultportal 目录下
同时在 templatedefaultportal 目录新建一个 home 文件夹 用来放家居频道的图片及样式表

此时复制 原来的文件夹 到templatedefaultportal 目录的home文件夹 如下图所示：

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

代码如下

1. 
   

如下图所示:

同进查找

• 
  
• [装修资讯] 七步改造计 为夏日客厅换新颜
  
• 
  
• [行业资讯] 拆改承重墙如同醉驾需缴费
  
• 
  
• [装修资讯] 玩转极简主义 构造冷色系居室空间
  
• 
  
• [家居风水] 周星驰于文凤分手 防小三家居风水
  
• 
  
• [装修资讯] 小身材大味道 边角料再利用
  
• 
  
• [装修资讯] 茶几布局 随性设计耐保养
  
• 
  

[/list]

把其中的

1. 
   



• 
  
• [装修资讯] 七步改造计 为夏日客厅换新颜
  
• 
  
• [行业资讯] 拆改承重墙如同醉驾需缴费
  
• 
  
• [装修资讯] 玩转极简主义 构造冷色系居室空间
  
• 
  
• [家居风水] 周星驰于文凤分手 防小三家居风水
  
• 
  
• [装修资讯] 小身材大味道 边角料再利用
  
• 
  
• [装修资讯] 茶几布局 随性设计耐保养
  
• 
  

换成

1. 
   

完成后是这个样子

1. 
   
2. 
   
3. 
   

其中的 [diy=diy1] 和 div id="diy1" 要匹配 且 在一个页面中不能重复 如果要在第二个区域里面使用的话就应该是
[diy=diy2] 和 div id="diy2" 或者 [diy=home] 和 div id="home" 或者 [diy=discuz] 和 div id="discuz" 只要在一个页面内不重复 随你怎么写都可以
如下图所示：
此时就完成了占位数据 转换成DIY区域的过程 在上面的过程中 这样的替换并不是最优化的, 我们接下来进行改进, 让DIY更加灵活
此处的结构是这样子的 如下图

实现它的代码是这样子的

1. 
   
2. 玩转极简主义 构造冷色系居室空间
   
3. 今夏最流行的设计当属极简主义, 色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..[详细]
   
4. 
   
5. 
   



• 
  
• [装修资讯] 七步改造计 为夏日客厅换新颜
  
• 
  
• [行业资讯] 拆改承重墙如同醉驾需缴费
  
• 
  
• [装修资讯] 玩转极简主义 构造冷色系居室空间
  
• 
  
• [家居风水] 周星驰于文凤分手 防小三家居风水
  
• 
  
• [装修资讯] 小身材大味道 边角料再利用
  
• 
  
• [装修资讯] 茶几布局 随性设计耐保养
  
• 
  
6. 
   
7. 
   

我们可以把整个区域做为一个DIY区域
接下来 我们进入后台--》门户--》模块模板--》 点击添加, 这里我们以文章为例 , 选择文章类 进行提交
为模板起个名称 比如 “首页中间列表”
删除代码框里面的内容 拷贝上面的代码进来, 如下图所示：

接下来把代码框中的代码进行改造, 改造成如下代码：

1. 
   
2. [index=1]
   
3. {title}
   
4. {summary}[详细]
   
5. [/index]
   
6. 
   
7. 
   



• [loop]
  
• 
  
• [{catname}] {title}
  
• [/loop]
  
• 
  
8. 
   
9. 
   

这里用到了许多diy默认规定好的变量, 来代替前台具体的显示内容, 每个模块都有自己的定义变量, 在后台都有详细解释, 如下图：
现在模块模板就制作完成了接下来, 我们在频道的前台进行调用：在频道的前台页面点 DIY 会看到中间部分没有内容 会多出一个浅色的条 便是 DIY 区域 如下图
我们在DIY区域里面拖入一个100%的框架, 把标题去掉如下图


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


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


完成后选择样式 把边框、外边距、内边距都设为0PX, 如下图
到此模板的制作就完成了, 其它内容可仿造以上设置 进行制作。