:::

6-2 將主樣板檔依功能或結構拆分

一、為什麼要拆分?

  1. 因為樣板檔可能會有很多個,但其中有很多部份都可能是一樣的,例如導覽列、標題...等等
  2. 因此,我們可以把相同的部份拆分出來,如此,在不同樣板檔可以彈性引用。

二、建立檔頭樣板檔

  1. 將檔頭<head>中,除了<title>外的部份都獨立成 templates/head.tpl,如(若是要做成多樣板,方便修改title):
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 載入 BootStrap5 樣式檔-->
    <link href="{$url}/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <!-- 載入自訂樣式檔 -->
    <link href="{$url}/css/style.css" rel="stylesheet" />
    <!-- 載入 BootStrap5 JS檔 -->
    <script src="{$url}/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 載入 fortawesome 樣式檔-->
    <link href="{$url}/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
    1. 順便加上註解,方便日後自己理解
    2. 網址利用剛剛送到樣板檔的 {$url} 也就是本站網址,將引入的檔案用絕對路徑,如此,以後不管在前後台或其他目錄都不會出問題。
       
  2. 然後在 index.tpl 中,原檔頭位置用{include file='樣板檔'}的方式引入 head.tpl 樣板(可參考:https://www.smarty.net/docs/zh_CN/language.function.include.tpl
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>校園日誌</title>
        {include file='head.tpl'}    
      </head>

     

三、建立導覽列樣板檔

  1. 將導覽列部份獨立成 templates/nav.tpl,如:
    <nav class="navbar navbar-expand-lg navbar-dark bg-my-blue mb-5">
      <div class="container">
        <!-- 導覽列Logo -->
        <a class="navbar-brand" href="index.html">
          <h2>校園日誌</h2>
        </a>
        <!-- ...略... -->
      </div>
    </nav>
    

     

  2. 然後在 index.tpl 中,原導覽列位置引入 nav.tpl 樣板
      <body>
        <!-- 導覽列 -->
        {include file='nav.tpl'}
        <!-- 主畫面 -->
        <div class="container">

四、建立側邊欄樣板檔

  1. 側邊欄也存成 templates/aside.tpl,如:
    <div class="list-group">
      <a
        href="#"
        class="list-group-item list-group-item-action active d-flex justify-content-between align-items-center"
        aria-current="true"
      >
        2021
        <span class="badge bg-success rounded-pill">1</span>
      </a>
      <!-- 略 -->
    </div>
    

     

  2. 然後在 index.tpl 中,原側邊欄位置引入 aside.tpl 樣板
            <!-- 側邊欄 -->
            <div class="col-md-3">
              {include file='aside.tpl'}
            </div>
          </div>
        </div>
      </body>
    </html>
    

     

五、建立文章列表樣板檔

  1. 將文章列表部份也存成 templates/news.tpl,如:
    <div class="card mb-3">
      <div class="row g-0">
        <div class="col-md-8">
          <!-- 略 -->
        </div>
        <div class="col-md-4">
          <!-- 略 -->
        </div>
      </div>
    </div>
    

     

  2. 然後在 index.tpl 中,原來放置卡片的位置引入 news.tpl 樣板,最後整個看起來像這樣:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>校園日誌</title>
        {include file='head.tpl'}
      </head>
      <body>
        <!-- 導覽列 -->
        {include file='nav.tpl'}
        <!-- 主畫面 -->
        <div class="container">
          <div class="row">
            <!-- 主內容區 -->
            <div class="col-md-9">
              {include file='news.tpl'}
            </div>
            <!-- 側邊欄 -->
            <div class="col-md-3">
              {include file='aside.tpl'}
            </div>
          </div>
        </div>
      </body>
    </html>
    
  3. 最後重新整理一下畫面,至此,只要畫面沒有變化就是正確的!

:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1805

計數器

今天: 4360436043604360
昨天: 5069506950695069
總計: 5134808513480851348085134808513480851348085134808