Discuz! DIY专题、频道制作 - Discuz二次开发

DIY

DIY专题、频道制作

DIY专题,频道制作

由于专题和频道的制作步骤基本一致这里我们就放到一起讲，大家在后台(门户)添加频道和专题模块的时候会有提示操作，大家按照后台的提示和这里的介绍基本就可以能够自己制作频道和专题模块了！

DIY专题，频道的制作开发

以下以家居频道为例把制作好的页面转换成频道页面

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

下页是制作好的效果图

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

把系统头部（header）引入进来
1. 
如下图所示：

给新的模板起个名字, 如下代码:
1. 
如下图所示：

接下来增加可供DIY的CSS样式表
如下代码
1. <style id="diy_style" type="text/css"></style>
如下图所示：

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

增加如下代码
1. 
如下图所示：

到此基本改造完成接下来我们把改造好的文件放在系统目录中去
首先我们把index.html文件改名
把index.html改成list_home.htm 此处一定要注意频道模板必须以list_开头，后缀名为.htm
把改好名的list_home.htm文件拷贝到 template\default\portal 目录下
同时在template\default\portal 目录新建一个home文件夹用来放家居频道的图片及样式表

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

接下来用编辑器打开list_home.htm文件引入样式表文件
代码如下
1. <link href="$_G['setting']['csspath']template/default/portal/home/style/style.css" rel="stylesheet" type="text/css" />
如下图所示:

同进查找<img src="images/ 替换成 <img src="template/default/portal/home/images/
把其它用到的图片标签全替换成 template/default/portal/home/ 这个目录下就可以了
接下来我们进入后台创建一个频道模板名选择 "家居频道模板" 如下图
创建完成后，点击查看就能看到已与系统完全整合的模板了接下来我们把模板中的占位用的假数据换成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. <div id="diy1" class="area"></div>
完成后是这个样子
1. <div class="list">
2. <div id="diy1" class="area"></div>
3. </div>
其中的 [diy=diy1] 和 div id="diy1" 要匹配且在一个页面中不能重复如果要在第二个区域里面使用的话就应该是
[diy=diy2] 和 div id="diy2" 或者 [diy=home] 和 div id="home" 或者 [diy=discuz] 和 div id="discuz" 只要在一个页面内不重复随你怎么写都可以
如下图所示：

此时就完成了占位数据转换成DIY区域的过程在上面的过程中这样的替换并不是最优化的，我们接下来进行改进，让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>

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

接下来把代码框中的代码进行改造，改造成如下代码：
1. <div class="focus_div focustoday">
2. [index=1]
3. <h2><a href="{url}"{target}>{title}</a></h2>
4. <p>{summary}<a href="{url}"{target}>[详细]</a></p>
5. [/index]
6. <div class="list">
7. <ul>
8. [loop]
9. <li><a href="{caturl}" {target} class="gray">[{catname}]</a> <a href="{url}"{target}>{title}</a></li>
10. [/loop]
11. </ul>
12. </div>
13. </div>
这里用到了许多diy默认规定好的变量，来代替前台具体的显示内容，每个模块都有自己的定义变量，在后台都有详细解释，如下图：