ShopEX模板开发流程

这里说的是模板开发的常规流程

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层级相同。

      如果某个页面需要与其他页面不同，这个时候就可以手工建立一个新的模板框架，这些框架是由系统已经预置好的，只需要选择想要添加的页面类型就可以了。

6.预览-调试各版本各浏览器兼容性-完成制作-维护 

      调试兼容性：通过CSS调整您的模板再各浏览器下保持一致。

      维护：大神云："互联网飞速发展的时代，一个再好的产品，如果没有人去更新、去维护，这个好产品会迅速变成垃圾..."