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

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