在前不久用shopex试做了一个商城网站，和ecshop相比shopex显得更为简单，下面的这篇文章就来分享一下我在这次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 层级相同。 如果某个页面需要与其他页面不同，这个时候就可以手工建立一个新的模板框架，这些框架是由系统 已经预置好的，只需要选择想要添加的页面类型就可以了。

方法 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，那么数据库里面的这个操作记录就会被擦去，这个挂件就没有删除被恢复。

4、用户可以通过导出模板来下载到最新的带配置信息的 theme.xml，通过“恢复默认”来应用新的 theme.xml，也就是上面的意思，通过 theme.xml 这个文件，方便大家反复擦写数据库记录，实际 theme 就是数据库配置信息的备份文件。

5、为什么要引入 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 代码就是以1 &&开头的，我们再找到 设置图片在上的那部分代码 <{elseif $setting.goodsImgPosition==”top”}> <{$smarty.capture.goodsImg}> <{$smarty.capture.goodsName}>、<{$smarty.capture.goodsDesc}> 这 3 个 smarty 的代码就是分别输出图像， 商品名字， 商品描述的。 我们把商品名字和描述互换位置， 就可以把价格调整在上面。也可以修改其他 HTML 代码 达到更多的效果。