快速理解shopex模板機制經驗教程(一)

快速理解shopex模板機制經驗教程(一)
http://www.cnblogs.com/luoine/archive/2011/03/03/1970043.html

shopex是程序和模板分離的，這樣就大大方便了你們能夠作出本身漂亮的外觀網站， 雖然不少地方分離得不夠，好比一些核心的業務流程區基本你們就很難修改了，可是大部分仍是知足網站基本要求的。

   首先，說說模板下的theme.xml，官方是這麼說的，theme.xml是整個模板中最重要的部分，全部模板的配置信息都是存在這個xml中的，包括 板塊的位置、配置信息，邊框的信息等等。第一次加載模板時，theme.xml中包含的信息被讀入數據庫，即模板的初始化，之 後用戶即可以在可視化界面中進行板塊的增刪改和對原有的板塊進行配置。配置信息保存在數據庫中，用戶能夠經過導出模板來下載到最新的帶配置信息的 theme.xml，經過「恢復默認」來應用新的theme.xml。

這個意思表達得仍是比較清楚了，我再詳細補充下。

    1.比方說第一次加載模板時，theme.xml中包含的信息被讀入數據庫，即模板的初始化。意思就是這個zheme數據庫只會加載他一次，第二次是不會 加載的，除非你強行要恢復默認，數據庫纔會從新加載讀取zheme的信息。明白了這點，因此只要加載第一次後，你能夠隨便修改zheme啊，只要你不強行 恢復默認的話，zheme此時不對數據庫任何影響，程序也不會讀取和應用到zheme。

    2.爲何你們建議不要修改zheme呢?  首先，修改它沒意義。上面說了，第一次加載後zheme就等於完成了他的任務了，只要不強行從新加 載，zheme對系統沒任何影響。其次，若是你修改了zheme的話，哪天不當心強行恢復默認的話，就會致使某些頁面不能輸出 你被修改的掛件內容。由於zheme是告訴數據庫在哪一個頁面哪一個位置輸出哪一個內容。

    3.信息保存在數據庫中。意思就是你的全部可視化編輯的操做數據和記錄所有保持在數據庫裏面，好比可視化刪除了掛件，編輯了掛件，添加了掛件。你在後 臺代碼編輯的時候他會保存到對應的html文件裏（是否保存在數據庫官方未說）。這點就是要告訴咱們，記得必定要數據庫配置備份，備份生成 的文件就是zheme-bak.xml，好比你錯誤的刪除了掛件，這個操做已經記錄在數據庫裏面，你經過點恢復zheme- bak.xml，那麼數據庫裏面的這個操做記錄就會被擦去，這個掛件就沒有刪除被恢復。

    4.能夠經過導出模板來下載到最新的帶配置信息的theme.xml，經過「恢復默認」來應用新的theme.xml，也就是上面的意思，經過 theme.xml這個文件，方便你們反覆擦寫數據庫記錄，實際zheme就是數據庫配置信息的備份文件。

    爲何要引入theme.xml呢？上面說了，能夠方便你們備份配置信息反覆擦寫數據庫。其次，就是通用模板的共享。模板包含了2個主要文件，一個是 html框架文件，這些是最外層框架佈局和大體顯示樣 式，二個是zheme.xml配置文件，zheme配置文件告訴程序要在 哪一個頁面哪一個位置輸出哪一個內容。好比zheme裏面所有記錄了掛件配置信息，經過zheme程序才能真正和模板結合起來輸出重要信息內容。html框架文 件是死的，zheme記錄的掛件輸出的內容是活的。正是有了zheme傳遞給程序的配置信息，程序才知道什麼位置輸出什麼內容。配置信息最終是要傳遞到數 據庫裏面，程序才能識別和輸出內容。若是沒有引入zheme，那麼這些保存在數據庫的配置信息就不方便共享，由於要共享數據庫。有了zheme，數據庫配 置信息就能夠以文件存在的形式方便你們互相轉移共享。


     再說說部分人問的widgets ID中ID的理解。ID就是身份，就是給這個widgets一個惟一的身份，以便程序認識和記住這個widgets輸出正確的內容。若是不作ID辨認，程 序會自動默認排列順序，致使輸出內容錯位，也就是說，你寫的ID數據庫就會記錄這個ID，而後數據庫經過這個ID輸出你掛件設置的內容。也就是說ID能夠 隨便寫，可是不能重複。

======================================================================================

再說說  掛件下模板的修改。
比方說首頁列表商品下的信息描述，系統默認是 名字在上面，價格在下面。
若是咱們想要 價格在上，商品名在下呢，好比這種效果

  那們能夠修改掛件模板。
找到掛件下的goods目錄，新建一個a.html文件 複製裏面的default.html內容。
再來修改a.html內容。

先來分析default.html裏面的代碼

裏面<{capture name=titleImg}>裏面不少變量和定義，這些是關係到後臺掛件設置的內容以及系統輸出的內容，咱們不能動。

咱們只要修改模板html代碼，就是在以最後一個<{capture 結尾的地方的後面代碼，就是輸出代碼，找到輸出的html代碼
就是以 <div class="itemsWrap <{if $setting.column > 1 &&開頭的，
咱們再找到 設置圖片在上的那部分代碼
<{elseif $setting.goodsImgPosition=="top"}>
            <{$smarty.capture.goodsImg}>
            <{$smarty.capture.goodsName}>
            <{$smarty.capture.goodsDesc}>

這3個smarty的代碼就是分別輸出圖像，商品名字，商品描述的。
咱們把商品名字 和描述互換位置，就能夠把價格調整在上面。
也能夠修改其餘HTML代碼 達到更多的效果。

有羣友在羣問 掛件在哪？怎麼添加掛件？怎麼加更多的商品列表。
    這個問題是剛剛上手的時候也想了一陣子，弄不明白掛件是幹嗎的，關鍵仍是不理解shopex的模板機制，理解了就很好製做和添加掛件了。

     掛件是功能模塊，是程序核心，官方是這麼說的，關鍵是怎麼理解。

     一套程序是有不少功能的，這很好理解吧，好比首頁上的導航模塊，他自動列出了你後臺添加的欄目，這不就是實現導航功能嗎？
     首頁上的商品列表，他會自動列出你後臺添加的商品，這不是實現了商品展現功能嗎？？公告區的文章列表，能夠自動列出你添加的新聞公告，這不就是功能嗎。一 套程序就是爲了實現各個功能而互相有機結合起來的。

     功能模板之因此叫功能模塊，那是由於他緊密結合系統，輸出程序最核心的部分，是程序底層代碼了，這些不是咱們通常人能夠修改的，也不是通常人能夠隨着增長 的，
他是程序早封裝好，爲你打包準備好了的。你要作的就是把各個功能漂亮的組合在一塊兒，作個漂亮的網站出來。

      怎麼去組合這些功能，那你首先得佈局，那你就得會HTML代碼了。
後臺編輯源代碼，把須要表現功能的地方一概以widgets  ID替換，
注意，這個地方要解析下，不少人這裏會卡着一下，想不明白。

     你輸入 widgets ID 只是告訴程序你在這個地方佔了個位置，挖了一個坑，這個時候 ，程序是不知道你這個坑要放啥東西啊，不知道你寫的widgets ID是什麼意思啊，因此程序在這個地方不會輸出任何代碼，
在後臺可視化編輯中，就顯示爲空白區。你必須到後臺可視化編輯裏面去添加一個功能附加在這個widgets ID上，這樣，數據庫就記錄了你的操做ID，程序就明白你給這個ID附加的功能，保存後，程序會按照他記錄的ID，在widgets上替換 輸出程序早封裝好的 功能模塊，也即你們所謂的掛件。

     也就是說 widgets ID指向的內容是你用ID記錄對應着的程序內置的封裝的功能模塊，是系統內置的，你只有增長和刪除的權利。固然你也能夠本身寫 widgets  ，可是通常的人作的只能作哪些簡單替換HTML代碼的以供後臺方便修改的所謂掛件，這些都不和系統核心緊密結合的。

因此，掛件在哪？？掛件在系列內部自帶的封裝的。
     怎麼添加掛件？  你首先必須定義一個 widgets  ID  ，而後去後臺可視化編輯把內置功能賦予這個 widgets ID，程序記錄後，就會在前臺頁面替換 widgets ID的內容 輸出 你賦予的功能代碼。
     後臺只能看見widgets  ID 必須經過程序識別輸出後 ，在前臺才能看見widgtes的效果（後臺可視化編輯實際就是經過了程序輸出了）。