shopex是程序和模板分離的，這樣就大大方便了大家可以做出自己漂亮的外觀網站， 雖然很多地方分離得不夠，比如一些核心的業(yè)務流程區(qū)基本大家就很難修改了，但是大部分還是滿足網站基本要求的。

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

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

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

??? 2.為什么大家建議不要修改zheme呢???首先，修改它沒意義。上面說了，第一次加載后zheme就等于完成了他的任務了，只要不強行重新加 載，zheme對系統(tǒng)沒任何影響。其次，如果你修改了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可以 隨便寫，但是不能重復。

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

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

? 那們可以修改掛件模板。
找到掛件下的goods目錄，新建一個a.html文件 復制里面的default.html內容。
再來修改a.html內容。

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

里面<{capture name=titleImg}>里面很多變量和定義，這些是關系到后臺掛件設置的內容以及系統(tǒng)輸出的內容，我們不能動。

我們只要修改模板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的模板機制，理解了就很好制作和添加掛件了。

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

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

???? 功能模板之所以叫功能模塊，那是因為他緊密結合系統(tǒng)，輸出程序最核心的部分，是程序底層代碼了，這些不是我們一般人可以修改的，也不是一般人可以隨著增加 的，
他是程序早封裝好，為你打包準備好了的。你要做的就是把各個功能漂亮的組合在一起，做個漂亮的網站出來。

??????怎么去組合這些功能，那你首先得布局，那你就得會HTML代碼了。
后臺編輯源代碼，把需要表現功能的地方一律以widgets? ID替換，
注意，這個地方要解析下，很多人這里會卡著一下，想不明白。

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

???? 也就是說 widgets ID指向的內容是你用ID記錄對應著的程序內置的封裝的功能模塊，是系統(tǒng)內置的，你只有增加和刪除的權利。當然你也可以自己寫 widgets? ，但是一般的人做的只能做哪些簡單替換HTML代碼的以供后臺方便修改的所謂掛件，這些都不和系統(tǒng)核心緊密結合的。

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

轉載于:https://www.cnblogs.com/luoine/archive/2011/03/03/1970043.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的快速理解shopex模板机制经验教程(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。