:::
4-4 讓sublime自動排版
4-5 引入樣板檔
- 把樣板做適當切割，可以讓程式碼清爽，甚至方便再利用。
- 可將剛剛的登入面板獨立成一個檔案：templates/side_login.tpl
一、側邊欄中引入登入畫面
- 開啟templates/index.tpl，將 side_login.tpl 引入：
<div class="col-md-3"> {include file='side_login.tpl'} </div>
二、精簡基本頁面
- 由於 <head><head>中的東西，每個頁面幾乎都一樣，所以，我們也可以將裡面的部份獨立出來成 templates/head.tpl 檔案，這樣可以讓頁面看起來更精簡：
<head> <title>{$page_title}</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--BootStrap--> <link rel="stylesheet" href="class/bootstrap/css/bootstrap.min.css"> <!--jQuery--> <script src="class/jquery.min.js"></script> <script src="class/jquery-migrate.min.js"></script> <!--jQuery UI--> <link rel="stylesheet" href="class/jquery-ui/jquery-ui.min.css"> <script src="class/jquery-ui/jquery-ui.min.js"></script> <!--Font awesome--> <link rel="stylesheet" href="class/font-awesome/css/font-awesome.min.css"> </head> - 其中<title>中改成樣板變數，以便讓每個頁面套用。
- 基本頁面部份就可以改成這樣：
<!DOCTYPE html> <html lang="zh-Hant"> {include file='head.tpl'} <body> <div class="container"> <h1 class="page-header">{$page_title}</h1> <div class="row"> <div class="col-md-9"> <h2>主內容</h2> </div> <div class="col-md-3"> <h2>Hi {$name}!</h2> {include file='side_login.tpl'} </div> </div> </div> <!--BootStrap js--> <script src="class/bootstrap/js/bootstrap.min.js"></script> </body> </html> - index.php 則多送一個 page_title 的值到樣板
<?php require_once 'smarty/libs/Smarty.class.php'; $smarty = new Smarty; $name = 'Tad'; $smarty->assign('name', $name); $smarty->assign('page_title', '活動報名系統'); $smarty->display('index.tpl');
