1、上海商派网络科技有限公司 ECOS 模 板 制 作 详 细 手 册For Ecstore、Shopexport目 录概述 1模板机制中的名词解释 2挂件区域（widgets） 2挂件（widget） 2边框（border） 2系统级区域（main） 2默认模板页 （default.html） 2创建一个模板包 4标准模板包必要的文件 41. theme.xml 4每个模板 页 将用到的公共 页 面引用 (header.html、footer.html) 5首 页 模板（ index.html） 6默 认 模板 页 (default.html) 7边 框文件 夹 （borders） 8资 源文件
2、 夹 （images） 8一 张 模板效果 图 （preview.jpg） 9标准模板包的备份与还原 9标准模板包必要的文件结构 12标准模板包必要的文件结构生成工具 13模板包的首次加载 13i模板开发测试环境 13模板包的首次加载 13完善模板包 15为模板添加页面布局 15为模板布局页添加挂件 16系 统级 常用挂件表 16挂件的添加和配置 16注意事 项 18创建一个模板级挂件 18创 建一个模板 级 挂件的必 备 文件 结 构 18创 建一个模板 级 挂件 mywidget 18模板级挂件绑定到模板 23测试我的第一个挂件 24系统级资源的重用 26重用脚本框架 26重用系统级样式表
3、 26重用前端效果库封装 26系统级区域 的修改 27创建一个模板级的系统区域 27概 述基于 ShopEx 的模板机制体系之上的全新制作体系了解 ShopEx48 版本等的开发技术基地下， ECOS 的模板基于 ShopEx48 版本机制之上颠覆性的创新，更人性化将每个功能页面，以及精细至功能挂件可自定义制作修改，满足不同行业理念的制作需求。模板路径模板路径是 ECOS 安装目录/themes/模板目录构成进入到某一套模板目录中后，就可以看到 该模板的目录和文件结构了:模 板 机 制 中 的 名 词 解 释挂件区域（widgets）挂件区域用于在某个页面预留挂件(widget)可挂入的区域。
4、也可以理解为“插槽”、 “坑”。每个挂件区域可以挂入多个挂件挂件（widget ）挂件是 ShopEx 模板机制中的一个重要角色，它能根据条件从后端取得数据然后根据 “挂件级页面模板”来包装成一个小板块。例如一个“商品板 块挂件” ，它要先由后端语言（php）来组织数据，然后返回到“挂件级页面模板”。 组织数据的条件将会独立出一个可配置页面。边框（border ）边框用于包装一个挂件板块，一套模板里面可能由很多个 边框风格，这些风格的名称和对应的边框文件 需要定义在模板的描述文件（theme.xml）中，以便可视化编辑时改变一个板块的风格。例如一个“商品板 块挂件” 在首页要以三种不同的 风格
5、展示（促销、 热门 、新品.），除了需要在挂件的配置面板中配置数据的展示范围不同， 还 需要由边框机制的配合达到 颜色风格的区别。特 别 是一些系统级挂件，为了适应不同模板的展示方式，默认不会输出标题和边框，边框则可以 协助包装一下挂件挂入到挂件区域。系统级区域（main）系统级区域用于输出系统的核心交互流程。 这些区域的 htmljavascript 是不能在模板包中直接定义的，模板包唯一能影响到这些系统级区域的是 css 样式定义，因为模板包的样式表是在系统级样式之后加载。默认模板页 （default.html）默认模板页是在模板包中 未定义某个页面的布局时，默认调用的页面布局。例如你的模
6、板包中只包含了两个 页面的定义：首页、默 认页 ，那么其他未定义的页 面在访问时将优先使用默认模板页 ，直到你单独定义它为止。创 建 一 个 模 板 包标准模板包必要的文件创建一个模板包文件夹，例如 fsgw新模板包文件夹的名称应与描述文件中的 id 保持一致，并且应该由数字和英文小写组成。在模板包文件夹内创建以下文件：3r 1. theme.xml此文件用来描述模板包的基本信息，以及模板可能包含的挂件。还用于模板的备份导出，和导入操作中的模板数据交换。例如：风尚购物fsgwECStoreShopExhttp:/xml 节点 说明name 模板包的名称,将会出现在管理后台模板列表中id 首次由开发人员定义，应与模板包名称保持一致 ,（全英文）version 模板包的版本信息info 模板包简介author 模板包作者site 模板包作者网址update_url 升级地址， 暂未启用borders 模板包包含的边框定义描述widgets 模板挂件描述。系统会在模板可视 化编辑添加挂件后向widgets 序列化挂件描述此表只描述最关键的几个节点项2. 每个模板页将用到的公共页面引用 (header.html、footer.html)例如:（header.html）Welcome例如:（footer.html）3. 首页模板（index.html）例如商品分类
