:::

5-2 將主樣板檔拆分成小樣板

一、為什麼要拆分?

  1. 讓版面更清爽易懂
  2. 可以更彈性的依照需求引用
  3. 當然,不拆也是可以的

二、建立檔頭樣板檔

  1. 將整個檔頭都獨立成 templates/index_head.tpl,並設定一個變數 {$web_title},以便傳入頁面標題:
    <head>
      <title>{$web_title}</title>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
      <!-- Bootstrap CSS v5.3.1 -->
      <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    
    </head>
  2. 然後在 index.tpl 中,原檔頭位置用 {include file='樣板檔' web_title="XXX"} 的方式引入 index_head.tpl 樣板(可參考:https://www.smarty.net/docs/zh_CN/language.function.include.tpl
    <!DOCTYPE html>
    <html lang="en">
      {include file="index_head.tpl" web_title="校園日誌"}
    
      <body>

     

三、建立導覽列樣板檔

  1. 將導覽列部份獨立成 templates/index_nav.tpl,如:
    <nav class="navbar navbar-expand-md navbar-dark bg-info mb-5">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">XX國小學校日誌</a>
            <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
                <ul class="navbar-nav me-auto mt-2 mt-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">校園日誌</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">榮譽榜</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">媒體新聞</a>
                    </li>
                </ul>
                <form class="d-flex my-2 my-lg-0">
                    <input class="form-control me-sm-2" type="text" placeholder="搜尋文章">
                    <button class="btn btn-warning my-2 my-sm-0 text-nowrap" type="submit">搜尋</button>
                </form>
            </div>
        </div>
    </nav>

     

  2. 然後在 index.tpl 中,原導覽列位置引入 index_nav.tpl 樣板
    {include file="index_head.tpl" web_title="校園日誌"}
    
    <body>
      <header>
        <!-- 導覽列 -->
        {include file="index_nav.tpl"}
      </header>

四、建立側邊欄樣板檔

  1. 側邊欄也存成 templates/index_side.tpl,如:
    <ul class="list-group">
        <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active">
            2023
            <span class="badge bg-success badge-pill">98</span>
        </li>
        <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            2022
            <span class="badge bg-success badge-pill">3623</span>
        </li>
        <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            2021
            <span class="badge bg-success badge-pill">3567</span>
        </li>
    </ul>

     

  2. 然後在 index.tpl 中,原側邊欄位置引入 index_side.tpl 樣板
            <div class="col-md-3">
              <!-- 側邊欄 -->
              {include file="index_side.tpl"}
            </div>
          </div>
        </div>
      </main>
      <footer>
        <!-- place footer here -->
      </footer>
      <!-- Bootstrap JavaScript Libraries -->
      <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    
    </html>

     

五、建立文章列表樣板檔

  1. 將文章列表部份也存成 templates/index_content.tpl,如:
    <div class="row">
        <div class="col-md-9">
            <h3><a href="#">資訊組Line服務上線</a></h3>
            <p>撰稿、拍照:陳老師</p>
            <p>2023-06-30 點閱數:4</p>
            <p>隨著科技發展,Line已成為大家手機裡的必備軟體。為了提供更高效、便捷的校園服務,六月三十日,資訊組推出Line官方帳號,除了可以自動回覆問題外,還能提供最新公告與資訊。是不是常在學校網頁裡迷失方向,找不到想要的資訊?官方帳號將學生常面臨問題設置在精選,更方便獲取所需資訊,快速解決疑問,打造超高...
            </p>
        </div>
        <div class="col-md-3">
            <img src="https://blog.tcust.edu.tw/uploads/20230711/2b5498cf-a3d7-90ed-57aa-0048afb0bbaa.png" alt=""
                class="img-thumbnail" style="object-fit: cover; width: 100%; height: 200px;">
        </div>
    </div>

     

  2. 然後在 index.tpl 中,原來放置內容的位置引入 index_content.tpl 樣板,最後整個看起來像這樣,是不是清爽多了?
    <!doctype html>
    <html lang="en">
    
    {include file="index_head.tpl" web_title="校園日誌"}
    
    <body>
      <header>
        <!-- 導覽列 -->
        {include file="index_nav.tpl"}
      </header>
      <main>
        <div class="container">
          <h3>所有文章</h3>
          <div class="row">
            <div class="col-md-9">
              <!-- 主內容 -->
              {include file="index_content.tpl"}
            </div>
            <div class="col-md-3">
              <!-- 側邊欄 -->
              {include file="index_side.tpl"}
            </div>
          </div>
        </div>
      </main>
      <footer>
        <!-- place footer here -->
      </footer>
      <!-- Bootstrap JavaScript Libraries -->
      <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    
    </html>
  3. 最後重新整理一下畫面,至此,只要畫面沒有變化就是正確的!

:::

書籍目錄

展開 | 闔起

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

計數器

今天: 1453145314531453
昨天: 1416141614161416
總計: 7340100734010073401007340100734010073401007340100