什么是Smarty?
Smarty是模板(html+css)引擎技术之一,可以使得“php代码” 与 “html代码” 分离的技术都称为模板引擎技术。(原来的公司的php代码使用了原生的php,网页展示是由html和php混合在一起开发的,根本不好看。后来使用thinkphp框架,才使的html和php代码分开,很清晰),除了smarty外还有其他的模板引擎技术:smarty、Template Lite、 TinyButStrong 、XTemplate 、Savant、 phemplate 、Dwoo、Sugar等。
为什么要有模板引擎技术
比如下面的代码,是php和html混合编程的例子,html代码和php混合在一起了,如果工程中出现过多这样代码非常不好,html部分应该是前端负责的部分,这样的话前端必须懂php,而且php工程师必须熟悉js,html,不利于分工合作,因为功能没有完全分离,而是紧密的联系在一起了,再有一点,html文件php语法是没有提示的,各种符号混在一起,经常容易出错。下面的两个案例php把js的工作给做了,是不合适的。
<div><?php echo "<span style='red'>".$title."</span>"; ?></div>
<td class="labels">
<!--遍历学生个性标签并展示-->
<?php
foreach($labels as $v){
//定义数组保存标签块展示颜色
$class_name = array('blue','red','yellow','green');
$index = array_rand($class_name);
echo '<span class="'.$class_name[$index].'">'.$v.'</span>';
}
?>
</td>
问题的关键是html中包含太多的php语法,可以通过事先的约定简化php变量在html的表示,然后在真正运行时候按照固定的模板将自定义的变量替换成需要的php语法就可以了。php加载html文件的顺序变成了:
php->html模板文件->模板引擎解析标签->php和html混合文件
如下是一个自己实现的微小的模板引擎。
index.php 中先用模板引擎将模板翻译成需要的html和php混编文件
$name = 'zhangsan';
$age = 10;
require '../MiniSmarty.php';
$smarty = new MiniSmarty();
$smarty->assign('name',$name);//传递变量的值和属性,用于展示
$smarty->assign('age',$age);
$smarty->translate('../view/index.html');//翻译对应的模板
require "../phtml/index.html.php";
模板引擎根据规则替换变量,并且将替换的内容保存到混编文件。
class MiniSmarty
{
private $vars;
function __construct()
{
$this->vars = array();
}
function get($varname){
return $this->vars[$varname];
}
function assign($varname = 'null',$varval = 0){
$this->vars[$varname] = $varval;
}
function translate($tp_file){
//比如 {$var} 应该翻译为 <?php echo $var >
$compf = "../phtml/".basename($tp_file).".php";
if(file_exists($compf)&&filemtime($compf)<filemtime($tp_file)) {
require $compf;
return;
}
$content = file_get_contents($tp_file);
$content = preg_replace('#{\$([a-zA-Z][a-zA-Z0-9]*)}#',"<?php echo ".'$this->vars['.'"$1"'.']'."?>",$content);
//替换完成后保存为html+php混编文件
file_put_contents($compf,$content);
require $compf;
}
}
实际应用中规则肯定很多,绝对不仅仅只有上面这些。比如引用全局变量,if,for语句等等,所以Smarty引擎可以提供强大的模板替换功能。
学习使用Smarty
** 使用的smarty版本为3.1.16
**
讲smarty的lib文件夹加入工程,打开smarty.class.php 查看模板和混编文件的目录,可以根据需求改变.
还有其他的设置,比如分隔符标记,left_delimiter,right_delimiter 分别是
{
,}
;
使用smarty后生成的混编文件可以看到,和上面自己实现替换的方式类似
<div>姓名:<?php echo $_smarty_tpl->tpl_vars['name']->value;?>
</div>
<div>年龄:<?php echo $_smarty_tpl->tpl_vars['age']->value;?>
</
自定义变量assign
自定义的变量可以直接通过assign方式同上面那样在模板中调用.
<tr><td>assign变量</td><td>{$name}</td></tr>
全局保留变量
全局变量比如_GET,_POST,_SESSION等等通过如下方式调用
$smarty.xxx.variables
<tr><td>保留变量[_GET|_POST..]</td><td>{$smarty.get.getsvar}</td></tr>
配置变量
网上有些比较简单的变量信息,美工人员可以自己调用,不需要程序员,工作比较独立,可以实现通过配置文件实现配置变量信息。默认的配置目录是configs
,所以在工程目录下建立configs
,然后建立配置文件如configs
,内容格式 变量名
=变量值
,比如:
COMPANY = 'beijing hskaoyan'
AUTHOR = 'ALL PROGRAMER'
TIME = '2017-3-10'
在模板文件首先应该引入改文件
{config_load file = "configs"}
然后采用下面方式调用
{#variable#}或者{$smarty.config.variable}
<tr><td>本地配置文件</td><td>{#COMPANY#}-{$smarty.config.AUTHOR}</td></tr>
- 实用案例:通过配置文件改变样式
遇到问题,smarty语法和style的语法冲突
- 可以通过在style的
{
,}
内部左右加空格。
2.把smarty的标记{}更改为其他的标记。
3.设置literal标记,内部内容不通过smarty解析。{literal}..{/literal}
配置文件:first、second、thrid 分别是节
[FIRST]
BC=yellow
TC=red
LH=30px
[SECOND]
BC=red
TC=yellow
LH=30px
[THRID]
BC=black
TC=yellow
LH=30px
在html可以指定配置文件的section,读取不同的内容。
{config_load file = "configs" section=$style}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div { color:{#TC#};background-color:{#BC#};line-height:{#LH#};margin: 0 auto }
</style>
</head>
<body>
<div>这是行内标签.根据不同的配置颜色不同</div>
</body>
</html>
数组遍历
1.foreach
{foreach 数组 as 下标变量 => 值变量}
{foreach 数组 as 值变量}
做具体数组遍历
{foreachelse}
数组没有任何元素信息
{/foreach}
如下:
{foreach $books as $key => $value}
<tr><td>数组循环,索引{$value@index}</td><td>{$key}{$value}</td></tr>
{foreachelse}
<tr><td>数组循环</td><td>没有元素</td></tr>
{/foreach}
foreach遍历数组内部关键字:
值变量@iteration----------> 从1开始的序号信息
值变量@index--------------> 从0开始的序号信息
值变量@first--------------> 判断第一个元素,返回boolean
值变量@last---------------> 判断最后一个元素,返回boolean
值变量@total--------------> 获得数组元素长度(个数)
值变量@show---------------> 判断当前数组是否有遍历元素出来, 返回booleansection
只遍历“索引”数组
{section name=”自定义名称” loop=”被遍历数组”}
{$数组[名称]} 获得被遍历出来的元素的值
关键字使用:
{$smarty.section.名称.iteration}
{$smarty.section.名称.index}
{$smarty.section.名称.first}
{$smarty.section.名称.last}
{/section}
分支结构
- 单路分支
{if 条件} 代码 {/if}
- 双路分支
{if 条件}{else}{/if}
- 多路分支
{if 条件}{elseif 条件}{elseif 条件}...{/if}
html标签使用距离
$smarty->assign('sexs',array(0 =>'男',1 =>'女', 2 =>'保密'));
$smarty->assign('sex_select',1);
$smarty->assign('schools',array(0 =>'请选择',1 =>'小学', 2 =>'初中',3 =>'高中',4=>'大学'));
$smarty->assign('school_select',0);
$smarty->assign('hobbys',array(0 =>'篮球',1 =>'足球', 2 =>'羽毛球'));
$smarty->assign('hobbys_selects',array(0,1));
{html_radios name="user_sex" options=$sexs selected=$sex_select}
{html_checkboxes name="user_hobbys" options=$hobbys selected=$hobbys_selects}
{html_options name="user_school" options=$schools selected=school_select}
更多可以查看手册
已有模板和smarty结合
- 模板文件引入css、js、img文件路径相对“入口程序”文件设置
-
设置css样式文件本身的图片路径路径相对css文件本身设置
通过上图可以看出来,css文件本身的图片路径必须相对于css文件本身设置。
结合具体步骤:
把模板复制到View目录,复制js、css、img静态资源文件到public指定目录,在模板文件中设置路径引入静态资源(js/css/img)文件,路径相对入口文件设置css文件本身有引入img图片,其路径相对css文件设置,在入口php文件获得变量信息用于模板显示。