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

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

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

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:更换色系的模板缩略图