ECMall
模板开发文档
前
言
欢迎阅读
ECMall
模板制作教程，通过阅读本教程可快速上手
ECMall
模板的使用和制作。
ECMall
模板制
作要求用户具备
XML
、
XHTML
和
CSS
基础知识；至少掌握一种文本编辑器或网页制作工具
(
如：
EditPlus,Dreamweaver,Textmate
等
)
；
本教程还将及一些模板代码，
如从没有了解过
Smarty
建议阅读
Smarty
帮助手册。
第一节
-ECMall
模板机制介绍
通过阅读本节你将了解：
1.
ECMall
模板的组成和机构
2.
ECMall
模板机制工作原理
ECMall
页面模板由布局
(layout)
、模块
(module)
、皮肤
(skin)
组成，所有模板文件都保存在
ECMall
根目
录的
themes
目录下，其中两个目录
mall
和
store
，
mall
目录包含了商城的所有布局、模块、皮肤，
store
目
录包含了店铺所有布局、模块、皮肤，两个目录的结构是完全一样。下面首先介绍
mall
目录下的结构。
mall
目录包括
layout
、
resource
、
skin
三个目录，其用途分别为：
Layout
目录
-
用于存放
layout
文件。
layout
目录下的每个子目录里存放的是某一个页面的
layout
文件
（
layout
目录介绍请见附表
1
），如
homepage
目录就是商城首页的布局目录
,
里面有一个
default.layout
文
件这就是商城首页的布局文件，
在这个目录里可以存在多个布局文件，
布局文件是一个标准的
XML
文档，
你只
需要写简单的几个标签
（以下称为布局描述语言）
描述整个页面的布局架构，
在以后的章节会详细介绍布局文
件的制作方法。
resource
目录
-
用于存放内容模块文件。模块是由布局文件调用的，内容是
HTML
或模板代码组成，在以
后的章节会详细介绍模块制作方法。
skin
目录
-
存放皮肤，目录中每个目录对应一个
skin
，如
default
是
ECMall
默认皮肤，其中包括了
CSS
文件，和图片以及
JS
文件，在以后的章节会详细介绍皮肤制作方法。
ECMall
的每一个页面的模板都包含以上介绍的元素，原理是模板引擎将布局文件中的布局描述语言解析，
将文件中描述的页面布局和模块部署位置输出一个标准的
XHTML
文档。
第二节
-
布局文件制作方法
通过阅读本届你将了解：
1.
ECMall
模板布局描述语言的标签
2.
ECMall
模板布局描述制作方法
上节简单的介绍了布局文件，本节将详细介绍布局文件的制作方法。布局文件的内容是布局描述语言，布
局描述语言是基于
XML
的，
XML
是一种标记语言，
ECMall
定义了
4
个简单的标签
row
、
col
、
library
、
item
，
你只需要使用这四个简单的标签就能描述一个自己想要页面
:
row
标签
-
标记一行，支持的属性包括
id
、
class
、
allowEdit
col
标签
-
标记一列，支持的属性包括
id
、
class
、
allowEdit
libray
标签
-
标记的是一个模块容器
item
标签
-
标记的是一个模块，支持的属性包括
id
和
src
。
下面介绍如何制作
ECMALL
的布局文件
<?xml version="1.0"?>
<template>
<row id="region1" allowEdit="false">
<library>
<item id="header" src="themes/mall/resource/page_header.html" />
<item id="search_form" src="themes/mall/resource/search_form.html" />
</library>
</row>
<row id="mc_home">
<col id="region2" class="column1">
<library>
<item id="mc_menu" src="themes/mall/resource/mc_menu.html" />
</library>
</col>
<col id="region3" class="column2">
<library>
<item id="mc_home" src="themes/mall/resource/mc_home.html" />
</library>
</col>
</row>
<row id="footer" allowEdit="false">
<library>
<item id="page_footer" src="themes/mall/resource/page_footer.html" />
</library>
</row>
</template>
以上是会员中心首页的布局文件的内容，该文件在根目录的
themes/mall/layout/mc_home/default.layout
，所描述的布局如下图：
代码的第一行“
<?xml
version="1.0"?>
”声明文档是一个
XML
文档。后面
<template>...</template>
是根
节点，
XML
文档标准是必须存在一个根节点的，
template
节点的子节点就是上面介绍的
4
个标签，用于描述页
面布局，这个页面分为上中下三行，中部分为两列。
第一行代码
<row id="region1" allowEdit="false">
<library>
<item id="header" src="themes/mall/resource/page_header.html" />
<item id="search_form" src="themes/mall/resource/search_form.html" />
</library>
</row>
这段代码用
row
标签标记一行，定义了一个
ID
为
region1
，这里需要注意下每个标签都应该有一个唯一
ID
，不能和其他标签的
ID
冲突，一旦冲突页面可能会无法正常显示，这里还定义了
allowEdit
属性为
false
，
这表示这个标签下的模块，在模板编辑模式下是无法拖拽的，其他模块也无法拖放到这里。这个标签下调用了
两个模块，所以必须有一个模块的容器标签“
<library></library>
”，“
<item id="header"
src="themes/mall/resource/page_header.html" />
”标记了调用一个模块，这里
ID
属性必须和
src
属
性对应的模块文件中顶级元素
ID
相同
,src
是模块的相对路径。
第二行代码：
<row id="mc_home">
<col id="region2" class="column1">
<library>
<item id="mc_menu" src="themes/mall/resource/mc_menu.html" />
</library>
</col>
<col id="region3" class="column2">
<library>
<item id="mc_home" src="themes/mall/resource/mc_home.html" />
</library>
</col>
</row>
这一行分为两列，
在
row
标签里我们定义了两列，
第一列的
ID
为
region2
，
第二列的
ID
为
region3
，
这
两列分别调用了一个模块，这和第一行讲解的是一样，这里需要注意的是
row
标签可以包含多个
col
、
row
标
签，也可以包含一个
library
标签，但不能同时包含不同的标签，比如：
1.
<row id="mc_home">
<col id="region1">
</col>
<row id="region2">
</row>
</row>
2.
<row id="mc_home">
<col id="region1">
</col>
<library>
................
</library>
</row>
上面的两段代码都是错误的，
col
标签可以包含
row
标签但不能再包含
col
标签，
col
标签也不能同时包含
row
和
library
，比如
<col id="col1">
<row id="region1" />
<library>
................
</library>
</col>
这样也是错误的。
最后讲解布局第三行的代码：
<row id="footer" allowEdit="false">
<library>
<item id="page_footer" src="themes/mall/resource/page_footer.html" />
</library>
</row>
这一行和第一行的代码几乎相同，只是调用的模块不同而已，
allowEdit
为
false
禁止编辑这一行。
第三节
-
模块文件制作方法
ECMall
的模板机制中所有的内容都是在模块中来实现的，
上一节中讲的布局文件仅仅是用于页面布局的描
述，其中没有任何页面内容，
ECMall
的模块主要由
HTML
代码和模板语句，模板语句是兼容
smarty
的语法
的。在后台模板管理用户可以可视化编辑页面的内容，任意拖拽模块，所以模块必须要按照
ECMall
模块规范
制作，商城的模块文件存放在根目录的
themes/mall/resource
，店铺的模块文件存放在根目录的
themes/store/resource,
下面举例讲解下
themes/mall/resource/site_news.html
文件的内容，
这个模块
是站内快讯的模块。
<div id="site_news_content" class="colbox">
<!-- {if $article_list} -->
<div class="colboxcontent" >
<ul class="articles_list">
<!-- {foreach from=$article_list.data item=article}
н
д
у
б
-->
<li><span class="time">({$article.formated_add_time})</span><a href="{url
src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|e
scape}</a></li>
<!-- {/foreach} -->
</ul>
<div class="pagechanger">{page_links from=$article_list.info url=$url_format}</div>
</div>
<div class="colbtm"></div>
<!-- {else} -->
<div class="colboxcontent format_article"> {$article.content} </div>
<!-- {/if} -->
</div>
这里面有一个
div
，
id
为
site_news_content
，这里需要注意的是每个模块的
ID
必须是唯一的，不能和其
他模块重命名，每个模块文件里面只能有一个根元素，如果存在一个以上根元素就无法正常操作了，如一下代
码：
<div id="site_news_content" class="colbox">
<!--
省略的代码
-->
</div>
<div id="site_news_content2" class="colbox">
<!--
省略的代码
-->
</div>
如果一个模块文件的内容是这样，存在两个根元素就是错误的。
第四节
：皮肤文件制作方法
皮肤是由
CSS
和图片组成，商城的皮肤文件位于根目录的
themes/mall/skin
目录
,
商城的皮肤文件位于
根目录的
themes/mall/skin
目录，一个皮肤是一个目录，如默认皮肤
default
，目录里包含多个
css
文件，
下面介绍下每个文件的作用。
商城的
CSS
文件说明
文件名
作用
article.css
站内快讯，帮助中心页面的
CSS
样式文件
category.css
商城搜索，
团购列表，
商品分类页面的
CSS
样式文件
global.css
整个商城包括店铺的全局
CSS
文件
mall.css
商城首页的
CSS
文件
mallbase.css
商城全局
CSS
文件
member.css
用户中心页面
CSS
文件
shopping.css
购物流程页面的
CSS
文件
storelist.css
店铺列表页面的
CSS
文件
店铺的
CSS
文件说明
文件名
作用
goods.css
团购商品，商品页面的
CSS
文件
storebase.css
店铺页面的
CSS
文件
在
CSS
可以定义对应的页面的样式，
皮肤也可以添加
Javascript
，
你只需要在皮肤目录里的
JS
目录添加你
的
js
文件，比如一个
demo.js
，文件名后缀必须是
.js
。为了减少
HTTP
请求和节省流量，
EMall
会将页面需要
的
css
打包和压缩处理，
需要注意的是在店铺的页面都会调用当前商城皮肤目录下的
global.css
文件里的代码