淘宝模板开发系列之模板编写规范

目录

[隐藏]

• 1 总体说明
• 2 模板目录结构
• 3 模板描述符文件详解
• 4 模板编写
  • 4.1 1. 引入模块
  • 4.2 2. 引入片区
  • 4.3 3. 模板中加入模块配置
  • 4.4 4. 宝贝详情页设计
• 5 PHP Lite引擎详解
  • 5.1 Php lite限制
  • 5.2 Php lite函数白名单

总体说明

对于一个设计师的页面来说，在淘宝上呈现的页面结构如下：

基于这样的页面结构：

1. 淘宝要提供一个页面的框架，也就是页面的Layout，设计师设计的页面是Layout中的一部分，如在下面的位置：

<div id="content"></div> 

2. 模板必需提供全局的CSS，Header和Footer，在任何一个设计的页面都会包含这三者。
3. CSS，Header和Footer还会被淘宝其他页面所使用，如评级、店铺留言等。
4. 页面包含模块，一部分模块是支持交互的，也就是卖家可以录入一些参数来改变模块的呈现

基于这个考虑，模板需要一个全局的配置文件，也就是site.xml，该文件包含了模块的详细信息，由于页面还可能涉及到模块，所以我们还要对各个模块进行定义，模块同时也是代码复用的基本单元，模块的配置文件为module.xml。

模板目录结构

模板目录结构是指模板各个资源目录划分，如下图：

目前主要分为已下记录类：

• 静态资源：都存放在assets目录，同时包括images和stylesheets两个子目录，静态资源引用需要以相对路径为准。另外本次升级新增加了extra.css文件，此文件可以设置页头和页面背景等。

• 模板文件：也就是模板文件，后缀名为.php或者.vm，依据所选择的模板语言，模板文件包括全局头，全局尾和各个文件的主体。页面文件不能形成子目录。

• 模块文件：不能包含其他资源文件，如果包含其他资源文件，需要来自淘宝相册的服务，模块主要就是模块的配置文件和其模块主体文件。所有模块都存放于modules目录下，系统模块名为taobao.module.xxx，设计师模块名由设计师随意定义，每个模块下存放对应模块的images/scripts/stylesheets。

• 元信息文件：如xml文件，screenshot文件等，模板为site.xml，模块为module.xml

• 在SDK中，htdocs可以同时包括多个模板，以不同的目录加以区分，SDK会自动识别这些模板并进行管理，如样例中的template1是模板的名称。

• 在htdocs的根目录下有一个dcsdk_functions.php的文件，所有SDK提供的函数都会在这里列出；还有一个site.xsd，这个是site.xml的xml schema文件，主要是辅助进行site.xml编辑。

参阅：查看目录结构模块化