首先咱們必須知道使用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
<!--定界符 和 css衝突 的解決方案--->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}<!-----------------------------今天的內容就到這裏了,後續會繼續補充,盡請期待!