獨(dú)立網(wǎng)店模板機(jī)制技術(shù)交付文案

1、獨(dú)立網(wǎng)店模板機(jī)制技術(shù)交付文案v1.0For Ecstore、Shopexport目錄優(yōu)勢(shì)和創(chuàng)新1ShopEx模板機(jī)制的優(yōu)勢(shì)1ShopEx模板機(jī)制的創(chuàng)新1模板機(jī)制中的名詞解釋2掛件區(qū)域（widgets）2掛件（widget）2邊框（border）2系統(tǒng)級(jí)區(qū)域（main）2默認(rèn)模板頁(yè) （default.html）2創(chuàng)建一個(gè)模板包4標(biāo)準(zhǔn)模板包必要的文件41. theme.xml4每個(gè)模板頁(yè)將用到的公共頁(yè)面引用 (header.html、footer.html)5首頁(yè)模板（index.html）6默認(rèn)模板頁(yè)(default.html)7邊框文件夾 （borders）8資源文件夾 （images）8一張

2、模板效果圖（preview.jpg）9標(biāo)準(zhǔn)模板包的備份與還原9標(biāo)準(zhǔn)模板包必要的文件結(jié)構(gòu)12標(biāo)準(zhǔn)模板包必要的文件結(jié)構(gòu)生成工具13模板包的首次加載13模板開(kāi)發(fā)測(cè)試環(huán)境13模板包的首次加載13完善模板包15為模板添加頁(yè)面布局15為模板布局頁(yè)添加掛件16系統(tǒng)級(jí)常用掛件表16掛件的添加和配置16注意事項(xiàng)18創(chuàng)建一個(gè)模板級(jí)掛件18創(chuàng)建一個(gè)模板級(jí)掛件的必備文件結(jié)構(gòu)18創(chuàng)建一個(gè)模板級(jí)掛件mywidget18模板級(jí)掛件綁定到模板23測(cè)試我的第一個(gè)掛件24系統(tǒng)級(jí)資源的重用26重用腳本框架26重用系統(tǒng)級(jí)樣式表26重用前端效果庫(kù)封裝26系統(tǒng)級(jí)區(qū)域<main>的修改27創(chuàng)建一個(gè)模板級(jí)的系統(tǒng)區(qū)域27優(yōu)勢(shì)和創(chuàng)新

3、ShopEx模板機(jī)制的優(yōu)勢(shì)面對(duì)后端開(kāi)發(fā)人員面對(duì)前端開(kāi)發(fā)人員面對(duì)網(wǎng)店運(yùn)營(yíng)人員1.模板掛件機(jī)制靈活的接口調(diào)用讓你輕松并且安全的將數(shù)據(jù)拋向前端,并可方便的構(gòu)建數(shù)據(jù)篩選、配置規(guī)則和界面。2.模板緩存、自定義URL幫你分擔(dān)后端開(kāi)發(fā)壓力，可能你并不需要關(guān)心頁(yè)面靜態(tài)化。1.默認(rèn)集成強(qiáng)大的前端開(kāi)發(fā)框架和接口調(diào)用。2.嚴(yán)格的要求前端工程師模塊化的設(shè)計(jì)思想。1.運(yùn)營(yíng)人員無(wú)需懂得前端開(kāi)發(fā)技術(shù)，可以在管理后臺(tái)進(jìn)行所見(jiàn)即所得的網(wǎng)店的布局調(diào)整，板塊數(shù)據(jù)展示規(guī)則設(shè)定。2.運(yùn)營(yíng)人員可以輕松更換、刪減網(wǎng)店板塊,更換掛件板塊的內(nèi)置風(fēng)格。3. 掛件機(jī)制可以滿足你站外嵌入的需求。ShopEx模板機(jī)制的創(chuàng)新 所見(jiàn)既所得的可視化模板板塊

4、編輯機(jī)制 將布局、區(qū)塊、邊框、數(shù)據(jù) 真正細(xì)分化模板機(jī)制中的名詞解釋掛件區(qū)域（widgets）掛件區(qū)域用于在某個(gè)頁(yè)面預(yù)留掛件(widget)可掛入的區(qū)域。也可以理解為“插槽”、“坑”。每個(gè)掛件區(qū)域可以掛入多個(gè)掛件掛件（widget）掛件是ShopEx模板機(jī)制中的一個(gè)重要角色，它能根據(jù)條件從后端取得數(shù)據(jù)然后根據(jù)“掛件級(jí)頁(yè)面模板”來(lái)包裝成一個(gè)小板塊。例如一個(gè)“商品板塊掛件”，它要先由后端語(yǔ)言（php）來(lái)組織數(shù)據(jù)，然后返回到“掛件級(jí)頁(yè)面模板”。組織數(shù)據(jù)的條件將會(huì)獨(dú)立出一個(gè)可配置頁(yè)面。邊框（border）邊框用于包裝一個(gè)掛件板塊，一套模板里面可能由很多個(gè)邊框風(fēng)格，這些風(fēng)格的名稱和對(duì)應(yīng)的邊框文件 需要定義

5、在模板的描述文件（theme.xml）中，以便可視化編輯時(shí)改變一個(gè)板塊的風(fēng)格。例如一個(gè)“商品板塊掛件”在首頁(yè)要以三種不同的風(fēng)格展示（促銷、熱門、新品.），除了需要在掛件的配置面板中配置數(shù)據(jù)的展示范圍不同，還需要由邊框機(jī)制的配合達(dá)到顏色風(fēng)格的區(qū)別。特別是一些系統(tǒng)級(jí)掛件，為了適應(yīng)不同模板的展示方式，默認(rèn)不會(huì)輸出標(biāo)題和邊框，邊框則可以協(xié)助包裝一下掛件掛入到掛件區(qū)域。系統(tǒng)級(jí)區(qū)域（main）系統(tǒng)級(jí)區(qū)域用于輸出系統(tǒng)的核心交互流程。這些區(qū)域的htmljavascript是不能在模板包中直接定義的，模板包唯一能影響到這些系統(tǒng)級(jí)區(qū)域的是 css樣式定義，因?yàn)槟０灏臉邮奖硎窃谙到y(tǒng)級(jí)樣式之后加載。默認(rèn)模板頁(yè) （d

6、efault.html）默認(rèn)模板頁(yè)是在模板包中 未定義某個(gè)頁(yè)面的布局時(shí)，默認(rèn)調(diào)用的頁(yè)面布局。例如你的模板包中只包含了兩個(gè)頁(yè)面的定義：首頁(yè)、默認(rèn)頁(yè)，那么其他未定義的頁(yè)面在訪問(wèn)時(shí)將優(yōu)先使用默認(rèn)模板頁(yè)，直到你單獨(dú)定義它為止。創(chuàng)建一個(gè)模板包標(biāo)準(zhǔn)模板包必要的文件創(chuàng)建一個(gè)模板包文件夾，例如 fsgw新模板包文件夾的名稱應(yīng)與描述文件中的 id保持一致，并且應(yīng)該由數(shù)字和英文小寫組成。在模板包文件夾內(nèi)創(chuàng)建以下文件：3r 1. theme.xml此文件用來(lái)描述模板包的基本信息，以及模板可能包含的掛件。還用于模板的備份導(dǎo)出，和導(dǎo)入操作中的模板數(shù)據(jù)交換。例如：<?xml version="1.0&qu

7、ot; encoding="UTF-8" ?><theme><name>風(fēng)尚購(gòu)物</name><id>fsgw</id><version>ECStore</version><info></info><author>ShopEx</author><site></site><update_url></update_url><borders><set key="邊欄樣式

8、" tpl="borders/border1.html" /><set key="商品分類" tpl="borders/border2.html" /><set key="商店公告" tpl="borders/border3.html" /><set key="品牌熱賣排行" tpl="borders/border4.html" /><set key="熱銷排行" tpl=&qu

9、ot;borders/border5.html" /><set key="首頁(yè)商品列表" tpl="borders/border6.html" /><set key="頁(yè)尾文章列表" tpl="borders/border9.html" /><set key="購(gòu)買本商品的顧客還買過(guò)" tpl="borders/border10.html" /></borders><views></views&

10、gt;<config></config><widgets></widgets><proinstances></proinstances></theme>xml節(jié)點(diǎn)說(shuō)明name模板包的名稱,將會(huì)出現(xiàn)在管理后臺(tái)模板列表中id首次由開(kāi)發(fā)人員定義，應(yīng)與模板包名稱保持一致,（全英文）version模板包的版本信息info模板包簡(jiǎn)介author模板包作者site模板包作者網(wǎng)址update_url升級(jí)地址，暫未啟用borders模板包包含的邊框定義描述widgets模板掛件描述。系統(tǒng)會(huì)在模板可視化編輯添加掛件后向widget

11、s序列化掛件描述此表只描述最關(guān)鍵的幾個(gè)節(jié)點(diǎn)項(xiàng)2. 每個(gè)模板頁(yè)將用到的公共頁(yè)面引用 (header.html、footer.html)例如:（header.html）<!doctype html><html><head><header> <!-將輸出系統(tǒng)級(jí) style、javascript、mate-><link rel="stylesheet" type="text/css" href="images/fsgw-style.css" /> <!-模板包樣式的

12、引入,（”images/” 是必須的，因?yàn)樵陧?yè)面渲染時(shí)，它會(huì)被替換為絕對(duì)路徑）-></head><body><div class=”body”><div class=”top”><div class=”top-bar clearfix”><div class=”span-auto”>Welcome</div><div class=”span-auto login”><widgets id=”header-login”> <!-一個(gè)掛件區(qū)域，（id 是唯一的）-><

13、/div></div></div><div class=”header”><widgets id=”header-nav”> <!-一個(gè)掛件區(qū)域，（id 是唯一的）-></div>例如:（footer.html）<div class="footer"><div class="copyright"><widgets id="footer-copyright"><!-一個(gè)掛件區(qū)域，（id 是唯一的）-></d

14、iv><footer> <!-將輸出系統(tǒng)級(jí) 業(yè)務(wù)處理javascript用戶自定義的底部信息-></div></body></html>3. 首頁(yè)模板（index.html）例如<require file="header.html"> <!-引入公共的頭部（頭部的掛件區(qū)塊會(huì)被解析）-><div class=”main”> <div class=”banner”><widgets id=index-banner><!-預(yù)留一片廣告展示掛件區(qū)-&g

15、t;</div><div class=”content c-1 clearfix”> <div class=”span-4 m-l”><div class=”mod”><div class=”t”>商品分類</div><div class=”b”><widgets id=index-cat><!-預(yù)留一片商品分類掛件的掛入?yún)^(qū)-></div></div><widgets id=index-m-l><!-預(yù)留一片首頁(yè)左側(cè)掛件區(qū)-> </d

16、iv> <div class=”span-10 m-r”><widgets id=index-m-r><!-預(yù)留一片首頁(yè)右側(cè)掛件區(qū)-> </div></div></div><require file="footer.html"> <!-引入公共的底部（底部的掛件區(qū)塊會(huì)被解析）->4. 默認(rèn)模板頁(yè)(default.html)<require file="header.html"> <!-引入公共的頭部（頭部的掛件區(qū)塊會(huì)被解析）->&

17、lt;div class=”main”><div class=”content clearfix”> <div class=”span-4 m-l”><widgets id=m-l><!-預(yù)留一片左側(cè)掛件區(qū)-> </div> <div class=”span-10 m-r”><main><!-系統(tǒng)級(jí)區(qū)域輸出（可能會(huì)是：會(huì)員中心、購(gòu)物流程、商品搜索結(jié)果、商品詳情、文章）-> </div></div></div><require file="fo

18、oter.html"> <!-引入公共的底部（底部的掛件區(qū)塊會(huì)被解析）->5. 邊框文件夾 （borders） 應(yīng)該建立 borders文件夾， 來(lái)存放 一個(gè)個(gè)的邊框 html，html屬性應(yīng)統(tǒng)一用雙引號(hào)，防止出現(xiàn)模板解析異常例如：borders/border1.html<div class="border1 <$widgets_classname>" id="<$widgets_id>"><!-將輸出被包裝掛件板塊在后臺(tái)定義的邊框 className、id-> <h3&g

19、t;<$title> <!-將輸出被包裝掛件板塊在后臺(tái)定義的標(biāo)題-> </h3> <$body> <!-將輸出被包裝掛件板塊內(nèi)容-> </div>6. 資源文件夾 （images）存放模板資源文件，例如cssjs圖片、swf7. 一張模板效果圖（preview.jpg）模板效果圖是一張直觀的模板效果圖片（120160 px）,可以在管理后臺(tái)模板列表看到它以區(qū)分模板。標(biāo)準(zhǔn)模板包的備份與還原theme.xml 與theme_bak.xml 的介紹與功能在上述中theme.xml為一個(gè)新標(biāo)準(zhǔn)模板包的必要文件，而theme_bak

20、.xml是模板備份后所產(chǎn)生的文件。（如下圖, 一個(gè)新模板包內(nèi)只有theme.xml文件,當(dāng)使用了在管理后臺(tái)通過(guò)模板列表上的 “備份模板” , “模板還原” 下拉框中會(huì)增加一個(gè) “最近一次備份” 節(jié)點(diǎn)。）將兩個(gè).xml文件進(jìn)行修改比較（如下為theme.xml內(nèi)的代碼）<?xml version="1.0" encoding="UTF-8" ?><theme><name>風(fēng)尚購(gòu)物</name><id>fsgw</id><version>ECStore</version

21、><info></info><author>ShopEx</author><site></site><update_url></update_url><borders><set key="邊欄樣式111111" tpl="borders/border1.html" /><set key="商品分類" tpl="borders/border2.html" /><set key

22、="商店公告" tpl="borders/border3.html" /><set key="品牌熱賣排行" tpl="borders/border4.html" /><set key="熱銷排行" tpl="borders/border5.html" /><set key="首頁(yè)商品列表" tpl="borders/border6.html" /><set key="頁(yè)尾文章列

23、表" tpl="borders/border9.html" /></borders>（如下為theme_bak.xml內(nèi)的代碼）<?xml version="1.0" encoding="UTF-8" ?><theme><name>風(fēng)尚購(gòu)物</name><id>fsgw</id><version>ECStore</version><info></info><author>Sho

24、pEx</author><site></site><update_url></update_url><borders><set key="邊欄樣式222222" tpl="borders/border1.html" /><set key="商品分類" tpl="borders/border2.html" /><set key="商店公告" tpl="borders/border3.ht

25、ml" /><set key="品牌熱賣排行" tpl="borders/border4.html" /><set key="熱銷排行" tpl="borders/border5.html" /><set key="首頁(yè)商品列表" tpl="borders/border6.html" /><set key="頁(yè)尾文章列表" tpl="borders/border9.html" /

26、></borders>接下來(lái)進(jìn)入管理后臺(tái)通過(guò)模板列表上的 “模板還原” 至 “默認(rèn)” 節(jié)點(diǎn)（如下圖）再將 “模板還原” 至 “最近一次備份” 節(jié)點(diǎn)（如下圖）每一次的 “備份模板” 的操作，是以數(shù)據(jù)庫(kù)存儲(chǔ)的信息備份以及配置覆蓋到theme_bak.xml 文件內(nèi)，而此操作是不對(duì)原始的theme.xml 文件進(jìn)行修改，覆蓋。標(biāo)準(zhǔn)模板包必要的文件結(jié)構(gòu)標(biāo)準(zhǔn)模板包必要的文件結(jié)構(gòu)生成工具 你可以在線生成一個(gè)基礎(chǔ)的模板包 模板包的首次加載模板開(kāi)發(fā)測(cè)試環(huán)境目前模板的開(kāi)發(fā)測(cè)試環(huán)境比較重要的一個(gè)地方就是網(wǎng)店的后臺(tái)。如果你在做模板的開(kāi)發(fā)，請(qǐng)先在管理后臺(tái)應(yīng)用中心安裝一個(gè)應(yīng)用程序：開(kāi)發(fā)者工具app.安

27、裝方法：點(diǎn)擊管理后臺(tái)右上 “應(yīng)用中心入口”，找到“開(kāi)發(fā)者工具”，進(jìn)行安裝;之后，你將在模板列表上方看到”維護(hù)“按鈕。模板包的首次加載當(dāng)首次構(gòu)建好基礎(chǔ)模板包。此刻應(yīng)將模板文件夾復(fù)制到網(wǎng)店模板目錄既：/themes下這時(shí)你的模板列表中將出現(xiàn)此模板的記錄（如下圖）首次的模板加載應(yīng)通過(guò)文件夾復(fù)制的方式放置到指定位置（/themes/）下。不應(yīng)該直接將其以壓縮包的形式通過(guò)模板上傳加載。完善模板包為模板添加頁(yè)面布局上文提到我們僅構(gòu)建了標(biāo)準(zhǔn)的模板包。下面我們應(yīng)為某些頁(yè)面添加更豐富的布局頁(yè)面文件（如下圖）添加頁(yè)面布局文件時(shí)需要輸入名稱、文件名、和頁(yè)面源碼名稱可以理解為對(duì)文件的備注，文件名會(huì)自動(dòng)追加.html后

28、綴,頁(yè)面源碼會(huì)模板復(fù)制 默認(rèn)布局頁(yè)源碼。在此可以修改html源碼頁(yè)可以只輸入 名稱和文件名先生成html文件到模板包。統(tǒng)一用其他工具編輯頁(yè)面源碼。為模板布局頁(yè)添加掛件 系統(tǒng)級(jí)常用掛件表分類名稱簡(jiǎn)介掛件的添加和配置（下圖：版塊中心）（下圖：掛件配置面板）掛件的添加在模板頁(yè)面可視化編輯中進(jìn)行。添加掛件的基本交互：選擇目標(biāo)版塊區(qū)域（一個(gè)掛件版塊區(qū)域可以掛入多個(gè)掛件版塊）選擇掛件版塊類型 配置版塊標(biāo)題（版塊標(biāo)題將會(huì)在邊框中以<$title>調(diào)用，如果版塊邊框樣式為無(wú)邊框，則標(biāo)題不會(huì)出現(xiàn)于前臺(tái)）掛件版塊模板選擇（一個(gè)掛件可以由多個(gè)對(duì)應(yīng)模板供選擇）邊框樣式選擇邊框?qū)傩耘渲茫╟lassNameI

29、D）掛件相關(guān)配置（例如商品掛件，可以配置商品顯示范圍、數(shù)量、價(jià)格精度等）掛件添加后可以進(jìn)行編輯 位置移動(dòng)等操作。注意事項(xiàng)公用頭部和底部被掛入的掛件版塊將共享于所有引入頭部底部文件的頁(yè)面。如果要在源碼編輯刪除 一個(gè)<widgets>（掛件版塊區(qū)域）標(biāo)簽，請(qǐng)先在可視化編輯中刪除此區(qū)域中的所有的掛件實(shí)例。模板可視化編輯結(jié)束后，注意保存編輯成果。創(chuàng)建一個(gè)模板級(jí)掛件當(dāng)系統(tǒng)內(nèi)置的掛件不能滿足你的要求時(shí)，你可以自己動(dòng)手建立一個(gè)掛件創(chuàng)建一個(gè)模板級(jí)掛件的必備文件結(jié)構(gòu) 配置頁(yè)（_config.html） 配置頁(yè)是在可視化編輯時(shí)用到的配置表單。 配置頁(yè)攔截器（theme_widget_cfg_widge

30、tname.php）可選 配置頁(yè)攔截器用于向配置頁(yè)輸出系統(tǒng)數(shù)據(jù)，例如輸出一個(gè)系統(tǒng)當(dāng)前的商品排序方式數(shù)組。供頁(yè)面 <select>填充選擇。 如果配置頁(yè)不需要從系統(tǒng)內(nèi)取得數(shù)據(jù)，則 此攔截器無(wú)需制作。 掛件攔截器(theme_widget_widgetname.php)掛件攔截器，用于向掛件模板供應(yīng)后端數(shù)據(jù) 掛件描述文件（widgets.php）用于描述掛件基本信息，掛件模板文件、名稱對(duì)應(yīng)關(guān)系。 掛件渲染模板 （widgettpl1.html. widgettplN.html）一個(gè)或多個(gè)掛件模板，需要在掛件描述文件中被描述，以便可視化編輯時(shí)選擇掛件使用的模板。 可視化編輯占位模板 （_

31、preview.html）可選此頁(yè)面用于在可視化編輯時(shí)占位，例如廣告掛件由許多效果和圖片資源加載，在可視化編輯時(shí)影響效率，可以用此頁(yè)面來(lái)代替掛件的渲染，但是掛件攔截器同樣會(huì)把數(shù)據(jù)拋向此頁(yè)面，你可以只取得一些尺寸信息，用邊框和文字代替掛件。如果掛件不需要在可視化編輯模式重定義，則無(wú)需制作此頁(yè)創(chuàng)建一個(gè)模板級(jí)掛件mywidgetmywidget 掛件的目的是實(shí)現(xiàn)一個(gè)根據(jù)管理員的配置在前臺(tái)顯示一組商品信息。1. 在模板目錄建立 widgets文件夾2. 在widgets文件夾內(nèi)創(chuàng)建mywidget文件夾，并進(jìn)入文件夾3. 創(chuàng)建掛件描述文件widgets.php<?php/*掛件的描述文件*/$s

32、etting'author'='掛件作者'$setting'version'='v1.0'$setting'name'=”我的第一個(gè)掛件”;$setting'stime'='2010-12-12'$setting'catalog'=“風(fēng)尚購(gòu)物模板的掛件”;$setting'description' =”我的第一個(gè)掛件的描述”;$setting'usual' = '1' /是否出現(xiàn)在掛件中心首頁(yè).(10)$setting&

33、#39;template' = array( 'default.html'=>HTML展示， 'flash.html'=>用flash展示 ); /掛件包含的模板文件和名稱?>4. 創(chuàng)建掛件配置頁(yè) _config.html （命名規(guī)則定死_config）<!-編寫掛件配置頁(yè)html時(shí)候，不需要body title form等 html標(biāo)簽 。此代碼塊共享 管理后臺(tái)的 資源（javascriptcss）。_config.html代碼塊只是掛件配置對(duì)話框中的一部分。 下列代碼中的 $data 數(shù)組 由掛件配置頁(yè)攔截器返回， smart

34、y 協(xié)助拋向頁(yè)面。$setting數(shù)組 是被保存在數(shù)據(jù)庫(kù)中的配置信息由系統(tǒng)取出，smarty協(xié)助拋向頁(yè)面。 -> <div class="division"> <h4>商品展示規(guī)則</h4><label>排序規(guī)則：</label><select name="orderby"> <foreach from=$data item=orderby key=key> <option value="<$key>" <if $sett

35、ing.goods_orderby=$key>selected</if>><$orderby.label> </option></foreach></select><label>展示數(shù)量：</label><input name=”limit” value=”<$setting.limit>” /> </div>5. 創(chuàng)建掛件配置頁(yè)攔截器（用于取得系統(tǒng)相關(guān)數(shù)據(jù)）theme_widget_cfg_mywidget.php （命名應(yīng)于內(nèi)部代碼函數(shù)名保持一致）<?p

36、hp/*命名規(guī)范 以“theme_widget_cfg_”開(kāi)頭，掛件包名結(jié)尾。運(yùn)行時(shí)系統(tǒng)會(huì)傳入一個(gè)參數(shù)，方便創(chuàng)建 model 等實(shí)例 ，用于取得數(shù)據(jù) */function theme_widget_cfg_mywidget() $app = app:get(b2c); /創(chuàng)建app實(shí)例,這里要用到b2c這個(gè)app下的goods model所有創(chuàng)建b2c app實(shí)例 $model_goods=$app->model('goods'); /創(chuàng)建goods model實(shí)例 return $model_goods->orderBy(); /返回商品排序規(guī)則datemap,在

37、掛件配置模板smarty標(biāo)簽中，統(tǒng)一用 $date 獲得?>6. 創(chuàng)建掛件模板default.html (命名規(guī)則應(yīng)與widget.php掛件描述文件中 $setting'template' 保持一致)<!-掛件模板同掛件配置模板頁(yè)一樣，都是一個(gè)代碼片段，無(wú)需加入bodytitle等html標(biāo)簽。掛件模板中的 <style></style>中定義將會(huì)合并到一個(gè)css文件中被引入到<head>頭部（例如一個(gè)模板布局頁(yè)面同時(shí)掛了兩個(gè) mywidget）。掛件模板中的 image/ 將會(huì)被替換為絕對(duì)路徑，你可以在掛件包中創(chuàng)建一個(gè)imag

38、es文件夾用來(lái)存放掛件相關(guān)的資源。例如 <style>#<widgets_id>_mywidge background:url(images/bg.png) </style>，在渲染到前臺(tái)時(shí)，系統(tǒng)將自動(dòng)替換images/為絕對(duì)路徑。-><div class="GoodsListWrap GoodsList GoodsShow" id=<$widgets_id>_mywidget><if count($data.goods) > 0> <dl> <foreach from=$

39、data.goods item=product name=goodslist> <dd>商品名稱：<$><br />商品價(jià)格：<i><$product.price|default:'0'></i>元 </dd> </foreach></dl><else> <div class='notice'>暫無(wú)商品數(shù)據(jù)</div></if></div>7. 創(chuàng)建掛件攔截器them

40、e_widget_mywidget.php (命名應(yīng)于內(nèi)部代碼函數(shù)名保持一致)<?php/*命名規(guī)范 以“theme_widget_”開(kāi)頭，掛件包名結(jié)尾。運(yùn)行時(shí)系統(tǒng)會(huì)傳入掛件配置信息 */function theme_widget_mywidget(&$setting,&$render) $app = app:get(b2c); $o = &app->model('goods'); $limit = (intval($setting'limit')>0)?intval($setting'limit'):6

41、; $orderby=$setting'goods_orderby'?$o->orderBy($setting'goods_orderby'):null; $filter = array(); $data'goods' = $o->getList('*',$filter,0,$limit,$orderby'sql'); return $data; /根據(jù)掛件配置信息，取出數(shù)據(jù) 返回給掛件模板?>8. 創(chuàng)建可視化編輯占位模板_preview.html (命名規(guī)則定死_preview)<!-這個(gè)

42、文件只用于模板可視化編輯時(shí)，如某些情況不方便直接將掛件呈現(xiàn)于可視化編輯視圖。則可以創(chuàng)建此文件在可視化編輯中代替掛件真實(shí)顯示-><div class="note">我的第一個(gè)掛件</div>模板級(jí)掛件綁定到模板當(dāng)創(chuàng)建好一個(gè)模板級(jí)掛件?？梢栽诠芾砗笈_(tái)通過(guò)模板列表上面的 “維護(hù)” 按鈕綁定掛件到模板。（如下圖，經(jīng)過(guò)綁定維護(hù)后）掛件中心可以看到了測(cè)試我的第一個(gè)掛件下圖為掛件配置對(duì)話框，上文提到，_config.html正式掛件版塊配置時(shí)的一部分，在掛入到模板掛件區(qū)域時(shí)，你還可以包裝掛件所使用的邊框，掛件版塊所使用的掛件模板等信息?？梢暬庉嬛斜粧烊氲綊?/p>

43、件版塊后。（由于我的第一個(gè)掛件定義了_preview.html）所以可視化編輯時(shí)和前臺(tái)真實(shí)效果有區(qū)別。做一下模板編輯保存，看一下前臺(tái)的效果吧選擇其他邊框和掛件配置保存，再看一下效果。系統(tǒng)級(jí)資源的重用重用腳本框架在制作模板、掛件 的過(guò)程中，你可以隨時(shí)使用 腳本框架 Mootools 的公開(kāi)接口，它提供了強(qiáng)大的節(jié)點(diǎn)尋找、強(qiáng)化了javascript數(shù)組、封裝了異步交互。重用系統(tǒng)級(jí)樣式表我們?cè)谇芭_(tái)引入了一個(gè)簡(jiǎn)單的 樣式表封裝(frameworks.css)、里面有常用的布局、浮動(dòng)、字體、內(nèi)外補(bǔ)丁 等class定義。重用前端效果庫(kù)封裝前臺(tái)有一個(gè) 強(qiáng)大的效果庫(kù)封裝（switchable.js），它提供了大部分廣告效果的輕松實(shí)現(xiàn)機(jī)制。還提供了區(qū)塊、圖片延遲加載等機(jī)制。系統(tǒng)級(jí)區(qū)域<main>的修改創(chuàng)建一個(gè)模板級(jí)的系統(tǒng)區(qū)域當(dāng)系統(tǒng)內(nèi)置的掛件不能滿足你的要求時(shí)，你可以自己動(dòng)手建立一個(gè)模板級(jí)的系統(tǒng)級(jí)區(qū)域。1. 在模板目錄建立customsite文件夾。2.