模板引擎（smarty）知识点总结

   首先我们必须知道使用smarty的流程
   1、引入
   2、实例化
   3、配置模板目录编译目录 3.0版本支持不存在的目录则新建
   4、赋值
   5、编译显示某个模板文件（暗示需要哪个文件）

案例1：

 1 include('./lib/Smarty.class.php');$smarty = new Smarty();
 2 
 3 　　　　$smart->template_dir = './tmp';//设置模板文件目录
 4 
 5 　　　　$smarty->compile_dir = './comp';//设置编译文件目录
 6 
 7 　　　　$content = 'smarty学习的第一个小案例';
 8 
 9 　　　　$smarty->assign('content',$content);////一般而言，assign参数一与参数二对应  参数一的名就是参数二$参数一的名  当然不这样也行 参数二也可以不用变量  参数一与模板的变量对应[这就是大家常
说的模板渲染值，供html等使用]
10 
11            $smarty->display('./tmp/tmp01.html');

html代码:

 1 <!doctype html>
 2 <html>
 3    <head>
 4       <meta charset="utf-8"/>
 5       <title>案例1</title>
 6    </head>
 7     <body>
 8         <pre>{$content}</pre>
 9      </body>
10 </html>

该案列很好说明smarty的使用的流程，初学smarty的同学可以借鉴下。

1、关联数组：引用方式：$数组名.key
2、索引数组：引用方式：$数组名.key 或者 $数组名[index]

案列2:

 1 <?php
 2   require_once './lib/Smarty.class.php';
 3   $smt = new Smarty();
 4   $smt->template_dir = './tmp';
 5   $smt->compile_dir = './comp';
 6   $arr1 = array('周一','周二','周三');
 7   $arr2 = array('id'=>1,'name'=>'告白气球','author'=>'周杰伦');
 8   $smt->assign('arr1',$arr1);
 9   $smt->assign('arr2',$arr2);
10   $smt->display('./tmp/tmp02.html');

html代码

     <table  border='1' cellspacing='0' cellpadding='0' style='text-align:center'>
        <tbody>
            <tr>
                <td valign='top' >星期一</td>
                <td valign='top' style='color:#f69'>{$arr1[0]}</td>
            </tr>
            <tr>
                <td valign='top'>星期二</td>
                <td valign='top'style='color:#f69'>{$arr1[1]}</td>
            </tr>
            <tr>
                <td valign='top'>星期三</td>
                <td valign='top'>{$arr1[2]}</td>
            </tr>
        </tbody>
    </table>
    <hr/>
     <table  border='1' cellspacing='0' cellpadding='0' style='text-align:center'>
        <tbody>
            <tr>
                <td valign='top' >ID</td>
                <td valign='top' style='color:#f69'>{$arr2.id}</td>
            </tr>
            <tr>
                <td valign='top'>歌名</td>
                <td valign='top'style='color:#f69'>{$arr2.name}</td>
            </tr>
            <tr>
                <td valign='top'>作者</td>
                <td valign='top'>{$arr2.author}</td>
            </tr>
        </tbody>
    </table>
    <hr/>
     <table  border='1' cellspacing='0' cellpadding='0' style='text-align:center'>
        <tbody>
            <tr>
                <td valign='top' >周一</td>
                <td valign='top' style='color:#f69'>{$arr1.0}</td>
            </tr>
            <tr>
                <td valign='top'>周二</td>
                <td valign='top'style='color:#f69'>{$arr1.1}</td>
            </tr>
            <tr>
                <td valign='top'>周三</td>
                <td valign='top'>{$arr1.2}</td>
            </tr>
        </tbody>
    </table>

案列2很好的说明数组的使用，那么当我们了解到了smarty的循环的时候就可以将数组元素调用的知识结合起来了

1、修改标记 $smarty->delimiter 然后在模板文件里使用新的定界符
2、在模板文件里使用 {literal}{/literal}标记非替换的

先说说冲突的所在：smarty默认的定界符是'{','}' html中 css样式的写法是:*{font-size:1rem;} 通过观察不难发现css与smarty的定界符冲突了，这样会导致css样式也被编译解析了，因此就必须解决这个问题

案例3

  require_once('./libs/Smarty.class.php');
  $smarty = new Smarty();
  $smarty->template_dir = './tmp';
  $smarty->compile_dir = './comp';
  $like1 = array('name'=>'冯**','jd'=>'初一到初二','element'=>'前后同桌，默默暗恋她,感觉很奇妙，那个时候很开心');
  $like3 = array('李**','高一','文科班的同学，前后同桌过，类型很嗨，很好玩，也是暗恋她，还在情*节送她礼物，被她以要是有我朋友的身高就在一起的理由拒绝了');
 // 修改定界符 $smarty->delimiter
  $smarty->left_delimiter = '{<';
  $smarty->right_delimiter = '>}';
  $smarty->assign('name',$like1['name']);
  $smarty->assign('jd',$like1['jd']);
  $smarty->assign('element',$like1['element']);
  $smarty->assign('like3',$like3);
  $smarty->display('./temp/tmp03.html');

html代码

<!DOCTYPE HTML>
<html>
 <head>
  <title> 案例3 </title>
  <meta charset="utf-8"/>
  <script type='text/javascript'>
    window.onload=function(){
        var tables = document.getElementsByTagName('table');
            for(var i=0;i<tables.length;i++){
               tables[i].onmouseover=function(){
                //alert(this.border);
                this.style.backgroundColor = 'yellow';
               }
            }
        }
  </script>
  <style>
   /*
    这样带分隔符的样式写法   3.0会自动处理掉
    但是不换行的  系统处理不了
    table{
        background-color:#666;
   }
   */
 table{background-color:#666;}
  </style>
 </head>

 <body>
     <table  border='1' cellspacing='0' cellpadding='0' style='text-align:center'>
        <tbody>
            <tr>
                <td valign='top' >名字</td>
                <td valign='top' style='color:#f69'>{<$name>}</td>
            </tr>
            <tr>
                <td valign='top'>阶段</td>
                <td valign='top'style='color:#f69'>{<$jd>}</td>
            </tr>
            <tr>
                <td valign='top'>发生的事</td>
                <td valign='top'><textarea rows='4' cols='10' readonly='readonly'>{<$element>}</textarea></td>
            </tr>
        </tbody>
    </table>
    <hr/>
     <table  border='1' cellspacing='0' cellpadding='0' style='text-align:center'>
        <tbody>
            <tr>
                <td valign='top' >名字</td>
                <td valign='top' style='color:#f69'>{<$like3[0]>}</td>
            </tr>
            <tr>
                <td valign='top'>阶段</td>
                <td valign='top'style='color:#f69'>{<$like3[1]>}</td>
            </tr>
            <tr>
                <td valign='top'>发生的事</td>
                <td valign='top'><textarea rows='4' cols='10' readonly='readonly'>{<$like3[2]>}</textarea></td>
            </tr>
        </tbody>
    </table>
 </body>
</html>

<!-------------------------------------------------------------------->
{literal){/literal}
在css样式里加入table{literal}{background-color:#666;}{/literal}







<!-----------------------------今天的内容就到这里了，后续会继续补充，尽请期待！

posted @ 2016-11-30 22:52 yangboom 阅读(2614) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

yangboom

星星轨迹 * 存在即合理

模板引擎（smarty）知识点总结

公告