Shopex模板机制总览（摘要版）

Shopex模板机制总览（摘要版）

此文档旨在为 shopex 二次开发提供一个便利的参考信息，借以打开 shopex 架构的大门，希望能带给读者一种登堂入室的感觉。由于 shopex 是半开放源代码的形式发布的，而且官方也没有意思要做好文档的公开工作，因此，二次开发中难题较多，这篇文章正是出于答疑解难的观点编写的。如果对诸位有大有裨益，则我会心花怒放；即是小有启发，也是我写作的最大满足；如果不才，读者未可以领略到一丝一息的有用内容，口下留情，适当一批或一评即好。本文要求读者有 PHP、HTML 语言的基础，不扎实也是可以的，还要求一点 MVC 编辑模型的理解，如果会 Wordpress 开发的说，那就肯定没问题了。

……

注意：此文非完整版，省略号表示原文内容在此省略！如有前后不接应，请看客走马观花，skip it next!

目录结构

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

static文件夹

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

plugin下的widgets文件夹

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

home下的cache文件夹

缓存文件夹。这个文件夹下包含admin_tmpl和front_tmpl两个文件夹，一个是后台缓存，一个是前台缓存。可以手动删除里面的所有缓存内容文件，只保留两个空文件夹"admin_tmpl"和"front_tmpl"，也可以通过后台 关于菜单的缓存选项卡来删除。修改挂件之后需要预览前台效果，记得要提前清空这里的缓存，或是直接通过配置 /config/config.php 文件禁止缓存！

define('WITHOUT_CACHE',false);

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

core下的shop下的view文件夹

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

themes文件夹

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

• info.xml 模板信息配置文件，主要是 borders 边框的配置；
• theme.xml 主题模板配置，主要是 widgets 挂件的配置；
• preview.jpg 模板缩略图，默认尺寸120*160；
• block文件夹 模板内可复用文件，如头部（header.html)、底部（footer.html）；
• border文件夹 模板边框文件；
• *.html 模板文件。

了解一下 info.xml 的配置内容：

• -name: 模板名
• -version: 模板版本
• -info: 模板描述
• -author: 模板作者
• -site: 模板网站
• -update_url: 模板升级地址
• -borders: 边框的描述，这里所列出的信息会被用在后台“修改版块”面板的“版块边框”下拉框中。
• -config: 模板中定义的参数，例如一套变色模板，它的颜色可以作为参数写在config中，方便用户在后台编辑模板时修改。

……

随后我们在 theme.xml 和 info.xml 两个文件里关联一下"notice_border.html"这个文件，主要是 info.xml ，theme.xml 中的 borders 部分可以清空：

<?xml version="1.0" encoding="UTF-8" ?>
<theme>
    <name>Reduck v1.0</name>
    <id>reduck</id>
    <version>ShopEx4.8</version>
    <info></info>
    <author>Jimbo</author>
    <site>mailto:jimboyeah(AT)gmail.com</site>
    <update_url></update_url>
    <borders>
        <set key="零像素边框" tpl="borders/divwrap.html" />
        <set key="首页搜索栏" tpl="borders/searchbar.html" />
        <set key="首页商品分类" tpl="borders/frame-nav.html" />
        <set key="首页商品展示" tpl="borders/frame-banner.html" />
        <set key="首页商品分区" tpl="borders/frame-food.html" />
        <set key="首页地图" tpl="borders/frame-map.html" />
        <set key="全宽圆角边框" tpl="borders/frame-activity.html" />
        <set key="虚拟商品分类" tpl="borders/virtual-cats.html" />
        <set key="侧栏购物车" tpl="borders/cart-items.html" />
        <set key="侧栏菜单" tpl="borders/nav-menu.html" />
        <set key="通知边框" tpl="borders/notice_border.html" />
    </borders>
    <views></views>
    <config>
        <set key="color_1"  value="#ff0000"   label="红色" />
        <set key="image_1"  value="images/bg.jpg"   label="背景图片" />
        <set key="style_1" type="fullstyle"  value="images/blue.css" label="蓝色"  color="#0000ff"  preview="blue.jpg"/>
    </config>
</theme>

到此时，可视化编辑里，依然没有我这个边框，这是因为 xml 中的数据是在 shopex 第一次读取时缓存下来的。为了清除模板缓存，需要在模板管理中使用 编辑模板》恢复默认 操作来实现，这个动作会将自己操作的可视化配置内容也一并清除，因此你可以先下载模板备份。为了深入了解模板机制的动作，可以阅读和模板相关的数据模块或视图代码，这些数据模块包含了模板的配置功能，如恢复模板功能的 resetTheme 函数，模板的肤色设置 template-color：

……

挂件配置

首先，说说模板下的theme.xml，所有模板的配置信息都是存在这个 xml 中的，包括板块的位置、配置信息，边框的信息等等。第一次加载模板时，theme.xml中包含的信息被读入数据库，即模板的初始化，之后用户便可以在可视化界面中进行板块的增删改和对原有的板块进行配置。配置信息保存在数据库中，用户可以通过导出模板来下载到最新的带配置信息的theme.xml，通过“恢复默认”来重新读取 theme.xml 和 info.xml 的设置信息，以达到还原模板的功能。系统会自动导出一个tgz的文件，里面带有类 widgets 的配置数据的文件。在制作模板时会经常要使用模板编辑》恢复默认来重新读取 theme.xml 和 info.xml 的配置信息，以使修改内容重新生效。如有必要再通过后台可视化编辑配置后，再次使用模板下载功能，将自动化配置信息保存到模板中。模板开发者注意，模板中的widgets是具有序号属性的，按其在模板文件中出现的先后作为一个序号在 theme.xml 中的 widget 节点的 slot 属性出现。file 属性则指示渲染页面时 widgets 将要嵌入的文件，baseid 属性指定和对应模板文件的 widgets 的 id 值，因此相同的 baseid 值可以在不同模板文件中出现。type 属性指示 widgets 的类型，即在可视编辑时选择的板块类型。在增删模板的 widgets 配置后，会导致 shopex 可视配置无法正确运行，需要对 theme.xml 进行修改。另外，通过后台新建模板文件时，会从 default.html 拷贝一分蓝本。知道这些信息后，就可以手动配置模板的板块设置了，以下就是当前页面位置的导航条，即 shopex 系统的 商品分类路径显示 板块的配置信息：

<widget file="default.html" slot="0" type="nav" order="10"
    title="" domid="" border="__none__" classname="" tpl="default.html" baseid="nav">a:0:{}</widget>
<widget file="page.html" slot="0" type="nav" order="9" title=""
    domid="" border="__none__" classname="" tpl="default.html" baseid="nav">a:0:{} </widget>

相看相应板块的源文件会有助于理解这些参数的使用，例如，goodscar 商品分类板块，找到源文件对应的目录 \plugins\widgets\goodscat 。里面的 _config.html 文件就是配置页的细节，还有 default.html、dropdown.html、toggle.html 三个模板文件对应了默认、折叠、弹出三种输出方式，在 widgets.php 文件中也可以看到这些模板信息。需要注意的一个问题是，xml 中 & 作为一个保留符号，是不能在节点名称、属性中出现的，但是 shopex 却直接将 widgets 的配置参数的 & 符号存储到了 widget 节点内。这样的节点在 theme.xml 是无效的，因为重置模板时会发现根本不起作用。解决问题的方法是，手动将节点出现 & 字符的地方修改成转义符号格式，即将 & 符号替换成 &。

在手动生成 widget 配置信息时，可以使用 php 脚本来辅助。例如，我要在 page-app.html 文件的 <{widget id="iphone_app"}> 位置配置一个自定义的 HTML 内容，即 usercustom 板块配置，它只有一个参数 usercustom，和版块同名。接下一就要使用 php 的 serialize 来生成配置内容：

<?php
header("content-type: plain/text");
$s = array("usercustom"=>'<a href="#iphone-app">下载</a>');
echo htmlspecialchars(serialize($s),ENT_QUOTES);
?>

通过 php 解析后得到串行化的数据。或者使用 editplus，配置一下用户工具，添加一个 PHP 命令工具，参数设置为 -f $(FilePath)，那么就可以直接使用的工具来得到串行化数据。

a:1:{s:10:"usercustom";s:32:"<a href="#iphone-app">下载</a>";}

将其放入 theme.xml 后就是类似这样的节点：

<widget file="page-app.html" slot="0" type="usercustom" order="1" title="" domid=""
    border="borders/divwrap.html" classname=""
    tpl="default.html" baseid="app_iphone">
    a:1:{