一、模板制作
1.建立模板文件夹目录 建立一个新模板，需要手工建立一个新文件夹，可以任意命名，模板里必须包含info.xml（模板信息配置文件）、 preview.jpg（模板缩略图）、theme.xml（模板信息记录文件，无需修改）。 完成之后系统将会自动判断此文件夹为新模板目录，在后台的模板列表中可看到此模板的名称以及模板缩略图。 再按需要建立images、block、border等文件夹。 2.静态页面嵌入shopex系统 这一步和通常的设计稿->页面的过程相同，需要制作者具备基本的html、css等知识，这时的页面代码规整，会给之后的制作带来很大的方便。 制作静态页面时需要划分好布局，做好边框的样式。 这个时候所做的页面可以是低保真的，即仅划分页面的布局，版块的内容可以用均可使用”widget（挂件）“代替，待页面制作完成后，通过后台板块功能嵌入功能后再写入样式。 使用HTML布局方式，将模板分为以下几个部分。每个部分内的元素无需细化，其中含有功能性以及广告、图片、文字等元素，均可使用”widget（挂件）“代替。 注意，头部head内必须有<{header}>标签，尾部必须有<{footer}>标签，用来输出程序附带的资源，否则内页的部分功能会出现错误。 3.添加挂件预览效果，并完善样式修改 通过板块功能调用出的内容，其表现形式和风格都是由系统内置CSS制定。而通常我们自己制作的模板往往与系统内置风格有着多多少少的区别。同时也是为了使模板更加独特而需要做的事情。 这一步的过程完全通过css的修改来完成。系统默认调用的是内置css，它的路径是statics文件夹下的framework.css、shop.css。 但是如果我们通过常规方法直接修改这2个系统内置CSS文件，很容易在升级时一并被修改，并无法将模板导出。 这里推荐使用“覆盖法”来更改css的属性，也就是将需要修改的css属性从系统内置CSS文件中，拿到模板目录文件夹内的css文件中，修改过后在页面显示时系统将优先显示此css属性。用此方法达到修改目的。 推荐使用friefox浏览器，和其中的firebug插件，可以快速查询到指定位置的CSS名称和关联情况。 4.根据情况制作模板的边框和挂件 选取可复用部分作为边框，这一步的工作可以放在模板布局时提前做好，因边框也属于外部调用的形式，shopex模板系统将每一个边框文件作为单独的文件以便重复调用。 如果有部分ShopEx本身没有的挂件，可以自行制作新挂件或在原有挂件基础上修改。注意新挂件或者修改后的挂件需改名，勿覆盖系统挂件，以免今后系统升级造成文件丢失。 5.制作内页 除了首页外，其他页面都可以用默认框架default.html。 默认框架输出业务区，承担所有业务流程的功能，也就是说只要一个默认框架 default.html就能表示所有功能内页，进入不同的功能内页时，业务区输出不同的预置内容。 default.html文件放置在模板目录下，与index.html层级相同。 如果某个页面需要与其他页面不同，这个时候就可以手工建立一个新的模板框架，这些框架是由系统已经预置好的，只需要选择想要添加的页面类型就可以了。 方法2： 自我感觉，shopex的模板是非常容易上手的。我曾经做过ecshop模板的制作和修改，真的很麻烦，而像shopex这样程序和模板分离，其实理解了 shopex模板机制，只要你会做网站美工设计，会Div+Css，一样可以做出一套属于自己的shopex模板。下面是一些心得体会（非本人的）。 shopex是程序和模板分离的，这样就大大方便了大家可以做出自己漂亮的外观网站，虽然很多地方分离得不够，比如一些核心的业务流程区基本大家就很难修改了，但是大部分还是满足网站基本要求的。 首先，说说模板下的theme.xml，官方是这么说的，theme.xml是整个模板中最重要的部分，所有模板的配置信息都是存在这个xml中的，包括 板块的位置、配置信息，边框的信息等等。第一次加载模板时，theme.xml中包含的信息被读入数据库，即模板的初始化，之后用户便可以在可视化界面中 进行板块的增删改和对原有的板块进行配置。配置信息保存在数据库中，用户可以通过导出模板来下载到最新的带配置信息的theme.xml，通过“恢复默 认”来应用新的theme.xml。 这个意思表达得还是比较清楚了，我再详细补充下。 1. 官方说第一次加载模板时，theme.xml中包含的信息被读入数据库，即模板的初始化。意思就是这个theme数据库只会加载他一次，第二次是不会加载 的，除非你强行要恢复默认，数据库才会重新加载读取theme的信息。明白了这点，所以只要加载第一次后，你可以随便修改theme啊，只要你不强行恢复 默认的话，theme此时不对数据库任何影响，程序也不会读取和应用到theme。 2，但是为什么大家建议不要修改theme呢? 首先，修改它没意义。上面说了，第一次加载后theme就等于完成了他的任务了，只要不强行重新加载，theme对系统没任何影响。其次，如果你修改了 theme的话，哪天不小心强行恢复默认的话，就会导致某些页面不能输出你被修改的挂件内容。因为theme是告诉数据库在哪个页面哪个位置输出哪个内 容。 3.配置信息保存在数据库中。意思就是你的所有可视化编辑的操作数据和记录全部保持在数据库里面，比如可视化删除了挂件，编辑了挂件，添加了挂件。你在后 台代码编辑的时候他会保存到对应的html文件里（是否保存在数据库官方未说）。这点就是要告诉我们，记得一定要数据库配置备份，备份生成的文件就是 theme-bak.xml，比如你错误的删除了挂件，这个操作已经记录在数据库里面，你通过点恢复theme-bak.xml，那么数据库里面的这个操 作记录就会被擦去，这个挂件就没有删除被恢复。 3.用户可以通过导出模板来下载到最新的带配置信息的theme.xml，通过“恢复默认”来应用新的theme.xml，也就是上面的意思，通过theme.xml这个文件，方便大家反复擦写数据库记录，实际theme就是数据库配置信息的备份文件。 3，为什么要引入theme.xml呢？上面说了，可以方便大家备份配置信息反复擦写数据库。其次，就是通用模板的共享。模板包含了2个主要文件，一个是 html框架文件，这些是最外层框架布局和大致显示样式，二个是theme.xml配置文件，theme配置文件告诉程序要在哪个页面哪个位置输出哪个内 容。比如theme里面全部记录了挂件配置信息，通过theme程序才能真正和模板结合起来输出重要信息内容。html框架文件是死的，theme记录的 挂件输出的内容是活的。正是有了theme传递给程序的配置信息，程序才知道什么位置输出什么内容。配置信息最终是要传递到数据库里面，程序才能识别和输 出内容。如果没有引入theme，那么这些保存在数据库的配置信息就不方便共享，因为要共享数据库。有了theme，数据库配置信息就可以以文件存在的形 式方便大家互相转移共享。 再说说部分人问的widgets ID中ID的理解。ID就是身份，就是给这个widgets一个唯一的身份，以便程序认识和记住这个widgets输出正确的内容。如果不做ID辨认，程 序会自动默认排列顺序，导致输出内容错位，也就是说，你写的ID数据库就会记录这个ID，然后数据库通过这个ID输出你挂件设置的内容。也就是说ID可以 随便写，但是不能重复。 再说说挂件下模板的修改。比方说首页列表商品下的信息描述，系统默认是名字在上面，价格在下面。如果我们想要 价格在上，商品名在下呢，比如这种效果 那我们可以修改挂件模板。找到挂件下的goods目录，新建一个a.html文件 复制里面的default.html内容。再来修改a.html内容。先来分析default.html里面的代码.里面<{capture name=titleImg}>里面很多变量和定义，这些是关系到后台挂件设置的内容以及系统输出的内容，我们不能动。我们只要修改模板html代 码，就是在以最后一个<{capture 结尾的地方的后面代码，就是输出代码，找到输出的html代码就是以<{$smarty.capture.goodsImg}> <{$smarty.capture.goodsName}> <{$smarty.capture.goodsDesc}> 这3个smarty的代码就是分别输出图像，商品名字，商品描述的。我们把商品名字和描述互换位置，就可以把价格调整在上面。也可以修改其他HTML代码 达到更多的效果。 有群友在群问:挂件在哪？怎么添加挂件？怎么加更多的商品列表。 这个问题是刚刚上手的时候也想了一阵子，弄不明白挂件是干嘛的，关键还是不理解shopex的模板机制，理解了就很好制作和添加挂件了。 挂件是功能模块，是程序核心，官方是这么说的，关键是怎么理解。 一套程序是有很多功能的，这很好理解吧，比如首页上的导航模块，他自动列出了你后台添加的栏目，这不就是实现导航功能吗？ 首页上的商品列表，他会自动列出你后台添加的商品，这不是实现了商品展示功能吗？？公告区的文章列表，可以自动列出你添加的新闻公告，这不就是功能吗。一套程序就是为了实现各个功能而互相有机结合起来的。 功能模板之所以叫功能模块，那是因为他紧密结合系统，输出程序最核心的部分，是程序底层代码了，这些不是我们一般人可以修改的，也不是一般人可以随着增加 的，他是程序早封装好，为你打包准备好了的。你要做的就是把各个功能漂亮的组合在一起，做个漂亮的网站出来。 怎么去组合这些功能，那你首先得布局，那你就得会HTML代码了。后台编辑源代码，把需要表现功能的地方一律以widgets ID替换，注意，这个地方要解析下，很多人这里会卡着一下，想不明白。 你输入 widgets ID 只是告诉程序你在这个地方占了个位置，挖了一个坑，这个时候 ，程序是不知道你这个坑要放啥东西啊，不知道你写的widgets ID是什么意思啊，所以程序在这个地方不会输出任何代码，在后台可视化编辑中，就显示为空白区。你必须到后台可视化编辑里面去添加一个功能附加在这个 widgets ID上，这样，数据库就记录了你的操作ID，程序就明白你给这个ID附加的功能，保存后，程序会按照他记录的ID，在widgets上替换 输出程序早封装好的 功能模块，也即大家所谓的挂件。 也就是说 widgets ID指向的内容是你用ID记录对应着的程序内置的封装的功能模块，是系统内置的，你只有增加和删除的权利。当然你也可以自己写 widgets ，但是一般的人做的只能做哪些简单替换HTML代码的以供后台方便修改的所谓挂件，这些都不和系统核心紧密结合的。 所以，挂件在哪？？挂件在系列内部自带的封装的。 怎么添加挂件？ 你首先必须定义一个 widgets ID ，然后去后台可视化编辑把内置功能赋予这个 widgets ID，程序记录后， 就会在前台页面替换 widgets ID的内容 输出 你赋予的功能代码。 后台只能看见widgets ID 必须通过程序识别输出后 ，在前台才能看见widgtes的效果（后台可视化编辑实际就是通过了程序输出了） 二、模板结构 文件夹：\plugins\widgets\ad 功能引用：广告相关> 广告文件夹：\plugins\widgets\ad_flash 功能引用：广告相关>广告-Flash广告 文件夹：\plugins\widgets\ad_pic 功能引用：广告相关>广告-图片广告 文件夹：\plugins\widgets\ad_text 功能引用：广告相关>广告-文字广告 文件夹：\plugins\widgets\ad_userdefine 功能引用：广告相关>广告-代码广告 文件夹：\plugins\widgets\circle 功能引用：广告相关>商品旋转展示 文件夹：\plugins\widgets\coverflow 功能引用：广告相关>商品翻转展示 文件夹：\plugins\widgets\exchangeeffect 功能引用：广告相关>商品交叉切换展示 文件夹：\plugins\widgets\flashview 功能引用：广告相关>广告-首页轮播广告 文件夹：\plugins\widgets\floweffect 功能引用：广告相关>商品滑动展示 文件夹：\plugins\widgets\links 功能引用：广告相关>友情链接 文件夹：\plugins\widgets\video 功能引用：广告相关>视频广告 文件夹：\plugins\widgets\slideEffectBanner 功能引用：广告相关>广告-数字滑动广告 文件夹：\plugins\widgets\article 功能引用：文章相关>文章列表 文件夹：\plugins\widgets\virtualcat 功能引用：商品相关>前台虚拟分类 文件夹：\plugins\widgets\brand 功能引用：商品相关>品牌列表 文件夹：\plugins\widgets\gift 功能引用：商品相关>推荐赠品列表 文件夹：\plugins\widgets\gifttree 功能引用：商品相关>所有赠品列表 文件夹：\plugins\widgets\goods 功能引用：商品相关>多功能商品展示 文件夹：\plugins\widgets\goods_show 功能引用：商品相关>商品展示 文件夹：\plugins\widgets\goodscat 功能引用：商品相关>商品分类 文件夹：\plugins\widgets\rankinglist 功能引用：商品相关>商品排行榜 文件夹：\plugins\widgets\im 功能引用：辅助工具>即时通讯 文件夹：\plugins\widgets\include 功能引用：辅助工具>站外引用 文件夹：\plugins\widgets\kf 功能引用：辅助工具>53客服 文件夹：\plugins\widgets\5107 功能引用：辅助工具>ShopEx客服通 文件夹：\plugins\widgets\cart 功能引用：系统相关>购物车 文件夹：\plugins\widgets\comment 功能引用：系统相关>评论版块 文件夹：\plugins\widgets\hst 功能引用：系统相关>浏览过的商品 文件夹：\plugins\widgets\logo 功能引用：系统相关>商店Logo 文件夹：\plugins\widgets\member 功能引用：系统相关>会员注册/登录 文件夹：\plugins\widgets\search 功能引用：系统相关>商品搜索 文件夹：\plugins\widgets\topbar 功能引用：系统相关>购物栏/货币选择框 文件夹：\plugins\widgets\menu_lv1 功能引用：导航相关>商店导航菜单 文件夹：\plugins\widgets\menutree 功能引用：导航相关>商店结构树型菜单 文件夹：\plugins\widgets\nav 功能引用：导航相关>商品分类路径显示 文件夹：\plugins\widgets\treelist 功能引用：导航相关>站点目录树 文件夹：\plugins\widgets\orderlist 功能引用：订单相关>最新订单列表 文件夹：\plugins\widgets\transport 功能引用：订单相关>最新发货列表 文件夹：\plugins\widgets\usercustom 功能引用：自定义版块>用户自定义HTML
转载请注明文章出自 ，谢谢！
本文地址：