模板机制概括

九阳神功,重在领悟心法。

模板开发,重在理解机制。

九阳神功将招式与内功基本完全分开,神功大成之后,任何一门招式在九阳神功的带动下,威力倍增。

ShopEx的模板机制也已经做到了前后台完全分离,这样,在您的ShopEx网店里,就可以轻松改变自己网店的装修风格,快速体验一键换肤的快感。

在这套成熟的模板机制里,我们逐步引用了:挂件、边框、模板缓存、一键换肤等概念。

模板相关文件介绍

磨刀不误砍柴工!在正式了解ShopEx模板机制之前,我们很有必要了解一下ShopEx的文件结构及文件目录在shopex48系列和分销王、店掌柜等产品中,文件目录大体相同,介绍一下模板相关的几个文件夹。以ShopEx4.8.5系统文件目录为例

static文件夹

系统资源文件夹,这里面包含ShopEx系统的公共资源,也包括了系统前台的背景图片,css和js文件。在制作模板时,不建议修改这里的任何文件,而是希望通过模板层级的css定义和css覆盖法则来达到想要的效果

plugin下的widgets文件夹

挂件文件夹,这里每一个文件夹就是一个挂件!在ShopEx48系统里,这里通常会包含系统挂件和模板开发者挂件;明眼人都知道,挂件才是ShopEx模板的核心。

home下的cache文件夹

缓存文件夹。这个文件夹下包含admin_tmpl和front_tmpl两个文件夹,一个是后台缓存,一个是前台缓存。修改挂件之后需要预览前台效果,记得要提前清空这里的缓存!

config下的config.php

系统配置文件,这个文件你只需要记住一句话

define('WITHOUT_CACHE',false);

这句话是配置文件控制模板后台缓存的。一般模板开发,你需要将false该成ture(这里是二进制的文件,改成数字“1”也是可以的)。这样在后台网店的缓存选项里,是看到“缓存已关闭”。

core下的shop下的view文件夹

系统页面文件夹,说的简单一点就是你经常在可视化编辑里看到的“系统功能区块,无法可视化编辑”的html内容,所有页面的对应的html在这里都能找到。友情提示:非专业前端人员,请勿随意修改!以免影响网店的正常运行。

themes文件夹

模板文件夹,同理,这里每一个文件夹就是一个模板,我们再来观察模板文件夹的构成:

  • info.xml 模板信息配置文件
  • theme.xml
  • preview.jpg 模板缩略图,默认尺寸120*160
  • block文件夹 模板内可复用文件,如头部(header.html)、底部(footer.html)
  • border文件夹 模板边框文件
  • *.html 模板文件

我们主要看info.xml

<?xml version="1.0" encoding="UTF-8" ?>
<theme>
<name>肖邦的悲伤</name>
<id>xbdbs</id>
<version>ShopEx4.8</version>
<info>模板描述</info>
<author>ShopEx</author>
<site>http://www.shopex.cn</site>
<update_url></update_url>
<borders>
<set key="默认样式" tpl="borders/border1.html" />
<set key="首页主区域样式1" tpl="borders/border2.html" />
</borders>
<views></views>
<config></config>
<widgets></widgets>
</theme>
  • -name: 模板名
  • -version: 模板版本
  • -info: 模板描述
  • -author: 模板作者
  • -site: 模板网站
  • -update_url: 模板升级地址
  • -borders: 边框的描述,这里所列出的信息会被用在后台“修改版块”面板的“版块边框”下拉框中。其中key为显示在后台的下拉选项,tpl为各边框相对模板目录的边框路径。
  • -config: 模板中定义的参数,例如一套变色模板,它的颜色可以作为参数写在config中,方便用户在编辑模板时修改。config的参数可在后台“模板配置”中修改。

挂件机制 Widgets

模板机制的概括其实就是“模块化布局”思路的形成,页面当中的每一块内容都可以成为一个模块。

在ShopEx内部则称之为挂件!

整个页面任何一片区域都是由挂件拼凑而成,而您在后台系统可视化编辑所看到的空板块区域为“挂件槽”(业内也称之为坑位,嘿嘿)。

很多同学以为每一个挂件槽只能添加一个挂件,其实不然,shopex模板机制跟九阳神功一样强大,

做到了每一个空板块区域都可以添加多个挂件。不过这里建议大家在一个空板块区域只添加纵向的相同宽度的挂件。

其实大家可以这么理解:一个空板块区域就好像一个USB接口,想插鼠标插鼠标,想插硬盘插硬盘,当然也可以插多线程的USB转接口从而接入更多东西。

边框机制 Border

一个店铺的风格拥有诸多页头之处,我们可以把这些相同的部分提出来。

能够达到后台通用的效果版块本身只包含功能,样式的定义完全由边框来决定,理论上边框能应用在任意版块上,是通用的。

边框是在版块外围包了一层html,它相当于版块的模板风格。边框样式由css定义,一套模板可以制作多个边框,供选择、自行搭配,这样仅在后台操作也能做出截然不同的页面。

边框的路径是模板路径下的 borders目录,每个html文件对应一个边框,边框的描述信息在模板目录下的info.xml中定义。

缓存机制 Cache

系统缓存 缓存的机制这里需要重点说一下,因为系统默认生成缓存文件.有些修改需要清空缓存才能预览到效果清空缓存!前面已经说到,在config.php文件里:

define('WITHOUT_CACHE',false);
将这里的false改成true或者1,关系系统缓存

这时,在ShopEx48系列后台,系统缓存就会关闭

模板前台缓存 还记得根目录下home下的cache文件夹吗?

您在修改了挂件或者系统级别文件后,需要清空这里的缓存!

怎么清空?

简单的,保留该目录下你看到的2个空文件夹"admin_tmpl"和"front_tmpl",其他所有文件(包括2个文件夹里的所有文件)全部删除!

一键换肤

一键换肤机制的原理现在市面上都差不多,通过更换不同的CSS文件来更换不同的色系风格。ShopEx模板机制秉承了这一先进理念,在ShopEx48系列和EcStore上都得到了完美的传承。

那么怎么来实现这一功能呢?还记得info.xml文件里的config参数的说明吗~~~~

<config>
<set key="style_1"  value="images/yellow.css"    label="黄色"  color="#f6ff00"  preview="blue.jpg"/>
<set key="style_2"  value="images/coffee.css"  label="咖啡色"  color="#916716"  preview="green.jpg"/>
<set key="style_3"  value="images/white.css"     label="白色"  color="#ff0000"  preview="preview.jpg"/>
</config>
  • -value:更换色系的css文件
  • -label:更换色系的名称
  • -color:更换色系的色彩值
  • -preview:更换色系的模板缩略图
序言·神功入门
产品模板制作区别
模板机制概括
模板开发环境/流程
模板速成篇
上卷·ShopEx48模板开发
Html规范
Css规范
Javascript规范
模板制作
边框制作
简单的smarty语法
下卷·EcStore1.2模板开发
机制更新/申请SDK开发包
模板级挂件
精确选择商品接口
模板级页面拦截
边框机制的开启与隐藏
Mootools框架及效果实例
结尾·模板堂平台
模板堂平台介绍
申请成为模板开发者
开发者服务协议
模板定制服务
模板审核规范
EDM模板制作规范
开发者认证/分成/违规