淘宝网装修市场高级模板设计指南1目录1、本地开发环境 (3)1.1 什么是SDK (3)1.2 下载SDK (3)1.3 安装SDK (4)1.4 SDK的目录结构 (7)1.5 启动SDK (8)2、使用SDK后台 (10)2.1 创建模板 (10)2.2 预览模板 (17)2.3 配置SDK本地属性 (18)3、模板的标准结构 (18)4、设计模块 (18)4.1 创建相关文件资源 (18)4.2 编写模块代码 (19)4.2.1 引入标识 (19)4.2.2 使用KISSY效果 (19)4.2.3 使用模块参数 (19)4.2.4 调用数据接口 (20)4.3 配置模块信息 (20)5、设计页面 (22)5.1 结构化页面 (22)5.2 设计页面 (24)5.2.1 引入单个模块 (24)5.2.2 划分页面片区 (25)5.2.3 配置页面信息 (26)6、特殊页面要求 (27)6.1 宝贝详情页面 (27)6.2 宝贝列表，文章列表页面 (27)6.3 不可装修的页面 (27)7、调试模板装修效果 (28)8、关于白名单过滤 (28)9、PHP函数 (28)10、发布模板到装修系统 (28)21、本地开发环境1.1什么是SDKSDK是淘宝提供给设计师在本地设计模板的软件开发包，SDK模拟了淘宝店铺环境。
SDK主要包括三个部分：Server，PHP引擎和模拟数据。
Server是指SDK会在本机上启动一个Server，这样我们可以通过浏览器浏览设计的作品。
PHP引擎是指设计师只能使用PHP作为模板设计的语言。
模拟数据是指SDK包括了淘宝各个典型的店铺，这样设计师在设计模板时不用考虑实际的数据库。
目前，提供Windows操作系统和Mac操作系统的SDK工具。
1.2下载SDK装修市场后台下载安装包，安装至本地，创建SDK web控制台。
您将使用淘宝ShopSDK 来开发和上传设计模板。
在开始设计之前，需在本地部署SDK环境。
设计师登录装修市场后，点击“设计师后台”导航按钮进入。
(加入设计师注册流程帐号。
)进入设计师后台界面：34点击“高级版”进入SDK 模板设计界面，1.3 安装SDK下面给大家具体介绍Windows 版本的安装。
假设您已经下载好了Windows 版本的安装文件，马上双击安装可执行文件，比如当前版本：进入SDK 欢迎界面，然后在许可证协议里选择“我接受”5进入安装选项界面，选定安装的组件，点击“下一步”进入安装文件夹界面，选择意向的安装目录，点击“安装进入安装进度界面，点击“关闭”，即完成SDK的安装。
67安装完成后将会在桌面生成“启动设计师SDK ”的图标。
1.4 SDK 的目录结构首先以设计师身份从淘宝店铺装修市场下载SDK 安装包（Windows 版或者Mac 版），然后将安装包解压到任何一个本地磁盘目录：解压后的目录结构如下图所示：各个目录的作用如下： • bin 目录：bin 目录主要放置启动和关闭SDK Server 的脚本命令• conf 目录：conf目录主要存放SDK的配置文件以及SDK web 控制台的war 应用•db目录：db目录主要存放SDK本体模拟数据文件，设计师设计的模板在本地渲染的时候，数据就是从此目录的文件中读取的。
•htdocs目录：htdocs目录存放设计师设计的模板文件，这个目录下可以存放多套模板文件•jre目录jre是SDK运行的Java环境。
SDK Windows版本会绑定JRE，而Mac版则没有这一目录。
Mac已经提供了默认的Java运行环境•lib 目录lib目录主要存放SDK运行所需要的jar包•logs目录logs目录主要存放SDK运行的日志文件•temp目录temp 目录中存放已经制作好的的SDK模板的zip包，设计师制作模板之后，通过SDK后台打包生成的zip文件就放在该目录下。
•ReadmeReadme文档介绍启动SDK的方法了解了目录结构以后，接下来介绍如何启动SDK。
1.5 启动SDK如果你的操作系统是Windows的话，双击桌面上的“启动设计师SDK”图标，系统将自动运行后台文件“启动设计师”并在浏览器中打开SDK后台。
以下是后台启动界面，设计师不用关心细节。
同时，为了保持运行状态，请不要关闭它。
8启动中的浏览器界面：启动后的界面:9如果你使用的是Mac版本，这需要打开terminal，然后进入SDK的bin子目录，执行sh startServer.sh即可。
如果需要关闭SDK，只需要在启动窗口中按下Ctrl+C即可关闭SDK（Mac同样）。
SDK不要放在桌面或含有中文名称以及空格的目录下。
SDK Windows版本会绑定Java运行环境，直接启动即可。
SDK Mac或Linux版本不会绑定Java运行环境，Mac会使用系统自动的Java运行环境，而Linux则需要你手动设置JAVA_HOME路径。
OK，到此为止你已经打造好了你本地的SDK环境，让我们一起开始我们的模板设计之旅吧。
2、使用SDK后台SDK中提供了一个管理后台，在启动SDK之后默认会进去SDK的管理后台，通过SDK 的管理后台，我们可以通过后台管理界面进行多方位本地管理。
2.1 创建模板进入Web控制台首页，点击“设计新模版”按钮，10进入模板创建界面如下图所示：按照提示填写模板信息，如下图：1112点击“下一步”按钮，进入模板成功创建的界面：模板目录为“helloworld ”创建成功后，看看发生了什么变化。
点击“3，返回控制台”的链接：13名称为“模板初体验”的模板（模板目录名称为“helloworld ”），在首页显示了。
然后，点击“模板初体验”的模板，进入模板详情页面，如下图：在模板信息中，版本号是1.0.0(前面填写过)，语言为PHP （暂时仅支持PHP 语言）。
图片的下方是缩略图，分别有：首页、文章列表页、文章页面、搜索列表页、促销页面和宝贝详情页。
下面的目录介绍中会说明他们。
在“1.4 目录结构”章节中，介绍过htdocs目录存放设计师设计的模板文件，这个目录下可以存放多套模板文件。
浏览下该目录下面发生的变化，目录名称为helloworld的模板，SDK在htdocs目录下建立一个helloworld目录。
后面的章节会具体介绍这些文件和目录。
index.php：首页articleList.php：文章列表页article.php：文章页面searchList.php：搜索列表页onsale.php：促销页面detail.php：宝贝详情页header.php：头部footer.php：尾部site.xml：模板描述符文件。
配置和管理模板和模块。
TODO:后面的章节会详细提到。
assets目录：同时包括images和stylesheets两个子目录，静态资源引用需要以相对路径为准。
例如：images目录：存放图片等静态文件。
stylesheets目录：存放页面的渲染CSS文件，默认存放着名为global.css的全局样式文件。
modules目录：管理和配置模块。
在上面提到的几个缩略图的图片也在该目录里面有对应的文件，默认的目录结构在X:\DC_SDK\htdocs\helloworld\assets\images\，X代表安装的盘符，默认值是D盘。
1415替换这些图片（默认的大小150x150 像素），利用缩略图更好地来展示（预览）页面模块。
地址：http://localhost:8080/_ah/template/templateDetail.do?dirName=helloworld ，刷新模板详情页面：在了解创建模板的情况后，下面预览一下“模板初体验”的模板。
16172.2 预览模板点击菜单中的“我的模板”导航链接，进入“我的模板”界面：然后，点击“预览”按钮，马上浏览：看到了经典的淘宝店铺页面，除了头和尾部分，其他部分几乎没有内容。
这是因为没有编辑模板页面。
对于设计师来说，你要做的工作就是填充淘宝的头尾之间东信息。
或许这会儿你已经迫不及待希望看到一个模板到底能做到什么程度，SDK 本本省就提供了一个示例模板，你可以直接看到一个成熟的模板是什么样式，在浏览器中地址栏中输入http://localhost:8080/template1/index.htm ，你就可以看到默认自带的模板：模板页面预览的效果2.3 配置SDK本地属性在SDK中，我们提供了多套数据模拟数据，在SDK后台界面上，点击系统设置，就会列出多套默认的数据，设计师通过选择对应行业的数据便亦可以使用相应行业的模拟数据来调试模板。
3、模板的标准结构4、设计模块模块化的页面通常是由一个个模块做组成的，所以在介绍编写页面之前，我们先了解模块是如何设计的。
4.1 创建相关文件资源模板中的模块都是集中在模板标准目录的modules目录中。
模块的创建及管理可在SDK 控制台的模板详情页进行。
18具体的模块创建及管理功能，请参见Wiki模块编写规范：/index.php/%E6%A8%A1%E5%9D%97%E7%BC%96%E5%86%99%E8%A7%84%E8%8C%83下来需要做的就是在php文件中编写具体的模块代码，配置模块信息，模块的参数。
4.2 编写模块代码4.2.1 引入标识模块代码要能够被JS识别为模块，以便进行装修操作，设计师需要引入在模块的html代码中引入模板规范约定的标识符J_TBOX, 以及输出用以在装修中操作模块编辑删除，移动的Toolbar，<?php echo $_MODULE_TOOLBAR ?>，具体代码示例如下：<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>>//模块内部代码</div>4.2.2 使用KISSY效果虽然说设计师不能够直接书写JS，但是淘宝KISSY框架提供了一些通用的特效接口，通过在html中配置使用，比如跑马灯效果。
要使用KISSY特效接口，首先要在模块内部某个节点上加上class J_TWidget,然后进行一系列参数配置，要使用图片轮播效果，可以有以下配置：<div class="carousel J_TWidget" data-widget-type="Carousel"data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','prevBtnCls':'prev','nextBtnCls':'next', 'contentCls': 'carousel-main', 'navCls': 'carousel-nav','activeTriggerCls': 'selected','lazyDataType':'img-src'}">具体的KISSY使用说明和示例效果请见：/index.php/Widget%E8%A7%84%E8%8C%834.2.3 使用模块参数模块通常代表了一个独立的功能，但是一个功能被不同的卖家使用起来，通常卖家有一些特定的要求，比如，模块中显示的图片，不如显示的宝贝的大小，等等一系列的扩展要求，该如何满足，不可能让所有的卖家都是用完全一模一样的功能。