:::
5-1 建立主樣板檔 index.tpl 並套用之
5-2 將主樣板檔拆分成小樣板
一、為什麼要拆分？
- 讓版面更清爽易懂
- 可以更彈性的依照需求引用
- 當然，不拆也是可以的
二、建立檔頭樣板檔
- 將整個檔頭都獨立成
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> - 然後在
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>
三、建立導覽列樣板檔
- 將導覽列部份獨立成
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> - 然後在
index.tpl中，原導覽列位置引入index_nav.tpl樣板{include file="index_head.tpl" web_title="校園日誌"} <body> <header> <!-- 導覽列 --> {include file="index_nav.tpl"} </header>
四、建立側邊欄樣板檔
- 側邊欄也存成
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> - 然後在
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>
五、建立文章列表樣板檔
- 將文章列表部份也存成
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> - 然後在
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> - 最後重新整理一下畫面，至此，只要畫面沒有變化就是正確的！
