如何开发微网站模板 · 豆信2.0开发手册

>[info] 1.豆信微网站模板 ![](https://box.kancloud.cn/2016-01-24_56a3f49a51953.png) >[info] 2.找到豆信微官网插件位置 ![](https://box.kancloud.cn/2016-01-24_56a3f49a8629b.png) >[info] 3.进入豆信微官网试图部分 ![](https://box.kancloud.cn/2016-01-24_56a3f49aa1c66.png) >[info] 4.例如我们要开发首页模板就进入TemplateIndex ![](https://box.kancloud.cn/2016-01-24_56a3f49ab19aa.png) >[info] 5.新建一个首页模板文件夹 ![](https://box.kancloud.cn/2016-01-24_56a3f49ad15d3.png) >[info] 6.介绍一个首页模板的基本结构(以后开发按照这个基本结构来) ![](https://box.kancloud.cn/2016-01-24_56a3f49ae5cdf.png) >[info] 7.看看首页模板index.html的基本结构 **//引入头部** `<include file="Public/mobile_head"/>` **//引入mian.css文件** `<link href="{:CUSTOM_TEMPLATE_PATH}Index/ColorV4/main.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css"> ` `<body id="weisite" style="background:#eee; background-size:100% 100%">` **//下面循环轮播图** `<div class="container"><if condition="!empty($slideshow)"> <section class="banner"> <ul> <volist name="slideshow" id="vo"> <li> <a href="{$vo.url}"><img src="{$vo.img}"/></a> <span class="title">{$vo.title}</span> </li> </volist> </ul> <if condition="count(slideshow) gt 1"> <span class="identify"> <volist name="slideshow" id="vo"> <em></em> </volist> </span> </if> </section> </if>` **//下面循环循环分类管理** `<if condition="!empty($category)"> <section> <div class="icon_lists"> <volist name="category" id="vo"> <a class="item" href="{$vo.url}"> <span class="icon"><img src="{$vo.icon}"/></span> <span class="click_item_txt">{$vo.title}</span> </a> </volist> </div> </section> </if> </div>` **//引入底部文件**  {$footer_html}  <notempty name="config.code"> <p class="hide bdtongji"> {$config.code} </p> <else /> <p class="hide bdtongji"> {$tongji_code} </p> </notempty> </body> <script type="text/javascript"> $(function(){ $.WeiPHP.initBanner(true,5000); }) </script> </html> >[info] 按照上述步骤制作模板、按照上述的数据遍历结构，就可以制作自己喜欢的模板啦！ **以此类推 'TemplateSubcate(二级分类模板)' 'TemplateLists(图文列表模板)' 'TemplateDetail(图文内容模板)' 'TemplateFooter(底部菜单模板)' 按照上述方法制作！！！** 示例展示： ![](https://box.kancloud.cn/2016-01-24_56a3f49b07995.png) [示例代码下载](http://pan.baidu.com/s/1o7eP4ue)