>[info]模板的開發應該說是商城二次開發最多的一部分，很多客戶買了一套商城系統，第一件事就是修改界面，這一節課我們就講一講在iWebShop中如何進行模板開發，要注意哪些問題
## 一、模板目錄結構
iWebShop的模板文件，都放在根目錄的views下，目錄的結構如下：
views下的每個目錄就是一個模板主題 ，也就是平時網上在賣的一個模板，就是這一個目錄下的文件。系統前臺模板主題為default；默認后臺主題sysdefault；商家后臺的默認主題為sysseller。要使用哪個模板可以在后臺中設置。也可以在根目錄config/config.php中的theme中設置。
從上圖可以看出，每一個模板主題下由皮膚，js代碼，布局模板，控制器模板，config.php，preview.jpg(名稱可在config.php中設置)組成。
模板文件分為布局模板和控制器模板這兩類，一個頁面是由布局模板和控制器模板拼接而成的。
## 二、主題conifg配置文件說明
以默認的模板為例，配置文件的代碼如下：
~~~
return array(
'name' => '錦繡前程',//模板名稱
'author' => 'aircheng',//作者
'time' => '2014/12/29 10:03:05',//發布日期時間
'version' => '3.0',//版本
'thumb' => 'preview.jpg',//封面圖文件名
'info' => '默認主題方案，此主題適用于3.0.0 系列產品',//模板描述
'type' => '商城前臺-PC',//類型
);
~~~
以上為模板的配置文件，還能在這個模板中配置布局的信息，具體可以看一下，我們之前有關視圖的文章：
## 三、主題布局layouts
布局的作用就是把一些公用的前端代碼提取出來，如網站的頭部，網站底部，或是側邊欄之類的內容，關于布局的聲明可以看回“視圖”那篇文章，以下我拿代碼最少的一個布局模板，site_mini來說明：
~~~
{set:
$siteConfig = new Config("site_config");
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{echo:$siteConfig->name}</title>
<link type="image/x-icon" href="{webroot:favicon.ico}" rel="icon">
<link rel="stylesheet" href="{skin:css/index.css}" />
{js:jquery}
{js:validate}
{js:form}
{js:dialog}
<script type='text/javascript' src="{theme:javascript/common.js}"></script>
<script type='text/javascript' src='{theme:javascript/site.js}'></script>
</head>
<body class="second" >
<div class="brand_list container_2">
<div class="header">
<h1 class="logo"><a title="{echo:$siteConfig->name}" style="background:url({if:$siteConfig->logo}{webroot:$siteConfig->logo}{else:}{skin:images/front/logo.gif}{/if});" href="{url:}">{echo:$siteConfig->name}</a></h1>
<ul class="shortcut">
<li class="first"><a href="{url:/ucenter/index}">我的賬戶</a></li>
<li><a href="{url:/ucenter/order}">我的訂單</a></li>
<li><a href="{url:/simple/seller}">申請開店</a></li>
<li><a href="{url:/seller/index}">商家管理</a></li>
<li class='last'><a href="{url:/site/help_list}">使用幫助</a></li>
</ul>
<p class="loginfo">
{if:$this->user}
{$this->user['username']}您好，歡迎您來到{echo:$siteConfig->name}購物！[<a href="{url:/simple/logout}" class="reg">安全退出</a>]
{else:}
[<a href="{url:/simple/login}">登錄</a><a class="reg" href="{url:/simple/reg}">免費注冊</a>]
{/if}
</p>
</div>
{viewcontent}
{echo:IFilter::stripSlash($siteConfig->site_footer_code)}
</div>
</body>
</html>
~~~
其中高亮的那一行中的{viewcontent} 將會被普通的模板替換。前面講過一個頁面是由布局模板和普通模板拼接組合而成的，這里的拼接組合就是通過 {viewcontent} 這個標簽來實現的，因為系統在運行時會自動把此標簽替換為瀏覽器要訪問的普通模板內容，所以你可以把這個標簽理解為是一個普通模板，他被嵌入在布局模板之中
如\default\simple\restore_password.html這個頁面是重置密碼的界面文件，如下：
~~~
<div class="wrapper clearfix">
<div class="wrap_box">
<h3 class="notice">密碼重置</h3>
<p class="tips">請填寫下面表單來重密碼重置</p>
<div class="form_content">
<form action='{$this->formAction}' method='post'>
<table class="form_table" cellpadding="0" cellspacing="0">
<col width="200px" />
<col />
<tr>
<th><span class="red">*</span>你想要的新密碼：</th><td><input type='password' class="normal" name="password" pattern='^\w{6,32}$' alt='密碼由英文字母、數字組成，長度6-32位' /><label>密碼由英文字母、數字組成，長度6-32位</label></td>
</tr>
<tr>
<th><span class="red">*</span>請再次輸入新密碼：</th><td><input type='password' class="normal" name="repassword" pattern='^\w{6,32}$' alt='密碼由英文字母、數字組成，長度6-32位' bind='password' /><label>密碼由英文字母、數字組成，長度6-32位</label></td>
</tr>
<tr>
<td></td><td><label class="btn_gray"><input type="submit" value="修改密碼" /></label><label class="btn_gray"><input type="reset" value="取消" /></label></td>
</tr>
</table>
</form>
</div>
</div>
</div>
~~~
可以看出，這只是一個html的片斷，不是完整的html結構，但把它嵌入到site_mini中的{viewcontent}去就完美了，最終用戶看到的頁面是site_mini與restore_password的組合。
>[danger]注意：如果一個主題的控制器沒有設置布局模板，那么控制器模板一定要是一個完整html文件。
## 四、主題皮膚
皮膚的目錄下也有一個config.php，這個配置文件的信息和主題是完全一致的。
css目錄放模板要用到的樣式文件。
images目錄放模板要用到的圖片文件。
皮膚的切換可以在后臺的主題選項中去選擇。
>[danger]注意：如主題沒有多個皮膚，就放一個default的目錄就夠了。
## 五、控制器模板
在之前的課程中講到控制器在views下，每個控制器就是一個目錄，目錄的名稱與控制器文件的名稱一致，以simple控制器為例，他的目錄下就有以下模板文件
打開controllers下的simple.php，能找到如下的代碼片斷，這些代碼就是指向各自的控制器模板文件。
~~~
$this->redirect('login');
$this->redirect('cart');
$this->redirect('cart2');
~~~
有關模板目錄結構的內容就到這里，下一課我再講解模板標簽的使用。
>[warning]如有不明白的地方，留言或是加入我們?“三眾技術QQ交流群”一起討論
## 關于我們
>[danger][三眾科技](http://www.sunzoon.com)資訊平臺——大道至簡，悅你所閱！
>本教程由[三眾簡悅](http://it.sunzoon.com)原創，轉載請注明出處，作者：bobball，由bobo整理成看云書籍
三眾技術交流群：**543102562**
歡迎大家加入我們，共同討論IT，互聯網技術。同時可以掃描下面的二維碼關注我們，謝謝！
