ECMall二次开发文档-ecmall模板教程

ECMall二次开发文档-ecmall模板教程
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目录就是商城首页的布局目录,里面有一个yout文件这就是商城首页的布局文件，在这个目录里可以存在多个布局文件，布局文件是一个标准的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.ht ml" />
</library>
</col>
<col id="region3" class="column2">
<library>
<item id="mc_home"
src="themes/mall/resource/mc_home.htm l" />
</library>
</col>
</row>
<row id="footer" allowEdit="false">
<library>
<item id="page_footer"
src="themes/mall/resource/page_footer.h tml" />
</library>
</row>
</template>
以上是会员中心首页的布局文件的内容，该文件在
根目录的
themes/mall/layout/mc_home/y out，所描述的布局如下图：
代码的第一行“<?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.h tml" />
</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.htm
l" />
</library>
</col>
<col id="region3" class="column2">
<library>
<item id="mc_home"
src="themes/mall/resource/mc_home.htm l" />
</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.h tml" />
</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_tim e})</span><a href="{url
src=index.php?app=article&amp;act=site_n ews&amp;id=$article.article_id}">{$article
.title|escape}</a></li>
<!-- {/foreach} -->
</ul>
<div class="pagechanger">{page_links from=$article_
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文件里的代码。