第九课 iWebShop模板开发

模板的开发应该说是商城二次开发最多的一部分，很多客户买了一套商城系统，第一件事就是修改界面，这一节课我们就讲一讲在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} 这个标签来实现的，因为系统在运行时会自动把此标签替换为浏览器要访问的普通模板内容，所以你可以把这个标签理解为是一个普通模板，他被嵌入在布局模板之中

如defaultsimple estore_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的组合。

注意：如果一个主题的控制器没有设置布局模板，那么控制器模板一定要是一个完整html文件。

四、主题皮肤

皮肤的目录下也有一个config.php，这个配置文件的信息和主题是完全一致的。

css目录放模板要用到的样式文件。

images目录放模板要用到的图片文件。

皮肤的切换可以在后台的主题选项中去选择。

注意：如主题没有多个皮肤，就放一个default的目录就够了。

五、控制器模板

在之前的课程中讲到控制器在views下，每个控制器就是一个目录，目录的名称与控制器文件的名称一致，以simple控制器为例，他的目录下就有以下模板文件

打开controllers下的simple.php，能找到如下的代码片断，这些代码就是指向各自的控制器模板文件。

$this->redirect("login");
$this->redirect("cart");
$this->redirect("cart2");

有关模板目录结构的内容就到这里，下一课我再讲解模板标签的使用。

如有不明白的地方，留言或是加入我们 “三众技术QQ交流群”一起讨论

关于我们

三众科技资讯平台——大道至简，悦你所阅！
>本教程由三众简悦原创，转载请注明出处，作者：bobball，由bobo整理成牛骨文书籍

三众技术交流群：543102562

欢迎大家加入我们，共同讨论IT，互联网技术。同时可以扫描下面的二维码关注我们，谢谢！

三众科技服务号