模板引擎（smarty）知識點總結

時間 2019-11-30 標籤模板引擎 smarty 知識總結

   首先咱們必須知道使用smarty的流程
   一、引入
   二、實例化
   三、配置模板目錄編譯目錄 3.0版本支持不存在的目錄則新建
   四、賦值
   五、編譯顯示某個模板文件（暗示須要哪一個文件）javascript

案例1：php

 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代碼:css

 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的同窗能夠借鑑下。html

java

一、關聯數組：引用方式：$數組名.key
二、索引數組：引用方式：$數組名.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代碼ui

     <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的循環的時候就能夠將數組元素調用的知識結合起來了this

spa

一、修改標記 $smarty->delimiter 而後在模板文件裏使用新的定界符
二、在模板文件裏使用 {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}<!-----------------------------今天的內容就到這裏了，後續會繼續補充，盡請期待！