模板制作规范

动作

出自建站大师开放平台wiki

跳转到: 导航, 搜索

建站大师开放平台之模板制作规范

目录

模板文件夹

1.开发包下载

开发包是建站大师提供给开发者在本地设计模板的文件目录包,开发者必须根据该目录结构进行模板设计。 可从如下地址:http://open.313.com/template/demo-complete-0.1.zip

下载开发包,然后将安装包解压本地磁盘目录。

2.模板文件夹目录树结构

解压后的文件夹目录树结构如下图所示:

1.jpg

2.1 根目录

2.jpg

注:

1)不符合以下规则的其他文件目录结构将在审核中被忽略或视为不合法。

2)模板文件后缀.ctp

下面详细介绍各个目录的作用:

html目录:

html目录主要放置模板JS/CSS/图片

3.jpg

所有css、js和图片文件必须分别放在css、js和img文件夹下

Img文件夹下必须包含该模板的缩略图screenshot.jpg、预览图screenshot-2.jpg和截图screenshot-3.jpg(用于模板预览对比审核) 规格分别为: 160px * 120px、280px * 230px、页面原始大小;

Css文件夹下的css默认文件名称必须为style.css;

edit文件夹下默认存放编辑模式时的调试js和css文件(edit.js和edit.css),可忽略。

theme目录:

theme目录下放置common/layouts/models等文件夹

4.jpg

1)Layouts 文件夹:

包含默认布局文件: default.ctp

默认布局:

{ header}

{$content_for_layout}

{ bottom}

2)Models文件夹:

存放articles、books、downs、jobs、htmlpages、links、orders、pages、products、search、votes等11个模块的文件,可根据设计需要增删模块。

各模块下默认文件(其余新增文件必须在配置文件里设置方能生效):

Articles: index/view
Books: index
Downs: index/view
Jobs: index/view/apply
Htmlpages: index
Links: index
Orders: myorders
Pages: home
Products: index/view
Search: index
Votes: view

注:在此约定以下出现的modelName字符都表示以上模块的任一模块名称

3)Common文件夹:

5.jpg

Blocks存放文件名以block_开头的小模块模板文件。

Elements存放文件名以element_开头的嵌入模板文件以及幻灯片模板文件夹slides。

调用方法:{element block_name}、{element element_name}、{element slides/slide_name},默认可调用{element block_modelName}

3)theme.info配置文件:

详细配置参详下面的第四大点。

模板关键字

关键字类别包括:模块名称、CSS、文件/文件夹名称、模板标签,请勿在相应区域重新定义这些关键字。

模块名称关键字:modelName

CSS关键字:以edit-开头的所有class及id

文件/文件夹名称关键字:

1、/theme/common/ 目录下的blocks和elements文件夹:
   Blocks文件夹下的文件:文件名必须是以block_开头命名
   Elements文件夹下的文件:文件名必须是以element_开头命名
2、/theme/models/ 目录下的文件夹名称必须是modelName
3、/theme/layouts 目录下包含默认布局文件default.ctp

模板标签关键字:

语言:

{CFG_LANGUAGE}	中英文值分别为:chi和eng
{$content_for_layout}	内容布局标签,值等于渲染models文件夹下的模板后的模板数据
{$_title_for_layout}     页面标题
{$_keywords_for_layout}   页面关键字
{$_description_for_layout}  页面描述
{$cfg_background}    页面背景
{$cfg_logo}	  页面logo
{$block}   可拖动小模块数据

模板标签

1标签定义

定义:{标签}

例:{$name}

2语法标签

2.1 {element tpl}嵌入子模板

例:嵌入头部模板 {element element_header}

2.2 { $name} 变量名

2.3 if 判断语句

{if express} {else} {end if}

2.4 loop 循环语句

{loop $data $key $value} {end loop}

3数据标签

3.1 列表页

3.1.1 列表数据:{modelName_list}

{loop	modelName_list	$item}		
   标题:{$item[‘title’]}
   标题链接:{$item[‘title_href’]}
   分类:{$item[‘cat’]}
   分类链接:{$item[‘cat_href’]}
   图片:{$item[‘img_src’]}
   图片链接:{$item[‘img_href’]}
   文件大小:{$item[‘file_size’]} 
   数量:{$item[‘num’]}
   类型:{$item[‘type’]}
   地区:{$item[‘area’]} 
   时间:{$item[‘time]}
{/loop}

注:不同模块,输出的数据不一致,在此列出所有可能输出的数据

3.1.2 分页:{pagination }

分页class:

pager-item:页码class

pager-current:当前页class

pager-nolink:没有链接class

如html为以下代码的展示效果:

<span class="pager-nolink"><span>上一页</span></span>		 
<span class="pager-current"><span>1</span></span>  
<a class="pager-item"  href="2" ><span>2</span></a>		
<a class="pager-item"  href="next" ><span>下一页</span></a>

6.jpg

3.2 查看页

查看数据:{modelName_view}

3.3 其他标签

参照模板标签关键字

3.4 标签测试

可以使用API测试工具查询数据标签的返回字段、类型及描述等标签信息,避免使用无效标签。 API测试地址:http://open.313.com/template/apitools(此功能暂未开放)

3.5 标签示例

请查看《模板标签文档》

4区块标签

4.1 应用于编辑模式下的标签:

系统核心区域标签:{edit_undroppable} 用于标识模板里不可进行拖动、设置、删除等操作的区域

系统编辑区域标签:{edit_droppable side_name} 用于标识模板里可进行拖动、设置、删除等操作的区域,其中参数side_name表示该区域的名称,可自定义该名称,系统默认使用(side_a,side_b,side_c)作为各模板间通用的区域名称。

More标签:{ more} 该标签在编辑模式下显示(设置和删除),而在非编辑模式下正常显示(more/更多),其中参数

配置文件theme.info

1、写法:一行一条配置,以分号;作为注释。

2、当modelName = all 表示此配置适用所有模块;否则只适用当前模块。

3、当前仅支持以下类型的配置,其余类型的配置将在审核中视为不合法。

小模块可选样式
block_files[modelName][block_name] = "样式名称"
其中block_name为模块样式文件名
模块列表页可选样式
model_files[modelName][models_name] = "样式名称"
logo配置
default_data[all][cfg_logo] = "img/logo文件名"
 或者
default_data[cfg_logo] = "img/ logo文件名"
banner配置
default_data[modelName][cfg_banner] = "img/banner文件名"
banner幻灯片效果可选样式
slide_files[modelName][slide_file] = "样式名称"
其中slide_file为幻灯片样式文件名
自定义小模块数据
template_data[modelName][modelName][type] = rows
其中第二个modelName不允许等于all,必须是某个模块名称,用来调用指定模块的数据
Type值为:info信息和cat分类两种数据类型
Rows值为:大于0且小于等于20的整型(记录条数)

模板DEMO

注:设计师模板制作完成后直接根目录打包所有文件,打包格式必须为.zip。

可从如下网址:http://open.313.com/template/demo-basic-0.1.zip 下载模板制作实例

本地测试,在模板编辑模式下,请加/html/edit/js/edit.js和/html/edit/css/edit.css 测试是否与前台js/css有冲突,具体请查看《DOM与CSS参考文档》。