ShopEx新手模板制作手册.docx

1、ShopEx新手模板制作手册ShopEx V4.8模板制作手册ShopEx48的模板不同于ShopEx之前的版本，将页面抽象成为不同的区块，有实现核心流程的业务区，也有实现展示和其他功能的版块。使得内容和表现更加分离，便于升级维护。模板的大部分操作都在后台可视化进行，用户甚至可以通过拖放配置不同的版块，来创建属于自己的独一无二的模板。 模板路径模板路径是ShopEx48安装目录/themes/模板目录构成进入到某一套模板目录中后，就可以看到该模板的目录和文件结构了:1. 可重用部分，文件夹中存放着模板各页面的公用部分，扩展名为html，一般是模板的头部和尾部，这两个部分在整个站点中都是相同的，

2、支持smarty语法 2. 边框目录，扩展名为html，存放着边框文件，边框是版块的呈现样式，相当于版块的模板，支持smarty语法 3. images目录，存放所有图片文件、css文件等 4. *.html，框架文件，扩展名为html，决定了页面的布局和版块可摆放的区域，是页面的骨架 5. preview.jpg ，模板预览 6. theme.xml，模板配置文件，包含模板信息、边框信息，版块配置信息等 模板前台的构成ShopEx48模板机制，对于整体的结构来说，是将页面的布局作为框架对应不同的功能页面，一个框架可以对应多个功能页面。对于页面来说，就是将页面抽象成由各个实现某项功能的版块组成

3、，这些版块作为独立的部分，可以通过切换不同的边框及编辑配置改变它的呈现样式。 Smarty模板引擎ShopEx48的模板体系引入了Smarty引擎，在框架、版块、边框中都可以应用Smarty语法，具体的写法是，如id: 模板操作以下是后台模板列表页面，模板的所有操作都在此进行 使用模板，点击相应模板下的“使用模板”，此模板便会加载成为当前模板。 模板上传，ShopEx48的模板包是一个tgz文件，包含了模板的所有资源和版块配置。进入后台“模板管理”，点击“上传新模板”，将模板包上传后，新模板会在模板列表最末出现，点击“设为默认”便能加载为当前模板。 模板下载，点击相应模板下的“下载”便可，模板

4、包是一个打包好的tgz文件。 恢复默认状态，以theme.xml为依据，还原到模板默认的样子，点击相应模板下的“恢复默认状态”。 模板配置，后台关于模板的可视化操作都是在“编辑模板”中进行的。 编辑模板“编辑模板”中，所列出的页面实际上是框架页，“可视编辑”是对此框架下的版块进行修改，“源码编辑”是编辑框架的源码，“创建”是给此功能页新建一个框架，默认所有页面使用的都是默认框架default.html。可视编辑所见即所得的编辑方式，用户可以在此进行添加、删除、修改版块的操作。框架介绍框架概述框架是页面的骨架，位于模板根目录下，它决定了页面大体的布局（如两栏、三栏等）和版块可摆放的区域。框架通常

5、都是比较简单的html文件，它的作用是将页面划分区隔，在适当的位置放置板块区(代码中的)，以便可视化编辑时摆放和配置版块。版块区是能放置版块的区域，一个框架页至少要有一个版块区才能放置版块，一个版块区能竖向摆放一个或更多的版块。 以下是一个首页的框架，其中的蓝色虚框部分为版块区公用部分框架是html代码，模板的头尾在所有页面中一般都是一致的，所以模板的头尾会被做成相应的html文件引用到各个框架中来，引用的部分也是能放置版块区的，这样可以免去重复的版块配置。框架与业务区框架页的名称是系统定义的，关联相应的功能页面，。一套模板有许多功能页面，但不是每个页面都必须有与之对应的框架，在没有与之对应的

6、框架存在时，页面使用默认框架default.html。它包含核心业务区，核心业务区因涉及到以后的升级，完全由程序输出，与模板无关，用户不能更改源码。对某一个功能页面也可以建立特定的框架，放置不同的版块做成新的新的页面。 以下是一个默认框架的例子，其中的是核心业务区版块介绍版块概述版块是具备某项功能的小区块，是组成页面的基本元素，用户可以通过配置版块的参数来达到修改模板的目的。版块本身只包含功能不包含样式，它的编辑是在后台可视化编辑里完成的，用户可以任意拖动版块位置、编辑版块参数等。编辑好的版块配置信息存放在数据库中，可由后台导出。 板块操作用户放置版块的过程非常简便，只需在后台版块编辑中选定需

7、要的版块，再点击希望放置的版块区便可。当用户将鼠标移动到某个版块上时会出现相应的工具条，点住“移动”，能拖动此版块的位置；点击 “修改”按钮，能编辑版块的配置。版块的增删及位置变动需要点击工具条上的“保存模板修改”按钮才能看到效果，版块本身的配置编辑直接点击面板中的“保存修改”钮便可。*按住键盘上的ctrl键点击版块上的工具条，能复制出一个带有原版块配置信息的新版块。版块的目录结构版块是模板重要的组成部分，具有很强的扩展性，用户可以自行编写版块来实现新的功能。版块的路径是ShopEx48安装目录/plugins/widgets，每个目录对应一个特定功能的版块，目录下有这样几个文件 widget

8、_search.php， 版块的执行程序 widgets.php， 版块的描述信息 default.html， 版块默认的模板，一个版块可以有多个模板，默认是default.html _config.html， 版块的配置文件 _preview.html， 版块在后台可视化编辑时的预览 边框介绍边框概述版块本身只包含功能，样式的定义完全由边框来决定，理论上边框能应用在任意版块上，是通用的。边框是在版块外围包了一层html，它相当于版块的模板风格。边框样式由css定义，一套模板会有许多个边框，供用户选择、自行搭配，这样用户仅在后台操作也能做出截然不同的页面。边框的路径是模板路径下的borders

9、目录，每个html对应一个边框，边框的描述信息在模板目录下的theme.xml中定义。打开版块编辑面板便能给版块选择边框边框结构以下是边框的html代码样例div class=border1 id= 边框的html代码都是类似的，一般是由头、中、尾三部分组成： 是版块的标题，在版块配置面板中填写 是由程序输出的版块的具体内容 是版块的id，每个版块都会有唯一的id作为标识，默认由程序生成，用户也可在版块配置面板中填写 为版块配置面板可选填的class，可以应用在如边框样式相同但内部版块样式不同等等的情形下 边框的编辑边框样式的修改通过修改css完成，对应的css在模板目录images下的bor

10、der.css中，当然也可以修改边框的html。边框的描述信息在theme.xml中，在初次加载模板时读入到数据库，而theme.xml在模板配置改变时不做变动，因此新增、删除边框的操作要下载最新的theme.xml进行编辑，“恢复默认状态”模板之后才能实现。 配置信息theme.xml边框概述theme.xml保存着模板的配置信息，包括模板名称、目录、边框信息、版块配置信息等等，模板最终要形成一个整体以来它的作用。theme.xml中的项除了版块配置需要手动编写，版块配置是由程序序列化输出的，记录着后台用户对于版块的操作配置。例：边框源码Cn0002048rcshopex对应项说明 name

11、， 模板名 version， 模板版本 info， 模板描述 author， 模板作者 site， 模板网站 update_url， 模板升级地址 borders， 边框的描述，这里所列出的信息会被用在后台“修改版块”面板的“版块边框”下拉框中。borders的写法：key为显示在后台的下拉选项，tpl为各边框相对模板目录的边框路径。 config， 模板中定义的参数，例如一套变色模板，它的颜色可以作为参数写在config中，方便用户在编辑模板时修改。config的参数可在后台“模板配置”中修改。 制作静态页面建立模板文件夹模板的制作过程都是在本地完成的，在本地安装完一套ShopEx48软件之

12、后，在模板目录：安装目录themes，建立要制作的模板文件夹，在此路径下制作静态页面。在模板文件夹下建立theme.xml之后，这套模板就能出现在后台模板列表中，并能对其进行编辑。制作静态页面这一步和通常的设计稿-页面的过程相同，需要制作者具备基本的html、css等知识，这时的页面代码规整，会给之后的制作带来很大的方便。 制作静态页面时需要划分好布局，做好边框的样式。版块内部的源代码可以从其他模板的源码中复制过来。这个时候所做的页面可以是低保真的，即仅划分页面的布局，版块的内容可以用图片来替代，待下一步深入制作时再写入样式。 例：默认模板页面-html建立框架框架模板的框架负责功能页面的布局

13、，框架是html文件，位于模板目录下，名称按照系统规定来命名。如首页框架：index.html，默认框架：default.html功能页面、业务区ShopEx48有不同的功能页面，分别负责购物、会员登录注册、文章等等内容，这些使得网店能够正常运行的功能区域称为业务区，因涉及到版本升级，由程序统一输出。框架和功能页面的对应关系框架和功能页面有对应关系，一个框架可以对应功能类似的多个功能页面。各功能页面默认的框架是默认框架，即default.html，一般把它做成内页的结构，默认框架中须包含业务区。 首页一般不涉及到业务流程，并且表现形式复杂，因此模板中需要有首页框架index.html与之对应。

14、需要做的几个模板框架 首页框架：index.html 默认框架：default.html 会员中心框架：member.html 购物流程框架：member.html 赠品框架：gift.html 例：默认框架源码 例：默认框架可视化编辑视图制作首页框架静态页面完成之后需要将其转成ShopEx48的框架。通常模板的头部和尾部是公用的，可以将它们分离出去，引用到各框架之中，这样不同框架都能使用同一套头尾，后台配置版块时仅需对头尾做一次编辑。静态页面中各版块位置以版块区替代，版块区可以放置竖向的多个版块，因此如边栏这样的区域，只需放置一个版块区。版块区有自己的id标识，这样版块就能和版块区结合的更紧

15、密，即使版块区位置变动，其中的版块也能随之变动。不同框架中的版块区的id都应该是唯一的，避免冲突。例：首页框架源码例：头部公用部分源码标签输出所有ShopEx48程序自带的资源，源码中必须写入，位置紧跟在标签之后。 例：尾部公用部分源码标签和标签一样也是必须要有的，位置放在模板末尾，用于输出一些js代码。 制作边框边框文件存放在模板borders文件夹下，边框决定了版块的表现样式，一套模板需要有多套边框可供用户选择。为了方便管理，边框的class和文件名都是以border+数字的形式命名。边框的描述信息写在theme.xml中。例：边框源码div class=border1 id= 边框的ht

16、ml代码都是类似的，由头、中、尾三部分组成。 是版块的标题，在版块配置面板中填写 是由程序输出的版块的具体内容 是版块的id，每个版块都会有唯一的id作为标识，默认由程序生成，用户也可在版块配置面板中填写 为版块配置面板可选填的class，可以应用在如边框样式相同但内部版块样式不同等等的情形下 建立theme.xml初始状态的theme.xml框架建立完毕，需要有一个初始的theme.xml将模板的初始数据导入到数据库中。theme.xml是模板的配置文件，包含了模板名称、模板描述、边框信息、版块配置等信息。可以从官方模板中复制一个theme.xml修改，也可以点此下载。初始的theme.xm

17、l中，版块的部分是不需要的，所以将widgets部分删除，编辑其他部分。theme.xml中的各项信息： name: 模板名 version: 模板版本 info: 模板描述 author: 模板作者 site: 模板网站 update_url: 模板升级地址 borders: 边框的描述，这里所列出的信息会被用在后台“修改版块”面板的“版块边框”下拉框中。其中key为显示在后台的下拉选项，tpl为各边框相对模板目录的边框路径。 config: 模板中定义的参数，例如一套变色模板，它的颜色可以作为参数写在config中，方便用户在编辑模板时修改。config的参数可在后台“模板配置”中修改。 例：theme.xml一缕木香ylmxShopEx4.8ShopEx边框边框决定了版块的表现样式，边框文件存放在borders文件夹下，一套模板需要有多套边框可供用户选择。后台配置版块当一切就绪，剩下的便是后台拖放版块和对版块进行配置。将版块拖放到各个框架中，选择合适的边框，配置参数，保存模板，模板的制作就完成了。点击模板编辑中的下载按钮，就能下载到打包好的模板。这个包是tgz格式的，包含所有版块的配置信息，可以直接上传应用。