实施交付类学习资源-3模板机制

优势和创111模板机制中的1挂件区域1挂件1边框1系统级区域11创建一个111.1每个模板页将用到的公共(header.html、1首页模板1默认模板页7边框文件夹1资源文件夹1一张模板效果图99i模板包的首次加完善模板系统级常用挂件表挂件的添加和配置注意事2创建一个模板级挂件的必备文件结构2创建一个模板22系统级资源的重2222系统级区域<{main}>的修改22优势和创新ShopEx模板机制的优势面对后端开发人员面对前端开发人员面对网店运营人员2.模板缓存、自定义URL帮你分担后3.挂件机制可以满足你站外嵌入的求ShopEx模板机制的创新将布局、区块、边框、数据真正细分模板机制中的名词解挂件区域挂件挂件是ShopEx模板机制中的一个重要角色，它能根据条件从后端取得数据然后根据“挂件级页面模板”来包装成一个小板边框边框用于包装一个挂件板块，一套模板里面可能由很多个边框风格，这些风格的名称和对应的边框文件描述文件（themexml）中，以便可视化编辑时改变一个板块的风格。 系统级区域这些系统级区域的是css样式定义，因为模板包的样式表是在系统级样式之后加载。默认模板页定义某个页面的布局时，默认调用的页面布局。例如你的模板包中只包含了两个页面的定义：首页、默认页，那么其他未定义的页面在时将优先使用默认模板页，直到你单独定义它为止。创建一个模板标准模板包必要的文件创建一个模板包文件夹，例如新模板包文件夹的名称应与描述文件中id保持一致，并且应该由数字和英文小写组成。<?xml<?xmlversion="1.0"encoding="UTF-8" <setkey="边栏样式tpl="borders/border1html<setkey="商品分类tpl="borders/border2html<setkey="商店公告tpl="borders/border3html<setkey="品牌热 "tpl="borders/border4html"<setkey="热 "tpl="borders/border5html"<setkey="首页商品列表tpl="borders/border6html<setkey="页尾文章列表tpl="borders/border9html<set "xml节点说明模板包的名称,将会出现在管理模板列表widgets序列化挂件描每个模板页将用到的公共页面(headerhtml、footer<{header<!--将输出系统级style、javascript、mate<linkrel="stylesheet"type="text/css"href="images/fsgw-style.css"<div<div<divclass=”top-bar<divclass=”span- <divclass=”span-auto<{widgetsid=”header-login<!--一个挂件区域，（id是唯一的）<div<{widgetsid=”header-nav”}><!--一个挂件区域，（id是唯一的）derht<div<div<div<!--一个挂件区域，（id是唯一的）<{footer}><!--将输出系统级业务处理javascript\用户自定义的底部信息例如:（footer首页模板（indexhtml）<{require<{requirefile="headerhtml"}><!--引入公共的头部（头部的挂件区块会被解析）<div<div <divclass=”contentc-1<divclass=”span-4m-<div<divclass=”t”>商品分类<div<divclass=”span-10m-默认模板页(default<{require<{requirefile="headerhtml"}><!--引入公共的头部（头部的挂件区块会被解析）<div<divclass=”content<divclass=”span-4m-<divclass=”span-10m-应该建立borders文件夹，来存放一个个的边框html，html属性应统一引号，防止出现模板解析异<div<divclass="border1<{$widgets_classname}>" 定义的边框className、id--<{$title}><!--将输出被包装挂件板块 <{$body}><!--将输出被包装挂件板块内容存放模板资源文件，例如css\js\、一张模板效果图模板效果图是一张直观的模板效果（120＊160px）,可以在管理模板列表看到它以区分模板标准模板包的备份与还原theme.xmltheme_bak.xml的介绍与功在上述中themexml为一个新标准模板包的必要文件，而theme_bakxml（如下图,一个新模板包内只有themexml文件,当使用了在管理通过模板列表上的“备份模板”,“模板还原”下拉框中会增加一个“最近一次备份”节点。）xml文件进行修改比（如下为themexml内的代码<?xml<?xmlversion="1.0"encoding="UTF-8" <setkey="边栏样式111111"tpl="borders/border1.html<setkey="商品分类tpl="borders/border2html<setkey="商店公告tpl="borders/border3html<setkey="品牌热 "tpl="borders/border4html"<setkey="热 "tpl="borders/border5html"<setkey="首页商品列表tpl="borders/border6html<setkey="页尾文章列表tpl="borders/border9html（如下为theme_bakxml内的代码<?xml<?xmlversion="1.0"encoding="UTF-8" <setkey="边栏样式222222"tpl="borders/border1.html<setkey="商品分类tpl="borders/border2html<setkey="商店公告tpl="borders/border3html<setkey="品牌热 "tpl="borders/border4html"<setkey="热 "tpl="borders/border5html"<setkey="首页商品列表tpl="borders/border6html<setkey="页尾文章列表tpl="borders/border9html接下来进入管理通过模板列表上的“模板还原”至“默认”节再将“模板还原”至“最近一次备份”每一次的“备份模板”的操作，是以数据库的信息备份以及配置覆盖到theme_bakxml文件内，而此操作是不对原始的theme.xml文件进行修改，覆盖。标准模板包必要的文件结构标准模板包必要的文件结构生成工 模板包的首次加载模板开发测试环境如果你在板的开发，请先在管理应用中心安装一个应用程序：《开发者工具》安装方法：点击管理右上“应用中心”，找到“开发者工具”，进行安装模板包的首次加载既：/themes下完善模板包为模板添加页面布局名称可以理解为对文件的备注，文件名会自动追加.html后缀,页面源码会模板默认布局页源码在此可以修改html源码页可以只输入名称和文件名先生成html文件到模板包。统一用其他工具编辑页面源码为模板布局页添加挂件分类名称简介注意事项如果要在源码编辑删除一个<{widgets}>（挂件版块区域），请先在可视化编辑中删除此区域中的所有的挂件实例。创建一个模板级挂件配置页（_config配置页器用于向配置页输出系统数据，例如输出一个系统当前的商品排序方式数组。供页面<select>填充选择［如果配置页不需要从系统内取得数据，则此器无需制作。挂件器(theme_widget_widgetname.php)挂件渲染模板 widgettplN可视化编辑占位模板（_previewhtml）［可选此页面用于在可视化编辑时占位，例如挂件由许多效果和资源加载，在可视化编辑时影响效率，可以用此页面mywidget挂件的目的是实现一个根据管理员的配置台显示一组商品信息 建立widgets文件在widgets文件夹内创建mywidget ='1';//是否出现在挂件中心首页$setting['template']='defaulthtml'=>’HTML展示'flashhtml'=>’用flash展示//编写挂件配置页html时候，不需要bodytitleform等。此代码块共享管 的资源（javascript\css\）_confightml代码块只是挂件配 下列代码中的$data数组由挂件配置 器返回，smarty协助抛向页面$settingsmarty协助抛向页面<div<h4>商品展示规则<select<{foreachfrom=$dataitem=orderby<optionvalue="<{$key}>"<{if_config.html（命名规则定死创建挂件配置页器（用于取得系统相关数据命名规范以“theme_widget_cfg_”开头，挂件包名结尾运行时系统会传入一个参数，方便创建model等实例，用于取得数function$appapp::get(‘b2c’//创建app实例,这里要用b2c这个appgoodsmodel所有创建b2capp实$model_goods=$app->model('goods');//创建goodsmodelreturn$model_goods->orderBy();//返回商品排序规则datemap,在挂件配置模板 $date} 入挂件模板中的<style></style>中定义将会合并到一个css文件中被引入到<head>头（例如一个模板布局页面同时挂了两个mywidget）挂件‘image/‘将会被替换为绝对路径，你可以在挂件包中创建一个images文件夹用来存放挂件相关的资源。例如<style>#<{widgets_id}>_mywidgebackground:url(‘images/bg.pngstyle>，在渲染到前台时，系统将自动替换images/为绝对路径。<divclass="GoodsListWrapGoodsListGoodsShow"<{ifcount($data.goods)><{foreachfrom=$data.goodsitem=product商品名称：<{$productname}><br<divclass='notice'>暂无商品数据。defaulthtml(命名规则应与widget.php挂件描述文件中$setting['template']保持一致创建挂件命名规范“theme_widget_”开头，挂件包名结尾。function{$app=$o=&app-$limit=$filter=$data['goods']=$o-return //根据挂件配置信息，取出数据返回给挂件模}(_previewhtml命名规则定死<div模板级挂件绑定到模板当创建好一个模板级挂件。可以在管理通过模板列表上面的“”按钮绑定挂件到模板（如下图，经过绑定后测试我的第一个挂件下图为挂件配置框，上文提到，_confightml正式挂件版块配置时的一部分，在挂入到模板挂件区域时，你还可以包装系统级资源的重用重用框在制作模板、挂件的过程中，你可以随时使用框架Mootools的公开接口，它提供了强大的节点寻找、强化javascript数组、封装了异步交互重用系统级样式表我们台引入了一个简单的样式表封装(frameworks.css)、里面有常用的布局、浮动、字体、内外补丁等class定义重用前端效果库封装前台有一个强大的效果库封装（switchable.js），它提供了大部分效果的轻松实现机制。还提供了区块、延迟加系统级区域<{main}>的修改创建一个模板级的系统区域 建立customsite文件夹在customsite文件夹内创建你你想以及重写的系统级页面（如下图，创建了商品详情页product1.html和规格页修改模板级商品详情页（product1html）配<div<div<{if$goods.spec<{includefile='theme:customsite/spec1//将系统级规格页面路径修改为模板级theme:路径下的customsite文件夹下的spec1（注:不能直接功能区块页面任何调用方法<{includefile='theme:spec1html'}>的子页面，只支持直接父级页面修改模板文件夹的theme.xml<?xml<?xmlversion="1.0"encoding="UTF-8" <setkey="边栏样式