:::

4-5 引入樣板檔

  1. 把樣板做適當切割,可以讓程式碼清爽,甚至方便再利用。
  2. 可將剛剛的登入面板獨立成一個檔案:templates/side_login.tpl

一、側邊欄中引入登入畫面

  1. 開啟templates/index.tpl,將 side_login.tpl 引入:
    <div class="col-md-3">
      {include file='side_login.tpl'}
    </div>
    

二、精簡基本頁面

  1. 由於 <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>
  2. 其中<title>中改成樣板變數,以便讓每個頁面套用。
  3. 基本頁面部份就可以改成這樣:
    <!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>
    
  4. 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');
    

     


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D27%26tbdsn%3D704

計數器

今天: 1489148914891489
昨天: 2198219821982198
總計: 7326347732634773263477326347732634773263477326347