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

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

案例1：

 include('./lib/Smarty.class.php');$smarty = new Smarty();

 　　　　$smart->template_dir = './tmp';//设置模板文件目录

 　　　　$smarty->compile_dir = './comp';//设置编译文件目录

 　　　　$content = 'smarty学习的第一个小案例';

 　　　　$smarty->assign('content',$content);////一般而言，assign参数一与参数二对应  参数一的名就是参数二$参数一的名  当然不这样也行 参数二也可以不用变量  参数一与模板的变量对应[这就是大家常
说的模板渲染值，供html等使用]

            $smarty->display('./tmp/tmp01.html');

html代码:

 <!doctype html>

 <html>

    <head>

       <meta charset="utf-8"/>

       <title>案例1</title>

    </head>

     <body>

         <pre>{$content}</pre>

      </body>

 </html>

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

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

案列2:

 <?php

   require_once './lib/Smarty.class.php';

   $smt = new Smarty();

   $smt->template_dir = './tmp';

   $smt->compile_dir = './comp';

   $arr1 = array('周一','周二','周三');

   $arr2 = array('id'=>1,'name'=>'告白气球','author'=>'周杰伦');

   $smt->assign('arr1',$arr1);

   $smt->assign('arr2',$arr2);

   $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}

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