用户工具

站点工具


start

统一平台模板切图入门

NO静态切图!升级你的作品~

统一平台的“切图”与“套页面”工作是同步进行的,去除切图人员与套页面人员的沟通环节,缩短工期。

统一平台的模板前端开发可在切图过程中调用统一平台数据, 使用标签语法时可同时实现与切静态页面类似的“实时预览”。

如:

{foreach item=article from=$list}
<li class="fl">{$article.title}</li>
{/foreach}

即可得到,以下预览列表

<li>这是一篇测试文章</li>
<li>这是一篇测试文章</li>
<li>这是一篇测试文章</li>

那么问题来了,这种“全变量”的模板页面如何看到效果?

如此简单操作 即可实时预览

1.引入jSmarty引擎

模板开发完成后可利用PHP的Smarty引擎来替换模板动态数据;

那么问题来了,如果在模板开发过程中 要如何实时预览切图效果,并且展现动态数据?

需在每个HTML文件头部引入一句JS,来模拟PHP的Smarty引擎:

<head>
	<script type="text/javascript" src="http://chanpin.xm12t.com.cn/js/preview.js"></script>
	...

2.开启实时预览

方法一

编辑Chrome的快捷方式→右键“属性”,在“目标”地址最后加上<code> --allow-file-access-from-files</code>(需重启Chrome,用此快捷方式启动),如:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

或本地搭建http服务器环境调试。

方法二

需搭建http服务器,把模板文件放入www目录,通过访问 http://localhost/模板目录 来访问预览!

Smarty标签语法

统一平台的模板采用Smarty国际化引擎,语法通熟易懂。

输出文本类型变量:

{$title}

输出数组类型变量(嵌套循环与限制循环次数):

比如看到如下变量说明

  • {$navs[0].name} 导航名
  • {$navs[0].link} 导航链接
  • {$navs[0].childmenu[]} 子导航,结构类似导航
  • {$navs[0].childmenu[0].name} 子导航名
  • {$navs[0].childmenu[0].link} 子导航链接

from数据源名称,item别名,key为遍历次数,name标识。根据具体数据键值,引用数据如:$navs.name。子键值数据为数组可以再次进行遍历,方式一样,from数据源由$navs改为$navs.data。

{foreach item=nav from=$navs}
<li class="fl">{$nav.name}
	{if $nav.childmenu}
	{foreach item=nav_list from=$nav.childmenu}
	<ul class="clearfix">
		<li>{$nav_list.name}</li>
	</ul>
	{/foreach}
	{/if}
</li>
{if $nav@index+1 == 5}{break}{/if}
{/foreach}

更多Smarty语法请参见:http://www.yiibai.com/smarty/smarty_ifelseif.html

可调用数据变量

查阅变量请跳转至模板文件列表点击对应文件名称,进入查阅!

或点击此处查阅公共变量

模板中必备变量

为保证模板功能的完整性,以下变量必须在模板中出现(点击列表可查看引用位置与方法):

模板JS、CSS引用

所有的静态文件引用都需要加入{$site_url}变量,如

...
	<link rel="stylesheet" rev="stylesheet" href="{$site_url}css/style_{$stylecolor}.css" type="text/css" />
	<script type="text/javascript" src="{$site_url}js/script.js"></script>
</head>
<body>
	<img src="{$site_url}image/top.jpg" />
...

但在CSS文件中引入图片无需使用{$site_url}

注意:html文件中不要出现如下JS运行代码:

<script type="text/javascript">
	...
</script>

所有JS写入.js文件中引入!! 这是基本规范和要求!

CSS全局公共库

建议引入css全局库,内附css reset与一些常用css封装:

<link rel="stylesheet" rev="stylesheet" href="http://chanpin.xm12t.com.cn/css/global.css" type="text/css" />

更多说明,点击这里链接《global.css

如何修改示例数据

可视化修改

对于全局生效的变量,建议使用config.ini配置文件修改方式:参见 方法一:编辑config.ini文件

简单可视化的修改方法,仅需在地址栏后加上 ?database 即可!例如:

file:///E:/Desktop/demo/index.html?database

针对性修改

模板变量中有两类变量,一类是系统变量,另一类是模板变量

两者的修改方式不同!

模板变量

模板变量定义于xxx.json文件。 作用是定义一个可让客户随意修改的数据。

如index.json文件中的变量引用方式为$index.xxx,详见《统一平台模板Demo与Smarty变量:{$index}

修改方式则是直接修改xxx.json文件中对应变量的value值!(除类型type为list的变量)

系统变量

系统变量是调用系统中的一些数据,如网站标题、导航栏目、文章数据等。

模板开发过程中提供的示例数据比较单一。

若想修改,使得模板更加美观,其方式如下:

方法一:编辑config.ini文件(推荐)

只需在config.ini文件中的debug调试模块中做好对应配置,
具体配置方法参见:《config.ini调试内容

注意:此方法修改的变量对全局所有页面生效!

方法二:每个页面头部添加强制修改代码

注意:此方法修改的变量只针对修改页面生效!

字符串变量:

$stylecolor变量常用于添加对应颜色风格样式表:<link href=“{$site_url}css/style_{$stylecolor}.css” type=“text/css” />

系统默认输出blue, 若想在调试的时候调试其他颜色风格的css,则可如下操作:

<!-- 实时预览调试代码,模板开发完成后删除 -->
<!-- {$stylecolor = 'red'} -->
<script type="text/javascript" src="http://chanpin.xm12t.com.cn/js/preview.js" data-jsonfile="index.json"></script>
<!-- 调试代码 End -->

仅需在头部加入<!– {$stylecolor = 'red'} –>,即可将当前调试风格样式改为红色版本!

数组变量:

$index.lastest是定义御index.json中的一个类型为list的变量。 将会自动输出栏目下的最新文章数据。

单个指定修改: 但是输出的数据全都是一样的,若我想修改成每条都不一样,可如下操作:

<!-- 实时预览调试代码,模板开发完成后删除 -->
<!-- {$index.lastest.data["0"].title = '大屏大法好,第四季度智能手机出货量苹果平了三星'} -->
<!-- {$index.lastest.data["0"].description = '小米迅速增长的‘黄金时期’已经结束。联想/摩托罗拉和苹果迅速提升了自己在中国及全球市场的表现,他们开始蚕食小米的市场份额。而苹果...'} -->
<!-- {$index.lastest.data["1"].title = '三菱电机推出最新MV4800线切割放电加工机床'} -->
<!-- {$index.lastest.data["1"].description = 'MV4800线切割放电加工机床是三菱电机专门为加工各种大型模具、厚板型模具推出的高精度线切割放电加工机床,适用于汽车、电子以及航空、航天等各领域的中大型精密模具的加工。'} -->
<script type="text/javascript" src="http://chanpin.xm12t.com.cn/js/preview.js" data-jsonfile="index.json"></script>
<!-- 调试代码 End -->

批量修改: 若想批量把示例的图片都更换成更漂亮的一张图,可如下操作:

<!-- 实时预览调试代码,模板开发完成后删除 -->
<!-- {foreach item=article from=$index.lastest.data}
	{$article.image = 'http://imgs.meimeinice.com/imgs/3f76a397fec366ebc312cacdf41eb513.jpg!big'}
{/foreach} -->
<script type="text/javascript" src="http://chanpin.xm12t.com.cn/js/preview.js" data-jsonfile="index.json"></script>
		<!-- 调试代码 End -->
start.txt · 最后更改: 2016/07/26 08:55 由 5067org