zoukankan      html  css  js  c++  java
  • 模板引擎(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的循环的时候就可以将数组元素调用的知识结合起来了

    <!--定界符 和 css冲突  的解决方案--->

       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}







    <!-----------------------------今天的内容就到这里了,后续会继续补充,尽请期待!
  • 相关阅读:
    @RestController
    spring-boot入门环境
    spring事务管理
    Spring和hibernate框架整合
    python的for循环及数组
    PreparedStatement防止SQL注入
    python入门
    maven 依赖规则&版本锁定
    使用eclipse创建一个简单的maven项目
    maven常用命令 (1)
  • 原文地址:https://www.cnblogs.com/YangJieCheng/p/6120088.html
Copyright © 2011-2022 走看看