原來如此

網路開店購物系統 => ECShop 模板修改、調整 => 主題作者是: andy 於 七月 24, 2011, 02:31:34 下午

主題: 認識 EC 模版
作者: andy七月 24, 2011, 02:31:34 下午
EC 的佈局分為三個大區塊,page_header.lbi、*.dwt、page_footer.lbi,如下圖:
ec-035   
其中的page_header.lbi(頁首)和 page_footer.lbi(頁尾)是固定的,每個網頁的頂部和底部都會用到
 但是中間的 dwt 檔是隨著頁面的不同而載入不同的 dwt(模版檔),而 dwt(模版檔)也會根據各頁面的需求載入相關的庫檔案,這些庫檔案位於模版目錄的 library 資料夾內
 ec-036   

如果不知道你的模版目錄在哪裡?請連接到你的首頁(建議用FireFox (http://moztw.org/dl/)),從功能表的「檢視」「網頁原始碼」可以看到模版目錄,如圖:
 ec-037
 從上圖可以看出,themes/default 這個模版使用了 style.css ,style.css 是每個模版的預設樣式表,通常是藍色,如果你的模版有咖啡色主題,模版目錄內就會有一個 style_coffee.css,themes/default/images 目錄內也會有一個 coffee 資料夾存放對應的圖片
 ec-038   
ec-039
 EC 的模版使用了 smarty 樣版引擎,在模版檔案裡除了HTML標籤,你還會看到類似 {$feed_url} 這樣的標籤,這些標籤都是 smarty 變數,不能隨意更改或刪除,另外有的像  {* 包含?本檔案 *} 這樣的標籤,這些標籤是 smarty 的註解,和HTML的註解一樣。
 ec-040
大致聊解 EC 的模版之後,接下來就可以依你的喜好改造模版了,在這之前,請開啟你的 FireFox 安裝 FireBug (https://addons.mozilla.org/zh-TW/firefox/addon/1843/) 外掛