這里說的是模板開發的常規流程
1.建立模板文件夾目錄
建立一個新模板,需要手工建立一個新文件夾,可以任意命名,模板里必須包含info.xml(模板信息配置文件)、 preview.jpg(模板縮略圖)、theme.xml(模板信息記錄文件,無需修改)。
完成之后系統將會自動判斷此文件夾為新模板目錄,在后臺的模板列表中可看到此模板的名稱以及模板縮略圖。
再按需要建立images、block、border等文件夾。
2.靜態頁面嵌入shopex系統
這一步和通常的設計稿->頁面的過程相同,需要制作者具備基本的html、css等知識,這時的頁面代碼規整,會給之后的制作帶來很大的方便。
制作靜態頁面時需要劃分好布局,做好邊框的樣式。
這個時候所做的頁面可以是低保真的,即僅劃分頁面的布局,版塊的內容可以用均可使用”widget(掛件)“代替,待頁面制作完成后,通過后臺板塊功能嵌入功能后再寫入樣式。
使用HTML布局方式,將模板分為以下幾個部分。每個部分內的元素無需細化,其中含有功能性以及廣告、圖片、文字等元素,均可使用”widget(掛件)“代替。
注意,頭部head內必須有<{header}>標簽,尾部必須有<{footer}>標簽,用來輸出程序附帶的資源,否則內頁的部分功能會出現錯誤。
3.添加掛件預覽效果,并完善樣式修改
通過板塊功能調用出的內容,其表現形式和風格都是由系統內置CSS制定。而通常我們自己制作的模板往往與系統內置風格有著多多少少的區別。同時也是為了使模板更加獨特而需要做的事情。
這一步的過程完全通過css的修改來完成。
系統默認調用的是內置css,它的路徑是statics文件夾下的framework.css、shop.css。
但是如果我們通過常規方法直接修改這2個系統內置CSS文件,很容易在升級時一并被修改,并無法將模板導出。
這里推薦使用“覆蓋法”來更改css的屬性,也就是將需要修改的css屬性從系統內置CSS文件中,拿到模板目錄文件夾內的css文件中,修改過后在頁面顯示時系統將優先顯示此css屬性。用此方法達到修改目的。推薦使用friefox瀏覽器,和其中的firebug插件,可以快速查詢到指定位置的CSS名稱和關聯情況。
4.根據情況制作模板的邊框和掛件
選取可復用部分作為邊框,這一步的工作可以放在模板布局時提前做好,因邊框也屬于外部調用的形式,shopex模板系統將每一個邊框文件作為單獨的文件以便重復調用。
如果有部分ShopEx本身沒有的掛件,可以自行制作新掛件或在原有掛件基礎上修改。注意新掛件或者修改后的掛件需改名,勿覆蓋系統掛件,以免今后系統升級造成文件丟失。
5.制作內頁
除了首頁外,其他頁面都可以用默認框架default.html。
默認框架輸出業務區,承擔所有業務流程的功能,也就是說只要一個默認框架 default.html就能表示所有功能內頁,進入不同的功能內頁時,業務區輸出不同的預置內容。
default.html文件放置在模板目錄下,與index.html層級相同。
如果某個頁面需要與其他頁面不同,這個時候就可以手工建立一個新的模板框架,這些框架是由系統已經預置好的,只需要選擇想要添加的頁面類型就可以了。
6.預覽-調試各版本各瀏覽器兼容性-完成制作-維護
調試兼容性:通過CSS調整您的模板再各瀏覽器下保持一致。
維護:大神云:"互聯網飛速發展的時代,一個再好的產品,如果沒有人去更新、去維護,這個好產品會迅速變成垃圾..."
新聞熱點
疑難解答