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

目录就是商城首页的布局目录

,

里面有一个

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&amp;act=site_news&amp;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

文件里的代码