實(shí)施交付類學(xué)習(xí)資源-3模板機(jī)制

優(yōu)勢(shì)和創(chuàng)111模板機(jī)制中的1掛件區(qū)域1掛件1邊框1系統(tǒng)級(jí)區(qū)域11創(chuàng)建一個(gè)111.1每個(gè)模板頁(yè)將用到的公共(header.html、1首頁(yè)模板1默認(rèn)模板頁(yè)7邊框文件夾1資源文件夾1一張模板效果圖99i模板包的首次加完善模板系統(tǒng)級(jí)常用掛件表掛件的添加和配置注意事2創(chuàng)建一個(gè)模板級(jí)掛件的必備文件結(jié)構(gòu)2創(chuàng)建一個(gè)模板22系統(tǒng)級(jí)資源的重2222系統(tǒng)級(jí)區(qū)域<{main}>的修改22優(yōu)勢(shì)和創(chuàng)新ShopEx模板機(jī)制的優(yōu)勢(shì)面對(duì)后端開(kāi)發(fā)人員面對(duì)前端開(kāi)發(fā)人員面對(duì)網(wǎng)店運(yùn)營(yíng)人員2.模板緩存、自定義URL幫你分擔(dān)后3.掛件機(jī)制可以滿足你站外嵌入的求ShopEx模板機(jī)制的創(chuàng)新將布局、區(qū)塊、邊框、數(shù)據(jù)真正細(xì)分模板機(jī)制中的名詞解掛件區(qū)域掛件掛件是ShopEx模板機(jī)制中的一個(gè)重要角色，它能根據(jù)條件從后端取得數(shù)據(jù)然后根據(jù)“掛件級(jí)頁(yè)面模板”來(lái)包裝成一個(gè)小板邊框邊框用于包裝一個(gè)掛件板塊，一套模板里面可能由很多個(gè)邊框風(fēng)格，這些風(fēng)格的名稱和對(duì)應(yīng)的邊框文件描述文件（themexml）中，以便可視化編輯時(shí)改變一個(gè)板塊的風(fēng)格。 系統(tǒng)級(jí)區(qū)域這些系統(tǒng)級(jí)區(qū)域的是css樣式定義，因?yàn)槟０灏臉邮奖硎窃谙到y(tǒng)級(jí)樣式之后加載。默認(rèn)模板頁(yè)定義某個(gè)頁(yè)面的布局時(shí)，默認(rèn)調(diào)用的頁(yè)面布局。例如你的模板包中只包含了兩個(gè)頁(yè)面的定義：首頁(yè)、默認(rèn)頁(yè)，那么其他未定義的頁(yè)面在時(shí)將優(yōu)先使用默認(rèn)模板頁(yè)，直到你單獨(dú)定義它為止。創(chuàng)建一個(gè)模板標(biāo)準(zhǔn)模板包必要的文件創(chuàng)建一個(gè)模板包文件夾，例如新模板包文件夾的名稱應(yīng)與描述文件中id保持一致，并且應(yīng)該由數(shù)字和英文小寫(xiě)組成。<?xml<?xmlversion="1.0"encoding="UTF-8" <setkey="邊欄樣式tpl="borders/border1html<setkey="商品分類tpl="borders/border2html<setkey="商店公告tpl="borders/border3html<setkey="品牌熱 "tpl="borders/border4html"<setkey="熱 "tpl="borders/border5html"<setkey="首頁(yè)商品列表tpl="borders/border6html<setkey="頁(yè)尾文章列表tpl="borders/border9html<set "xml節(jié)點(diǎn)說(shuō)明模板包的名稱,將會(huì)出現(xiàn)在管理模板列表widgets序列化掛件描每個(gè)模板頁(yè)將用到的公共頁(yè)面(headerhtml、footer<{header<!--將輸出系統(tǒng)級(jí)style、javascript、mate<linkrel="stylesheet"type="text/css"href="images/fsgw-style.css"<div<div<divclass=”top-bar<divclass=”span- <divclass=”span-auto<{widgetsid=”header-login<!--一個(gè)掛件區(qū)域，（id是唯一的）<div<{widgetsid=”header-nav”}><!--一個(gè)掛件區(qū)域，（id是唯一的）derht<div<div<div<!--一個(gè)掛件區(qū)域，（id是唯一的）<{footer}><!--將輸出系統(tǒng)級(jí)業(yè)務(wù)處理javascript\用戶自定義的底部信息例如:（footer首頁(yè)模板（indexhtml）<{require<{requirefile="headerhtml"}><!--引入公共的頭部（頭部的掛件區(qū)塊會(huì)被解析）<div<div <divclass=”contentc-1<divclass=”span-4m-<div<divclass=”t”>商品分類<div<divclass=”span-10m-默認(rèn)模板頁(yè)(default<{require<{requirefile="headerhtml"}><!--引入公共的頭部（頭部的掛件區(qū)塊會(huì)被解析）<div<divclass=”content<divclass=”span-4m-<divclass=”span-10m-應(yīng)該建立borders文件夾，來(lái)存放一個(gè)個(gè)的邊框html，html屬性應(yīng)統(tǒng)一引號(hào)，防止出現(xiàn)模板解析異<div<divclass="border1<{$widgets_classname}>" 定義的邊框className、id--<{$title}><!--將輸出被包裝掛件板塊 <{$body}><!--將輸出被包裝掛件板塊內(nèi)容存放模板資源文件，例如css\js\、一張模板效果圖模板效果圖是一張直觀的模板效果（120＊160px）,可以在管理模板列表看到它以區(qū)分模板標(biāo)準(zhǔn)模板包的備份與還原theme.xmltheme_bak.xml的介紹與功在上述中themexml為一個(gè)新標(biāo)準(zhǔn)模板包的必要文件，而theme_bakxml（如下圖,一個(gè)新模板包內(nèi)只有themexml文件,當(dāng)使用了在管理通過(guò)模板列表上的“備份模板”,“模板還原”下拉框中會(huì)增加一個(gè)“最近一次備份”節(jié)點(diǎn)。）xml文件進(jìn)行修改比（如下為themexml內(nèi)的代碼<?xml<?xmlversion="1.0"encoding="UTF-8" <setkey="邊欄樣式111111"tpl="borders/border1.html<setkey="商品分類tpl="borders/border2html<setkey="商店公告tpl="borders/border3html<setkey="品牌熱 "tpl="borders/border4html"<setkey="熱 "tpl="borders/border5html"<setkey="首頁(yè)商品列表tpl="borders/border6html<setkey="頁(yè)尾文章列表tpl="borders/border9html（如下為theme_bakxml內(nèi)的代碼<?xml<?xmlversion="1.0"encoding="UTF-8" <setkey="邊欄樣式222222"tpl="borders/border1.html<setkey="商品分類tpl="borders/border2html<setkey="商店公告tpl="borders/border3html<setkey="品牌熱 "tpl="borders/border4html"<setkey="熱 "tpl="borders/border5html"<setkey="首頁(yè)商品列表tpl="borders/border6html<setkey="頁(yè)尾文章列表tpl="borders/border9html接下來(lái)進(jìn)入管理通過(guò)模板列表上的“模板還原”至“默認(rèn)”節(jié)再將“模板還原”至“最近一次備份”每一次的“備份模板”的操作，是以數(shù)據(jù)庫(kù)的信息備份以及配置覆蓋到theme_bakxml文件內(nèi)，而此操作是不對(duì)原始的theme.xml文件進(jìn)行修改，覆蓋。標(biāo)準(zhǔn)模板包必要的文件結(jié)構(gòu)標(biāo)準(zhǔn)模板包必要的文件結(jié)構(gòu)生成工 模板包的首次加載模板開(kāi)發(fā)測(cè)試環(huán)境如果你在板的開(kāi)發(fā)，請(qǐng)先在管理應(yīng)用中心安裝一個(gè)應(yīng)用程序：《開(kāi)發(fā)者工具》安裝方法：點(diǎn)擊管理右上“應(yīng)用中心”，找到“開(kāi)發(fā)者工具”，進(jìn)行安裝模板包的首次加載既：/themes下完善模板包為模板添加頁(yè)面布局名稱可以理解為對(duì)文件的備注，文件名會(huì)自動(dòng)追加.html后綴,頁(yè)面源碼會(huì)模板默認(rèn)布局頁(yè)源碼在此可以修改html源碼頁(yè)可以只輸入名稱和文件名先生成html文件到模板包。統(tǒng)一用其他工具編輯頁(yè)面源碼為模板布局頁(yè)添加掛件分類名稱簡(jiǎn)介注意事項(xiàng)如果要在源碼編輯刪除一個(gè)<{widgets}>（掛件版塊區(qū)域），請(qǐng)先在可視化編輯中刪除此區(qū)域中的所有的掛件實(shí)例。創(chuàng)建一個(gè)模板級(jí)掛件配置頁(yè)（_config配置頁(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)掛件渲染模板 widgettplN可視化編輯占位模板（_previewhtml）［可選此頁(yè)面用于在可視化編輯時(shí)占位，例如掛件由許多效果和資源加載，在可視化編輯時(shí)影響效率，可以用此頁(yè)面mywidget掛件的目的是實(shí)現(xiàn)一個(gè)根據(jù)管理員的配置臺(tái)顯示一組商品信息 建立widgets文件在widgets文件夾內(nèi)創(chuàng)建mywidget ='1';//是否出現(xiàn)在掛件中心首頁(yè)$setting['template']='defaulthtml'=>’HTML展示'flashhtml'=>’用flash展示//編寫(xiě)掛件配置頁(yè)html時(shí)候，不需要bodytitleform等。此代碼塊共享管 的資源（javascript\css\）_confightml代碼塊只是掛件配 下列代碼中的$data數(shù)組由掛件配置 器返回，smarty協(xié)助拋向頁(yè)面$settingsmarty協(xié)助拋向頁(yè)面<div<h4>商品展示規(guī)則<select<{foreachfrom=$dataitem=orderby<optionvalue="<{$key}>"<{if_config.html（命名規(guī)則定死創(chuàng)建掛件配置頁(yè)器（用于取得系統(tǒng)相關(guān)數(shù)據(jù)命名規(guī)范以“theme_widget_cfg_”開(kāi)頭，掛件包名結(jié)尾運(yùn)行時(shí)系統(tǒng)會(huì)傳入一個(gè)參數(shù)，方便創(chuàng)建model等實(shí)例，用于取得數(shù)function$appapp::get(‘b2c’//創(chuàng)建app實(shí)例,這里要用b2c這個(gè)appgoodsmodel所有創(chuàng)建b2capp實(shí)$model_goods=$app->model('goods');//創(chuàng)建goodsmodelreturn$model_goods->orderBy();//返回商品排序規(guī)則datemap,在掛件配置模板 $date} 入掛件模板中的<style></style>中定義將會(huì)合并到一個(gè)css文件中被引入到<head>頭（例如一個(gè)模板布局頁(yè)面同時(shí)掛了兩個(gè)mywidget）掛件‘image/‘將會(huì)被替換為絕對(duì)路徑，你可以在掛件包中創(chuàng)建一個(gè)images文件夾用來(lái)存放掛件相關(guān)的資源。例如<style>#<{widgets_id}>_mywidgebackground:url(‘images/bg.pngstyle>，在渲染到前臺(tái)時(shí)，系統(tǒng)將自動(dòng)替換images/為絕對(duì)路徑。<divclass="GoodsListWrapGoodsListGoodsShow"<{ifcount($data.goods)><{foreachfrom=$data.goodsitem=product商品名稱：<{$productname}><br<divclass='notice'>暫無(wú)商品數(shù)據(jù)。defaulthtml(命名規(guī)則應(yīng)與widget.php掛件描述文件中$setting['template']保持一致創(chuàng)建掛件命名規(guī)范“theme_widget_”開(kāi)頭，掛件包名結(jié)尾。function{$app=$o=&app-$limit=$filter=$data['goods']=$o-return //根據(jù)掛件配置信息，取出數(shù)據(jù)返回給掛件模}(_previewhtml命名規(guī)則定死<div模板級(jí)掛件綁定到模板當(dāng)創(chuàng)建好一個(gè)模板級(jí)掛件?？梢栽诠芾硗ㄟ^(guò)模板列表上面的“”按鈕綁定掛件到模板（如下圖，經(jīng)過(guò)綁定后測(cè)試我的第一個(gè)掛件下圖為掛件配置框，上文提到，_confightml正式掛件版塊配置時(shí)的一部分，在掛入到模板掛件區(qū)域時(shí)，你還可以包裝系統(tǒng)級(jí)資源的重用重用框在制作模板、掛件的過(guò)程中，你可以隨時(shí)使用框架Mootools的公開(kāi)接口，它提供了強(qiáng)大的節(jié)點(diǎn)尋找、強(qiáng)化javascript數(shù)組、封裝了異步交互重用系統(tǒng)級(jí)樣式表我們臺(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ū)塊、延遲加系統(tǒng)級(jí)區(qū)域<{main}>的修改創(chuàng)建一個(gè)模板級(jí)的系統(tǒng)區(qū)域 建立customsite文件夾在customsite文件夾內(nèi)創(chuàng)建你你想以及重寫(xiě)的系統(tǒng)級(jí)頁(yè)面（如下圖，創(chuàng)建了商品詳情頁(yè)product1.html和規(guī)格頁(yè)修改模板級(jí)商品詳情頁(yè)（product1html）配<div<div<{if$goods.spec<{includefile='theme:customsite/spec1//將系統(tǒng)級(jí)規(guī)格頁(yè)面路徑修改為模板級(jí)theme:路徑下的customsite文件夾下的spec1（注:不能直接功能區(qū)塊頁(yè)面任何調(diào)用方法<{includefile='theme:spec1html'}>的子頁(yè)面，只支持直接父級(jí)頁(yè)面修改模板文件夾的theme.xml<?xml<?xmlversion="1.0"encoding="UTF-8" <setkey="邊欄樣式