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

文件裏的代碼