ECMall2.x模板製做入門系列之1（認識ECMall模板）javascript
從ECMall2.0全新架構發佈以來，隨着版本的不斷更新，ECMall已經逐漸走向一個穩定時期，是時候整理一些實用教程了。下面給你們帶來一個模板製做入門教程。
申明：本人第一次寫教程。可能只能說一些比較淺顯的基礎知識。條理性可能不是很到位，說得不對的地方歡迎拍磚並指正，目的是但願經過此次教程能讓新手們對模板有一個比較系統的認識。
一.ECMall的模板文件在網站中怎麼分佈的。怎麼找到一個頁面所對應的模板
theme/ 主題目錄
商城模板
theme/mall/ 包含全部商城模板，裏面的每一個目錄即爲一套模板
theme/mall/default/ 商城默認模板，裏面的html文件是模板文件，theme.info.php主題信息配置
theme/mall/default/styles/ 皮膚目錄，裏面每個目錄即爲一套皮膚
theme/mall/default/styles/default/ 默認皮膚目錄，style.info.php爲皮膚配置信息，screenshot.jpg主題截圖，preview.jpg爲主題預覽圖
店鋪模板
theme/store/ 包含全部店鋪模板
theme/store/default/ 默認店鋪模板
theme/store/default/styles/ 皮膚目錄，裏面每個目錄即爲一套皮膚
theme/store/default/styles/default/ 默認皮膚目錄，style.info.php爲皮膚配置信息，screenshot.jpg主題截圖，preview.jpg爲主題預覽圖php
引用:css
與模板相關的幾個概念
1.主題
嚴格意義上來說，你們在論壇裏常說的一套模板，在ECMall2中被定義爲一個主題。一個主題是一套模板和一套皮膚的組合，這可能跟其餘某些開源產品有所區別。一套模板能夠對應多套皮膚從而造成多個主題。好比 默認模板+粉紅皮膚 = 默認粉紅主題，默認模板+淡藍皮膚 =默認淡藍主題，這樣就能在網站後臺（設置->主題設置）看到這兩個主題。模板和皮膚的概念我接着往下說。
2.模板、皮膚
模板負責決定頁面中都由哪些數據、信息構成。
從網頁製做角度來看。模板就是一系列HTML網頁文件構成。
皮膚負責決定頁面中的數據、信息如何展現給用戶。
皮膚就包含圖片、層疊樣式表CSS、JAVASCRIPT等。html
如何找到當前頁面對應的模板文件java
引用:ios
強烈建議不要修改默認模板，不然之後升級會很麻煩。若是要修改咱們能夠新建一套，而後在後臺啓用新主題
數組
在製做模板前先掌握摸清模板的藏身之處是很得力的，知己知彼百戰不殆，廢話少說了，動真格的，舉例給你們說明。
例一：分析註冊頁面對應哪些模板文件
經過首頁點註冊進入註冊頁面，發現地址欄的地址爲（須要關閉僞靜態功能）：cookie
引用:session
http://ecmall.shopex.cn/demo/index.php?app=member&act=register&ret_url=架構
前面的http://ecmall.shopex.cn/demo/是網站訪問的路徑這個不用多說，
這裏的index.php就是網站根目錄那個index.php文件，這個是php程序文件，在ECMall中是系統入口文件，全部前臺頁面必須經過這個入口進行訪問（固然後臺也有入口admin/index.php）
咱們分析模板要看的是app和act兩個參數：這裏的是app=member和act=register。
這裏的app、act表明什麼含義呢？
app是英文單詞application的縮寫，意思是「應用」，那麼這裏咱們訪問的就是一個叫member(意爲會員)的應用
act是英文單詞action的縮寫，意爲「行爲」，那麼這裏咱們訪問的就是member應用的register行爲
引用:
插播廣告
一般狀況下
若是地址欄沒有app，那麼app默認爲default
若是地址欄沒有act，那麼act默認爲index
app是放到app目錄下的。進去以後發現有個member.app.php，這個文件就是咱們要找的註冊頁面對應的app文件。
打開member.app.php，文件裏面是php程序代碼，經過搜索「function register」咱們就找到了register act即會員應用的註冊行爲。
這裏function register開始是定義函數的代碼，咱們須要找到結束位置。咱們在這個函數內就能找到這段代碼
引用:
$this->display('member.register.html');
這裏單引號中間的「member.register.html」就是模板文件名了。
ps：可能同窗們不少不是作程序的，若是你很難判斷這個function register函數代碼哪裏是結束，能夠藉助有摺疊功能的編輯器。
如今咱們得知了模板文件名。那麼這個文件在哪裏呢？
有了上頭對模板分佈的基礎認識，能夠下結論其實可能性就兩個，themes/mall/default（默認商城模板目錄）或themes/store/default（默認店鋪模板目錄）。
到了這一步，其實很簡單了。咱們能夠根據頁面的含義來找。這裏的註冊行爲是商城的功能，全部固然在商城模板目錄。這樣模板位置咱們算是找到了，很簡單吧
，先喝口茶，休息下再繼續。
讓咱們來看看這個member.register.html的廬山真面目。
打開後咱們看到了大部分模板都有的這樣的結構
複製內容到剪貼板
代碼:
{include file="header.html"}
......
{include file="footer.html"}
首尾都有{include file="xxx"}這樣的模板標籤，這表明這個模板含有嵌套模板，咱們當前的這個模板嵌套了兩個模板header.html和footer.html，他們的位置與member.register.html同級目錄的。
到目前爲止已經教給你們一種比較通用的找模板的方法。經過這種方法你能夠應付大部分狀況了。
但願你們經過這個教程能對ECMall模板有個全局的認識。強烈建議常常問「這個頁面的模板在哪裏」的同窗認真看看。
二.如何新建一套商城主題。
第一步：複製默認主題
進入theme/mall/目錄，找到default目錄 複製一個復件，重命名，起一個咱們想要的名字「mytheme」
第二步：修改主題配置
修改程序文件須要程序編輯器，這裏給你們推薦本人一直使用的editplus編輯器，比較小巧並且灰常靠譜。
放出個可用的地址http://down.cnzz.cn/info/37178.aspx
下載後，須要進行「去BOM」設置，菜單「工具」-->「首選項」，在設置面板設置爲「老是刪除簽名」以下圖：
進入剛剛複製的那個文件夾（mytheme）裏面，以下圖
打開theme.info.php文件
上面這段代碼是主題的配置信息，其中
version：主題版本，主題做者自行設定版本號
author：主題做者
description：主題描述。
請自行進行修改，修改好後保存。若是你的版本是UTF-8的須要在保存時用文件菜單裏的「另存爲」，選擇UTF-8編碼，這時彈出的提示是否替換，選擇「是」。
第三步：修改預覽圖和縮略圖
主題預覽圖在themes/mall/mytheme/styles/default下
這裏咱們的新主題只有一套默認皮膚，若是再複製styles目錄下的default文件夾，重命名爲newstyle，這時咱們就獲得了由一套模板和兩套皮膚組成的兩套主題了。這裏再次鞏固一下上面講到的ECMall主題的定義。
第四步：啓用新主題
進入後臺「設置」-->「主題設置」，發現咱們新建的主題顯示出來了
點擊「應用」後。便可切換到咱們本身的主題了。
ECMall2.x模板製做入門系列之2（模標籤/語板法）
在ECMall模板中，用"{"開頭，以"}"結尾就構成一個標籤單元，"{"緊接着的單詞就是標籤名。在標籤單元中單詞前含"$"(美圓符)的爲變量名。
資源引用
res標籤
- 功能：返回當前模板當前風格目錄的url路徑
- 實例：{res file=css/ecmall.css}這個標籤在模板編譯後將變成http://商城域名/themes/default/styles/default，注意末尾沒有"/"，返回結果會隨後臺設置的主題變化
lib標籤
- 功能：返回javascript庫的url路徑
- 實例：{lib file=ecmall.js}這個標籤在模板編譯後將變成http://商城域名/includes/libraries/javascript，注意末尾沒有"/"，返回結果不會隨後臺設置的主題變化
url標籤
- 功能：url解析器，可根據後臺僞靜態狀態返回相應url等。
- 說明：若是一個連接的目標頁面須要僞靜態功能，請使用該url標籤，只有當後臺開啓僞靜態並在.htaccess文件爲目標頁面設置了僞靜態規則時url標籤才能解析爲靜態url地址。
- 實例：{url app=goods&id=$goods_id}解析後若是僞靜態成功則返回"goods/19"
include標籤：include 標籤用於在當前模板中包含其它模板。當前模板中的變量在被包含的模板中可用。必須指定 file 屬性，該屬性指明模板資源的位置。實例：
1 |
{include file="header.html"} |
2 |
{* body of template goes here *} |
3 |
{include file="footer.html"} |
模板變量
1. 模板保留變量
模板預置的一些系統變量，包括
- $smarty.now 當前時刻對應的格林尼治時間戳，能夠用{$smarty.now|date}顯示當前日期時間，關於date變量調節器請看下文講解。
- $smarty.get $smarty.post $smarty.cookie $smarty.env $smarty.server $smarty.request $smarty.session同php的$_GET、$_POST、$_COOKIE、$_ENV、$_SEVER、$_REQUEST、$_SESSION變量。非程序人員若是須要了解請參考php相關手冊瞭解。
2. 自定義變量
從php賦值變量。例如在調用該模板的app程序文件中進行賦值
1 |
//在app/default.app.php文件的index方法中$this->display前添加賦值語句 |
2 |
$this->assign('name', 'Tom'); //普通變量 |
3 |
$this->assign('user', array( |
7 |
$this->display('index.html'); |
在themes/mall/default/index.html中顯示變量
1 |
Hello,{$name},your age are {$user.age}！ |
在模板中賦值變量。assign標籤，例在themes/mall/default/index.html中賦值變量
1 |
{assign var="name" value="Tom"} |
3.模板上使用語言項
說明：爲了知足多語言需求，ECMall採用了語言包機制，除掛件外，在模板、js文件中均使用語言項代替直接顯示語言文字。
語言文件：語言文件位於商城根目錄下的languages目錄下，爲當前語言建了一個目錄，若是您用的是sc-gbk版本，則會有sc-gbk目錄，進去以後就能看到屬於前臺控制器的所有語言文件了。除common.lang.php屬於全部app外，每個語言文件都只屬於一個app（ECMall中稱爲控制器）。語言文件屬於某個控制器而不屬於某個模板，同一個模板若是被不一樣控制器調用將使用不一樣語言文件進行語言解析。
在默認控制器對應的語言文件default.lang.php添加語言項"test"：
3 |
'hot_search' => '熱門搜索', |
5 |
'best_recommended' => '精品推薦', |
在index.html模板中顯示語言項"test"
模板中還支持數組形式語言項，在默認控制器對應的語言文件default.lang.php添加語言項"test_array"
03 |
'hot_search' => '熱門搜索', |
05 |
'best_recommended' => '精品推薦', |
06 |
'test_array' => array( |
在index.html模板中顯示語言項"test"
1 |
{$lang.test_array.key1} |
4. 變量調節器
* escape
功能：提供各類編碼功能。
參數：可選參數html、url、quotes、input、editor，缺省爲html html：分別替換變量中的以下字符& < > "爲其html實體代碼，用於按原樣輸出html源代碼。
- url：若是該變量用於儲存url地址，須要進行url編碼
- quotes：在單雙引號字符前添加反斜槓
- input：給輸入框賦值時使用
- editor：當顯示經過文本編輯器錄入的內容，須要用此參數
例如php賦值：
1 |
$this->assign('goods_name', "L'oreal/歐萊雅" . '"' . "清潤全日保溼乳霜" . '"' . "50ml<br /><script>"); |
2 |
$this->display('index.tpl'); |
模板
3 |
{$goods_name|escape:"html"} |
4 |
{$goods_name|escape:"url"} |
5 |
{$goods_name|escape:"quotes"} |
6 |
{$goods_name|escape:"input"} |
7 |
{$goods_name|escape:"editor"} |
輸出結果爲
1 |
L'oreal/歐萊雅"清潤全日保溼乳霜"50ml<br /><script> |
2 |
L'oreal/歐萊雅"清潤全日保溼乳霜"50ml<br /><script> |
3 |
L'oreal/歐萊雅"清潤全日保溼乳霜"50ml<br /><script> |
4 |
L%27oreal%2F%E6%AC%A7%E8%8E%B1%E9%9B%85%22%E6%B8%85%E6%B6%A6%E5%85%A8%E6%97%A5%E4%BF |
5 |
%9D%E6%B9%BF%E4%B9%B3%E9%9C%9C%2250ml%3Cbr+%2F%3E%3Cscript%3E |
6 |
L\'oreal/歐萊雅\"清潤全日保溼乳霜\"50ml<br /><script> |
7 |
L'oreal/歐萊雅\"清潤全日保溼乳霜\"50ml<br /><script> |
8 |
L'oreal/歐萊雅"清潤全日保溼乳霜"50ml<br /><script> |
* nl2br
功能：將換行符替換成<br />
* default
功能：爲變量設置一個默認值，當變量爲空或者未分配的時候，將由默認值替代輸出
1 |
{$var|default:"no title"} |
* truncate
功能：字符串截取。從字符串開始處截取某長度的字符。默認會在末尾追加省略號。
* strip_tags
功能：去除<和>標籤,包括在<和>之間的任何內容。
1 |
{assign var="content" value="<b>文章內容</b>"} |
* price
功能：格式化價格。
1 |
{assign var="goods_price" value="123456"} |
輸出結果爲：¥123,456.00
* date
功能：格式化本地時間和日期。
格式：{$var|date:format}
說明：變量$var必須是格林尼治標準時間，php中gmtime()和模板中$smarty.now獲得的都是格林尼治標準時間，參數format可爲simple、complete或自定義日期格式，缺省爲simple。
2 |
{$smarty.now|date:complete} |
3 |
{$smarty.now|date:Y-m-d H:i} |
輸出結果爲：
* modifier
功能：調用php自定義函數。
格式：{$var|modifier:user_func}
流程控制標籤
1. 條件判斷（if，elseif，else）
模板中的 if 語句和 php 中的 if 語句同樣靈活易用，並增長了幾個特性以適宜模板引擎. if 必須於 /if 成對出現. 可使用 else 和 elseif 子句. 可使用如下條件修飾詞：eq、ne/neq、gt、lt、lte/le、gte/ge、mod、not、==、!=、>、<、<=、>=、%、!使用這些修飾詞時必須和變量或常量用空格格開.
多個條件之間用 and、or、&&、|| 鏈接，實現簡單的邏輯運算
03 |
{elseif $name eq "Wilma"} |
06 |
Welcome, whatever you are. |
10 |
{if $name eq "Fred" or $name eq "Wilma"} |
15 |
{if $name == "Fred" || $name == "Wilma"} |
19 |
{* 下面的語法無效，條件修飾符必須由空格跟其餘元素分開 *} |
20 |
{if $name=="Fred" || $name=="Wilma"} |
25 |
{if ( $amount < 0 or $amount > 1000 ) and $volume >= #minVolAmt#} |
2. 數組遍歷（foreach，foreachelse）
foreach 用於處理簡單數組(數組中的元素的類型一致)。foreach 必須和 /foreach 成對使用，且必須指定 from 和 item 屬性。foreach 能夠嵌套，但必須保證嵌套中的 foreach 名稱惟一。foreachelse 語句在 from 變量沒有值的時候被執行。
from 屬性：指定被循環的數組，數組長度決定了循環的次數。item屬性：單個循環項目的變量名，在循環內部使用。name 屬性爲可選屬性，能夠任意指定(字母、數字和下劃線的組合)。
name 屬性若是指定，foreach循環體內會自動生成以下變量
- $smarty.foreach.foreach_name.index表示本次循環索引，從0開始遞增的整數
- $smarty.foreach.foreach_name.iteration表示本次的循環次數，從1開始遞增的整數
- $smarty.foreach.foreach_name.first表示是不是第一次循環
- $smarty.foreach.foreach_name.last表示是不是最後一次循環
- $smarty.foreach.foreach_name.show表示是否有數據
- $smarty.foreach.foreach_name.total表示循環總次數，也可在循環體外使用
1 |
{* 該例將輸出數組 $custid 中的全部元素的值 *} |
2 |
{foreach from=$custid item=curr_id} |
輸出結果爲：
2 |
$this->assign("contacts", array( |
3 |
array("phone" => "1", "fax" => "2", "cell" => "3"), |
4 |
array("phone" => "555-4444", "fax" => "555-3333", "cell" => "760-1234") |
模板代碼：
1 |
{* 鍵就是數組的下標，請參看關於數組的解釋 *} |
3 |
{foreach name=outer item=contact from=$contacts} |
4 |
{foreach key=key item=item from=$contact} |
輸出結果爲：
3 |
{foreach name=outer item=contact from=$contacts name=my_name} |
4 |
{foreach key=key item=item from=$contact} |
5 |
{$key}: {$item}{if !smarty.foreach.my_name.last}<br />{/if} |
顯示標籤
* cycle
cycle 用於輪轉使用一組值。該特性使得在表格中交替輸出顏色或輪轉使用數組中的值變得很容易。
格式：{cycle values="val1,val2,val3..."}
1 |
{foreach from=$data_list item=data} |
2 |
<tr bgcolor="{cycle values="#eeeeee,#d0d0d0"}"> |
輸出結果爲：
* html_options
自定義函數 html_options 根據給定的數據建立選項組. 該函數能夠指定哪些元素被選定. 要麼必須指定 values 和 ouput 屬性，要麼指定 options 替代。
1 |
$this->assign('cust_ids', array(1000,1001,1002,1003)); |
2 |
$this->assign('cust_names', array('Joe Schmoe','Jack Smith','Jane Johnson','Carlie Brown')); |
3 |
$this->assign('customer_id', 1001); |
模板代碼：
2 |
{html_options values=$cust_ids selected=$customer_id output=$cust_names} |
1 |
$this->assign('cust_options', array( |
4 |
1003 => 'Jane Johnson', |
5 |
1004 => 'Charlie Brown')); |
6 |
$this->assign('customer_id', 1001); |
模板代碼：
2 |
{html_options options=$cust_options selected=$customer_id} |
實例1和實例2輸出結果均爲：
2 |
<option value="1000">Joe Schmoe</option> |
3 |
<option value="1001" selected>Jack Smith</option> |
4 |
<option value="1002">Jane Johnson</option> |
5 |
<option value="1003">Carlie Brown</option> |
* html_radios
自定義函數 html_radios 根據給定的數據建立單選按鈕組。該函數能夠指定哪一個元素被選定。要麼必須指定 values 和 ouput 屬性，要麼指定 options 替代。與html_options不一樣的是html_radios有一個checked屬性。
* html_checkbox
自定義函數 html_checkboxes 根據給定的數據建立複選按鈕組。該函數能夠指定哪些元素被選定。 要麼必須指定 values 和 ouput 屬性，要麼指定 options 替代.。與html_options不一樣的是html_checkbox有一個checked屬性。
* sprintf
說明： 對變量進行格式化。
格式{sprintf lang=my_lang var1=my_var1 var2=my_var2 ...}
在語言文件添加語言項：
3 |
'query_info' => '頁面執行 %0.3f 秒， 查詢 %d 次，在線 %d 人' |
模板中顯示：
1 |
{sprintf lang=query_info var1=query_time var2=query_count var3=query_user_count} |
輸出結果爲：
1 |
頁面執行 0.160 秒， 查詢 3 次，在線 10 人 |
，先喝口茶，休息下再繼續。 