【教程】把写好样式的html文件做成模板文件（高级篇,不需要DIY）

      教程说明：是把自己设计的模板文件做成DISCUZ模板，官方出一个篇把切好的html做成可供DIY的模板，也很详细！下面就看看把html设计文件做成模板（不可DIY）
     下面先看看可DIY模板和不可DIY模板区别！
     这是在设计时切好的HTML文件代码：

1. <div class="jrdz_news">
   
2. <h3><span>今日渝北</span><a href="#">更多>></a></h3>
   
3. <ul class="gk">
   
4. <li class="img"><a href="#"><img src="images/hotnews_103.gif" /></a></li>
   
5. <li class="gkxx">
   
6. <dl>
   
7. <dt><a href="#">木兰家私创大品</a></dt>
   
8. <dd>木兰家私创大品牌家具最低价~木兰家私创大萨哈克倒萨户口的撒谎卡萨大...[<a href="#">更多</a>]</dd>
   
9. </dl>
   
10. </li>
    
11. </ul>
    
12. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
    
13. <li>·<a href="#">别墅漏水十年维修无果业主怒告开发商管</a></li>
    
14. <li>·<a href="#">史上最大退房单:神秘买家退505套房总</a></li>
    
15. <li>·<a href="#">爱家家居合同暗藏玄机</a></li>
    
16. <li>·<a href="#">定金变身霸王条款 金九楼市凉飕飕</a></li>
    
17. </ul>
    
18. </div>
    

复制代码

  我们先看看DIY模板调用出来的代码：实现同样的功能，下面代码可以看出前面多了好多DIV标签，这些就是在DIY是生成的，感觉页面代码太多，不太好，同时用DIY时也比较慢，每个区域都要去改样式，框架标题等！

1. <div class="jrdz_news">
   
2. <h3><span>今日渝北</span><a href="#">更多>></a></h3>
   
3. <FONT color=red><!--[diy=diy2]-->
   
4. <FONT color=red><div id="diy2" class="area">
   
5. <div id="frame2gWzw5" class=" frame move-span cl frame-1">
   
6. <div id="frame2gWzw5_left" class="column frame-1-c">
   
7. <div id="frame2gWzw5_left_temp" class="move-span temp"></div>
   
8. <div id="portal_block_1154" class="block move-span">
   
9. <div id="portal_block_1154_content" class="dxb_bc"></FONT></FONT>
   
10. <ul class="gk"><li class="img"><a href="http://www.yubeihome.com/thread-6371-1-1.html"><img src="data/attachment/forum/201204/06/22255533wjkwmrc14jp30k.jpg" /></a></li>
    
11. <li class="gkxx">
    
12. <dl>
    
13. <dt><a href="http://www.yubeihome.com/thread-6371-1-1.html">[全国文明创建]渝北区创新“七彩教育” 为孩</a></dt>
    
14. <dd>
    
15. 华龙网4月5日11时讯（记者杨涛、实习生张灿） 课堂上，老师讲解安全 ...
    
16. [<a href="http://www.yubeihome.com/thread-6371-1-1.html">更多</a>]</dd>
    
17. </dl>
    
18. </li>
    
19. </ul>
    
20. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
    
21. <li>·<a href="http://www.yubeihome.com/thread-6370-1-1.html">公益电影《古路》来渝北古路取景 漫</a></li>
    
22. <li>·<a href="http://www.yubeihome.com/thread-6366-1-1.html">重庆渝北第三届梨花节昨日开幕</a></li><li>·<a href="http://www.yubeihome.com/thread-6360-1-1.html">渝北启动读书月活动 向社会各界赠送7000余</a></li>
    
23. <li>·<a href="http://www.yubeihome.com/thread-6224-1-1.html">热烈祝贺渝北社区入围2012重庆市联网协会优</a></li>
    
24. </ul>
    
25. </div>
    
26. </div>
    
27. </div>
    
28. </div>
    
29. </div>
    

复制代码

这是不用DIY直接高出来代码，和切片好的代码一样！

1. <div class="jrdz_news">
   
2. <h3><span>今日渝北</span><a href="#">更多>></a></h3>
   
3. <ul class="gk"><li class="img"><a href="http://www.yubeihome.com/thread-5108-1-1.html"><img src="data/attachment/forum/201202/26/140648abwxloi4xwbfosdy.jpg" /></a></li>
   
4. <li class="gkxx">
   
5. <dl>
   
6. <dt><a href="http://www.yubeihome.com/thread-5108-1-1.html">竹林深处女孩为男孩疗伤 能拍下这瞬间，真是</a></dt>
   
7. <dd>
   
8. 直接上图，不多说！
   
9. [<a href="http://www.yubeihome.com/thread-5108-1-1.html">更多</a>]</dd>
   
10. </dl>
    
11. </li></ul>
    
12. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
    
13. <li>·<a href="http://www.yubeihome.com/thread-6384-1-1.html">黄江陆佰号进口二手车行 销售中高档进口车</a></li>
    
14. <li>·<a href="http://www.yubeihome.com/thread-6381-1-1.html">中国援建阿尔巴尼亚地下机库如今已全部报废</a></li>
    
15. <li>·<a href="http://www.yubeihome.com/thread-6371-1-1.html">[全国文明创建]渝北区创新“七彩教育” 为孩</a></li>
    
16. <li>·<a href="http://www.yubeihome.com/thread-6370-1-1.html">公益电影《古路》来渝北古路取景 漫山红枫若</a></li>
    
17. </ul></div>

复制代码

从上面三个代码中可以看出，只有不用DIY调用数据，才能保持和切片的模板代码一致！这样做的目的就是为了少一些不必要的代码，对代码进行合理优化的目的！

下面开始讲如何把切好的HTML文件直接调用数据！

我们常见的切割好的html页面包含这么几个元素
如下图  图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面  

大家看下页面效果

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

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

如下图所示

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

1. <!--{subtemplate common/header}-->

复制代码

如下图所示

给新的模板起个名字

如下代码

1. <!--[name]家居频道模板[/name]-->

复制代码

如下图所示

接下来更换底部代码  

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

如下图所示

增加如下代码

1. <!--{subtemplate common/footer}-->

复制代码

如下图所示

到此基本改造完成 接下来我们把改造好的文件放在系统目录中去
首先我们把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/ 这个目录下就可以了

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

创建完成后，点击查看 就能看到已与系统完全整合的模板了
用编辑器打开list_home.htm文件  大家会看到有类似的如下代码:

1. <div class="jrdz_news">
   
2. <h3><span>今日大竹</span><a href="#">更多>></a></h3>
   
3. <ul class="gk">
   
4. <li class="img"><a href="#"><img src="images/hotnews_103.gif" /></a></li>
   
5. <li class="gkxx">
   
6. <dl>
   
7. <dt><a href="#">木兰家私创大品</a></dt>
   
8. <dd>木兰家私创大品牌家具最低价~木兰家私创大萨哈克倒萨户口的撒谎卡萨大...[<a href="#">更多</a>]</dd>
   
9. </dl>
   
10. </li>
    
11. </ul>
    
12. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
    
13. <li>·<a href="#">别墅漏水十年维修无果业主怒告开发商管</a></li>
    
14. <li>·<a href="#">史上最大退房单:神秘买家退505套房总</a></li>
    
15. <li>·<a href="#">爱家家居合同暗藏玄机</a></li>
    
16. <li>·<a href="#">定金变身霸王条款 金九楼市凉飕飕</a></li>
    
17. </ul>
    
18. </div>

复制代码

其中的:

1. <ul class="gk">
   
2. <li class="img"><a href="#"><img src="images/hotnews_103.gif" /></a></li>
   
3. <li class="gkxx">
   
4. <dl>
   
5. <dt><a href="#">木兰家私创大品</a></dt>
   
6. <dd>木兰家私创大品牌家具最低价~木兰家私创大萨哈克倒萨户口的撒谎卡萨大...[<a href="#">更多</a>]</dd>
   
7. </dl>
   
8. </li>
   
9. </ul>
   
10. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
    
11. <li>·<a href="#">别墅漏水十年维修无果业主怒告开发商管</a></li>
    
12. <li>·<a href="#">史上最大退房单:神秘买家退505套房总</a></li>
    
13. <li>·<a href="#">爱家家居合同暗藏玄机</a></li>
    
14. <li>·<a href="#">定金变身霸王条款 金九楼市凉飕飕</a></li>
    
15. </ul>

复制代码

改造成如下代码：后面需要用到！

1. <ul class="gk">
   
2. [index=1]
   
3. <li class="img"><a href="{url}"><img src="{pic}" /></a></li>
   
4. <li class="gkxx">
   
5. <dl>
   
6. <dt><a href="{url}">{title}</a></dt>
   
7. <dd>{summary}[<a href="{url}">更多</a>]</dd>
   
8. </dl>
   
9. </li>
   
10. [/index]
    
11. 
    
12. </ul>
    
13. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
    
14. [loop]
    
15. <li>·<a href="{url}">{title}</a></li>
    
16. [/loop]
    
17. 
    
18. </ul>

复制代码

现在进入后台－－门户－－模块管理－－数据调用：
此处根据自己情况选择所属页面和模块分类


点击添加调用：此处就是DIY时数据一样，设置好后确定！



点击下图中属性



弹出的窗口中选择模块模版，我们把改造后的代码复制进来！



在此处点击下图中内部调用



得到类式如下代码，每加一个调用,block后面的数值不一样！

1. <!--{block/1204}-->

复制代码

用<!--{block/1204}-->替换切片文件中的如下代码：

1. <ul class="gk">
   
2. <li class="img"><a href="#"><img src="images/hotnews_103.gif" /></a></li>
   
3. <li class="gkxx">
   
4. <dl>
   
5. <dt><a href="#">木兰家私创大品</a></dt>
   
6. <dd>木兰家私创大品牌家具最低价~木兰家私创大萨哈克倒萨户口的撒谎卡萨大...[<a href="#">更多</a>]</dd>
   
7. </dl>
   
8. </li>
   
9. </ul>
   
10. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
    
11. <li>·<a href="#">别墅漏水十年维修无果业主怒告开发商管</a></li>
    
12. <li>·<a href="#">史上最大退房单:神秘买家退505套房总</a></li>
    
13. <li>·<a href="#">爱家家居合同暗藏玄机</a></li>
    
14. <li>·<a href="#">定金变身霸王条款 金九楼市凉飕飕</a></li>
    
15. </ul>

复制代码

替换后代码如下：

1. 
   
2. <div class="jrdz_news">
   
3. <h3><span>今日渝北</span><a href="#">更多>></a></h3>
   
4.          <!--{block/1204}-->
   
5. </div>
   
6. 
   
7. 
   

复制代码

更新缓存，得到最后效果！


     演示站点：http://www.yubeihome.com
                       http://www.yb630.com

可DIY切片html模板教程：https://discuz.dismall.com/thread-1908115-1-1.html

真的很不错，值得学习。。。。

易康论坛前排支持 http://bbs.yeacome.com

很不错的哦。很有灵感哇

虽然没看懂，但是表示很给力

很详细的教程，辛苦了。。。。

楼主搞那么复杂干嘛？你直接说用内部调用模块就可以了。
懂的人早就懂，不懂的人说那么复杂反而更不懂。

这个方法好处是当然，不过不适合转移。