本教程適用於瞭解 ECshop 和 ECshop模板DIY 以及它們的平常使用,在查看前閣下須要至少會使用一種編輯器(exp:Dreamweaver, editplus, emacs, vi, ee ...意思就是可視化的HTML編輯器或者直接文本編輯器,我在講的時候用Dreamwaver來說,這樣比較適合初學者和設計師)。 這個教程目前由我一我的維護，但我相信，過不了多久就會有多人 持續地 維護。其中的內容須要不斷地更新。若是您有興趣參加,嘿嘿，PM我。咱們一塊兒爲你們服務啊. php
經過對本教程的學習，只要您邊看邊跟着作，必定可以學會本身作模板的。:) 下列章節的適用於ECshop程序。 同時這裏許多內容和一些 Smarty相關。 假如您已經熟悉這些內容可跳過不閱讀。假如您是ECshop新手而且想diy一下本身的店鋪， 那您應該認真詳細地從頭至尾讀一遍這些章節。( ps: 你們沒關係張，我會盡可能用人類的語言和你們交流，實在萬不得已纔會用機器語言展現給你們 )css
但願你們可以經過本教程，想要什麼模板都能本身作出來。哈哈！一塊兒加油吧！瀏覽器
第一章節：緩存
讀取這些內容，您將瞭解： 每一個前臺頁面所對應的模板頁面,模板編輯器
文件的目錄結構。 一些最基本的ECshop模板修改方法。 模板的路徑以及相關包含文件的方法(深刻了解Dreamweaver模板製做)。 一些經常使用模板例子講解.模板存放路徑：ecshop/themes/xxxxx 其中的 xxxxx 就是某一套模板，如系統通常會自帶的模板文件名叫作 default, (即：ecshop/themes/default )裏面放的就是安裝好時的默認模板,如下全部的說明都是針對默認模板來說解.操做前提，將您當前使用的模板調整爲default模板,而後清空緩存。接下來咱們進入default目錄,能夠看到如下文件目錄：images/ (存放模板中用到的圖片)post
library/ ( 存放一些小模板文件及重複被用到的模板文件 )學習
style.css (模板樣式文件)網站
index.dwt (首頁的模板 index.php)spa
goods.dwt ( 商品顯示頁的模板 goods.php)設計
*.dwt (表示其它.dwt文件)
蝦米？難道你不相信這些就是模板嗎？好，那我證實給你看看.咱們把把images裏面的logo.gif文件的名字,改成logo2.gif,而後咱們隨便找一張gif圖片，起名爲logo.gif放到images目錄中，而後咱們刷新首頁。看到沒？首頁logo被修改了。若是你以爲大小不合適，那麼咱們打開library目錄中的 page_header.lib 查看源代碼，而後搜索 images/logo.gif 而後看它後面 width="130" height="56" 把130和56改成相應的值就能夠了，到前臺刷新看看。好接下來咱們用dreamweaver打開index.dwt文件,在源代碼中搜索 {$page_title} ，找到後，將{$page_title} 修改成 超級無敵的大賣場. 而後到到瀏覽器前臺刷新，看看頁面有什麼變化。蝦米？沒有發現嗎？看看瀏覽器頭部啊，呵呵，是否是網站的標題被改變了？哈哈，對，{$page_title}就是網站標題的標籤 ( 注： 標籤是從{開始到}結束哦，{和}屬於標籤的一部分 ). 整個ECshop的模板就是一個一個這樣的標籤組成了，控制網站內容和
數據的動態顯示。好比（{$keywords} )控制網站的關鍵字標籤，{$description} :網站描述標籤 ，( 這就是模板中的標籤，每一個標籤都會對應程序裏面的一個值，網站運行時模板引擎會來讀取模板頁面，而後把對應的標籤用對應的值進行替換，就顯示出咱們看到的網站頁面了,明白了吧。這一段內容對於新手來講，可能一會兒不能徹底消化,還有什麼問題就留言，我會更新到這裏來)很簡單8,哈哈，你們真是冰雪聰明，孔明再世啊，這麼快就學會了，若是你上一步你操做很超級很是very的簡單的話，接下來的學習也時同樣的哦.接下來要怎麼改呢？廣告以後咱們繼續。.....黃金廣告位...歡迎購買......須要的話PM我.....(PS:人不能無恥到這個地步)....哈哈...你們不要着急，欲速則不達，呵呵，下面咱們真正開始作ECshop的模板了，( 不懂HTML的觀衆準備好Dreamweaver哦 )1.咱們到/themes/default目錄中，把index.dwt更名爲index_bak.dwt, 而後用Dreamweaver新建一個HTML文件,而後保存到/themes/default目錄中，命名爲 index.dwt, 好，咱們刷新前臺看看，哈哈，什麼也沒有哦. 好，在咱們新建的index.dwt中找到<title>,咱們把<title>和</title>中間的內容替換 爲:{$page_title},在<body>和</body>之間也放入一個{$page_title}, 刷新前臺看看.嘿嘿，看到什麼了？網站標題被打印出來了吧？若有操做時候有彈出對話框:點擊肯定就能夠了，:)2.接下來咱們選擇可視化界面編輯：而後在{$page_title}後面按Enter鍵換行,而後輸入: 商店公告：{$shop_notice}到瀏覽器刷新首頁刷新看看，呵呵。商店公告被調出來了，能夠去網站後臺 系統設置->商店設置->網店信息->商店公告 修改內容，而後到瀏覽器再刷新網站首頁看看，呵呵，商店公告是被動態掉出來的哦.3.繼續在{$shop_notice}後面按Enter鍵換行，而後輸入
代碼:
網站快訊：{foreach from=$new_articles item=article}
{$article.short_title}
{/foreach}
注：換行的地方按Enter鍵哦,好刷新前臺看看 ，呵呵，網站快訊被調出來了哦。好咱們再到網站後臺->文章管理->網站列表->添加文章，選擇 網站快訊這個分類，隨便添加一篇內容，完成後前臺刷新看看。兩篇文章都被動態掉出來了哦。註釋：
引用:
{foreach from=$new_articles item=article} : 循環的開始,
{/foreach} : 循環的結束
$new_articles: 爲要循環的東西，這裏爲網站快訊
{$article.short_title} : 快訊標題的標籤
模式爲：{foreach from=$post item=name}
Content
{/foreach}
{foreach from=$post item=name}和{/foreach}標籤中間能夠任意添加要循環的內容content(能夠爲任意的東西)，循環的次數受到 $post的限制（這裏要填什麼我都會告訴你們的.)name爲當前這個循環的對象。方便調用數據。之後這個循環咱們會常常的用到哦. 仍是不懂也沒有關係，每次遇到我都會講哪裏要怎麼設置的，多用就會了。咱們也能夠這麼寫哦 , 注意： 在代碼編輯的視圖裏面編輯
複製內容到剪貼板
代碼:
<table>
{foreach from=$new_articles item=article}
<tr><td>
{$article.short_title}
</td></td>
{/foreach}
</table>
哈哈，保存,刷新首頁看看，表格被一行一行的循環出來了哦好累啊，今天先寫到這裏，晚上有時間繼續，哈哈若是喜歡就給我點支持啊，多給我提問題，我但願可以更完善幫助更多的人。明天的預告：產品列表調用，還有產品縮略圖哦，呵呵！產品分類調用呢！