淘宝网装修市场
高级模板设计指南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)
2
1、本地开发环境
1.1什么是SDK
SDK是淘宝提供给设计师在本地设计模板的软件开发包，SDK模拟了淘宝店铺环境。
SDK主要包括三个部分：Server，PHP引擎和模拟数据。
Server是指SDK会在本机上启动一个Server，这样我们可以通过浏览器浏览设计的作品。PHP引擎是指设计师只能使用PHP作为模板设计的语言。
模拟数据是指SDK包括了淘宝各个典型的店铺，这样设计师在设计模板时不用考虑实际的数据库。
目前，提供Windows操作系统和Mac操作系统的SDK工具。
1.2下载SDK
装修市场后台下载安装包，安装至本地，创建SDK web控制台。您将使用淘宝ShopSDK 来开发和上传设计模板。在开始设计之前，需在本地部署SDK环境。
设计师登录装修市场后，点击“设计师后台”导航按钮进入。(加入设计师注册流程帐号。)
进入设计师后台界面：
3
4
点击“高级版”进入SDK 模板设计界面，
1.3 安装SDK
下面给大家具体介绍Windows 版本的安装。
假设您已经下载好了Windows 版本的安装文件，马上双击安装可执行文件，
比如当前版本：
进入SDK 欢迎界面，
然后在许可证协议里选择“我接受”
5
进入安装选项界面，选定安装的组件，点击“下一步”
进入安装文件夹界面，选择意向的安装目录，点击“安装
进入安装进度界面，点击“关闭”，即完成SDK的安装。6
7
安装完成后将会在桌面生成“启动设计师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文件就放在该目录下。
?Readme
Readme文档介绍启动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
进入模板创建界面如下图所示：
按照提示填写模板信息，如下图：11
12
点击“下一步”按钮，进入模板成功创建的界面：
模板目录为“
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盘。
14
15
替换这些图片（默认的大小150x150 像素）
，利用缩略图更好地来展示（预览）页面模块。
地址：http://localhost:8080/_ah/template/templateDetail.do?dirName=helloworld ，刷新模板详情页面：
在了解创建模板的情况后，下面预览一下“模板初体验”的模板。16
17
2.2 预览模板
点击菜单中的“我的模板”导航链接，
进入“我的模板”界面：
然后，点击“预览”按钮，马上浏览：
看到了经典的淘宝店铺页面，除了头和尾部分，其他部分几乎没有内容。这是因为没有编辑模板页面。对于设计师来说，你要做的工作就是填充淘宝的头尾之间东信息。或许这会儿你已经迫不及待希望看到一个模板到底能做到什么程度，SDK 本本省就提供了一个示例模板，你可以直接看到一个成熟的模板是什么样式，在浏览器中地址
栏中
输入http://localhost:8080/template1/index.htm ，你就可以看到默认自带的模板：
模板页面预览的效果
2.3 配置SDK本地属性
在SDK中，我们提供了多套数据模拟数据，在SDK后台界面上，点击系统设置，就会列出多套默认的数据，设计师通过选择对应行业的数据便亦可以使用相应行业的模拟数据来
调试模板。
3、模板的标准结构
4、设计模块
模块化的页面通常是由一个个模块做组成的，所以在介绍编写页面之前，我们先了解模块是如何设计的。
4.1 创建相关文件资源
模板中的模块都是集中在模板标准目录的modules目录中。模块的创建及管理可在SDK 控制台的模板详情页进行。
18
具体的模块创建及管理功能，请参见Wiki模块编写规范：
https://www.doczj.com/doc/567933444.html,/index.php/%E6%A8%A1%E5%9D%97%E7%BC%96%E5%86%99%E8%A
7%84%E8%8C%83
下来需要做的就是在php文件中编写具体的模块代码，配置模块信息，模块的参数。
4.2 编写模块代码
4.2.1 引入标识
模块代码要能够被JS识别为模块，以便进行装修操作，设计师需要引入在模块的html代
码中引入模板规范约定的标识符J_TBOX, 以及输出用以在装修中操作模块编辑删除，移动的
Toolbar，，具体代码示例如下：
//模块内部代码
4.2.2 使用KISSY效果
虽然说设计师不能够直接书写JS，但是淘宝KISSY框架提供了一些通用的特效接口，通过在html中配置使用，比如跑马灯效果。要使用KISSY特效接口，首先要在模块内部某个节
点上加上class J_TWidget,然后进行一系列参数配置，要使用图片轮播效果，可以有以下配置：
data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','prevBtnCls':'prev','nextBtnCls'
:'next', 'contentCls': 'carousel-main', 'navCls': 'carousel-nav','activeTriggerCls': 'selected',
'lazyDataType':'img-src'}">
具体的KISSY使用说明和示例效果请见：
https://www.doczj.com/doc/567933444.html,/index.php/Widget%E8%A7%84%E8%8C%83
4.2.3 使用模块参数
模块通常代表了一个独立的功能，但是一个功能被不同的卖家使用起来，通常卖家有一些特定的要求，比如，模块中显示的图片，不如显示的宝贝的大小，等等一系列的扩展要求，
该如何满足，不可能让所有的卖家都是用完全一模一样的功能。模块参数就是为此而生的，
首先我们需要配置说明该模块有哪些参数，名称是什么，等等信息（下一节具体讲），然后
我们就可以在模块的PHP代码中使用。渲染引擎会根据设计师配置的参数列表，为每个模
块生成一个参数录入的表单便于卖家输入，然后引擎会将参数再渲染模块的时候作为环境信19
息提供出来，由设计师调用。使用模块参数的示例代码如下：
$_MODULE[‘module_name’]
设计师只需要用类似方式就可以访问到自己定义的参数，由卖家设置的具体数据。这里的module_name是一个示例名称，访问具体参数，需要设计师采用具体的参数名。
4.2.4 调用数据接口
请参见wiki中SDK开发接口详解：
https://www.doczj.com/doc/567933444.html,/index.php/SDK%E5%BC%80%E6%94%BE%E6%8E%A5%E5%8F%A3%E8
%AF%A6%E8%A7%A3
4.3 配置模块信息
写完模块的PHP代码之后，需要对模块进行进一步的配置，以方便在模板范围内使用模块。模块的配置信息都是在每个模块目录下module.xml中。
模块的基本信息配置：
ID:模块的标识，用以引用模块（后面章节会详细讲），通常建议该ID同模块的目录名和模
块的php文件名同名。
Name：模块名称，卖家在添加模块的时候，会在模块选择区域中显示。
File：模块的php文件，相对于模块的当前目录。
Thumbnail：模块的缩略图，会在模块选择区域中显示。
Description：模块功能表述，会在模块选择区域中显示。
以上是模块的基本配置信息，保证了模块的正常运行，为了进一步扩展模块功能，可以配
置模块支持的参数。示例配置如下：
formType="text">
http://aaa
下面我把代码黏贴在下面，下载后复制代码放在对应的自定义模块就可以用了， 如果新手不会放，那就在百度里搜索，是怎么放的，我这里就提供代码 以前我都是在淘宝上卖30元的，现在免费送了 1【万用模版】紫色女装饰品女鞋化妆品等全套豪华模板 收藏代码：
| | |||||||||
| |||||||||
| ||||||||||||||
宝—管理我的店铺—宝贝分类 简单介绍一下我的操作方法： 1、选好喜欢的宝贝分类模板，复制保存之后，填上适当的文字，然后 上传到网上相册； 2、复制代码 到宝贝分类中； 3、打开网上相册，选中相应的模板，右击属性，复制属性中的图片地 址； 4、由于网上的图片地址过长，因此要在https://www.doczj.com/doc/567933444.html,/上进行网 址缩短工作：即把复制的图片地 址到这个网站中进行缩短，然后会出现一个较短的图片地址 5、再用短地址放入
的""中就ok了 9)如何在店铺公告添加个性的鼠标指针：马上copy这个代码，它可以 让您的店铺公告更有吸引力呀
淘宝装修模板制作-无需模板，让你的宝贝描述更美观，更整洁 众所周知，版面加了图片会更漂亮，会更加吸引买家的视线，但如果图片多了，所占空间必定也大了，打开网页的速度必定大打折扣，如果买家网速不理想的话，浏览你的店铺的时候可能就没有耐性等待加载所有的内容了，同样内容文字排版不够美观直接的话也吸引不了买家。今日发这贴主要是说说自己的经验，令你的宝贝描述版面更加美观整洁，更能吸引买家。 使用软件：dreamweaver，各大下载网站均有下载，百度搜索一大把。 打开软件如下图，点击“HTML” 之后选择“插入”-“表格”，如图，行数改大一点，如果编辑结束后，多的可以删除，表格宽度改为：727，这是宝贝描述版面的合适宽度，大家可以适当调整. 点击“确定”，如图如示： 把鼠标移到表格边框并点击，屏慕下方就会出现该表格的属性，边框默认是1，把它改为0，这样表格的边框就不会在网页中显示出来了. 当你想在表格中插入图片的话，只需把光标移到单元格中，在菜单上选择“插入”-“图像”即可，如图： 这时由于图片宽度过大，以致系统自动调了宽度，左右两列单元格宽度变小，而中间单元格宽度增大，我们可以通过合并单元格来实现宽度复原，按入“Ctrl”键，鼠标分别单击同一行中的三个单元格，然后单击右键选择“表格”-“合并单元格”，看看效果，如图： 以下是本人店铺宝贝描述编辑的截图： 编辑排好版后只需把代码复制然后粘贴到你的宝贝描述内容中去即可，具体操作如下：点击菜单左上方的“拆分”，页面即出现如下形状： 把鼠标移到表格边框，系统自动选择代码呈高度现状，鼠标只需移至代码区点击右键“拷贝”，如图：把代码粘贴在你的宝贝描述中去，覆盖原来的所有代码即可。 本人文笔有限，可能描述不够详尽，希望此贴可以帮到各位店主，令你们的宝贝更加能吸引买家，祝生意蒸蒸日上，日进斗金。 促销活动是现在所有卖家不可缺少的一 项活动。 如何装修自己的淘宝店铺如何装修自己的淘宝店 铺 LG GROUP system office room 【LGA16H-LGYY-LGUA8Q8-LGA162】 添加淘宝网店收藏 摘要: 淘宝网店收藏链接的重要性这里我就不多重复了，好直接进入正题。第一、就是准备工作了，第二是具体操作。首先、要准备好做收藏按钮的图片。图片可以自己设计，也可以购买。宽度限制在220象素以内，高度不限。然后 ... 淘宝网店收藏链接的重要性这里我就不多重复了，好直接进入正题。第一、就 是准备工作了，第二是具体操作。 首先、要准备好做收藏按钮的图片。 图片可以自己设计，也可以购买。宽度限制在220象素以内，高度不限。然后 把图片存在网络相册里（最好是淘宝的相册哦）。上传图片到网络空间存好之 后，把图片地址复制下。 嘻嘻^_^：接着、准备收藏按钮的链接。 打开自己的淘宝店铺，点击“收藏本点铺”，出现收藏设置窗口。在页面空白 处，点击鼠标右键，点“属性”，然后把属性里的地址复制下来保存。 请看下面的步骤示意图： 亲们请注意了：这里如果点收藏的是自己的店铺，会显示“自己不能收藏自己 的店铺”。这个不用管它，继续在空白处点鼠标“右键”，然后选“属性” 接着就是装修自己的店铺了哦点击“装修次页面” 然后就是在左边栏添加“自定义模块” 然后再添加了的自定义模块中点击编辑按钮 插入自己喜欢的图片就是开头将的素材 弹出图片设置对话框，在地址栏里粘贴相册里的图片地址。点确定。 图片设置中的链接地址就我前文提到的我们的收藏链接 是这个模式的哦 好了大功告成了哦发布吧 【Wordder模板】添加一个或多个旺旺在线联系方式 收藏分享 摘要: 1.添加旺旺联系方式各位亲们你们好^^今天我来告诉大家该怎么在模版或者其他地方添加一个或多个旺旺在线联系方式。还是以示例来作说明吧。首先来看下这个模块像这个地方就需要添加四个旺旺在线代码。好了，我们先打开 ... 1.添加旺旺联系方式 各位亲们你们好^^今天我来告诉大家该怎么在模版或者其他地方添加一个或多个 旺在线联系方式。 还是以示例来作说明吧。 首先来看下这个模块 像这个地方就需要添加四个旺旺在线代码。 好了，我们先打开这个网址 打开之后首先来看下第一步（如下图） 对于上图，一般的情况下我们会选择风格一。因为大多数卖家都是这样的，也就 多讲了。 接下来在看第二步（如下图） 相关主题
文本预览
|
