將主樣板檔拆分成小樣板

:::

3-2 建立前、後台樣板檔並套用之

3-3-1 美化頁首樣板檔 header.tpl next

用AI學PHP8

3-3 將主樣板檔拆分成小樣板

一、為什麼要拆分？

讓版面更清爽易懂
可以更彈性的依照需求引用
若是有多個主樣板，可以共用子樣板，而無須重複製作
當然，不拆也是可以的
接下來的動作先以 index.tpl 為主，admin.tpl 也比照辦理即可

二、建立檔頭樣板檔 `meta.tpl`

修改 templates/index.tpl 將整個檔頭都獨立成 templates/meta.tpl，並設定一個變數 {$webTitle}，以便傳入頁面標題：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$webTitle}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">

然後在 index.tpl 中，先用 assign 定義一個樣板變數 webTitle，並用 value 指定其值。原檔頭位置用 {include file='樣板檔'} 的方式引入 meta.tpl 樣板
```
{assign var="webTitle" value="龍崎國小校園藝文活動新聞"}
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    {include file="meta.tpl"}
</head>
```

三、建立頁首樣板檔 `header.tpl`

修改 templates/index.tpl 將整個檔頭都獨立成 templates/header.tpl，並標題改為變數 {$webTitle}：

<header class="header mb-4">
    <div class="container">
        <h1 class="text-center">{$webTitle}</h1>
    </div>
</header>

然後在 index.tpl 中，原頁首位置用 {include file='樣板檔'} 的方式引入 header.tpl 樣板

四、建立導覽列樣板檔 `nav.tpl`

將導覽列部份獨立成 templates/nav.tpl，如：

<nav class="col-md-12 mb-3">
    <ul class="nav">
        <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>
</nav>

然後在 index.tpl 中，原導覽列位置引入 nav.tpl 樣板

五、建立主內容區樣板檔 `main.tpl`

主內容區也存成 templates/main.tpl，如：

<article class="mb-4">
    ...略...
</article>

<article class="mb-4">
    ...略...
</article>

<nav aria-label="Page navigation" class="mt-4">
    <ul class="pagination justify-content-center">
        ...略...
    </ul>
</nav>

然後在 index.tpl 中，原主內容區位置引入 main.tpl 樣板

六、建立側邊欄樣板檔 `aside.tpl`

將側邊欄部份也存成 templates/aside.tpl，如：

<div class="list-group mb-4">
    <a href="#" class="list-group-item list-group-item-action">回上方神按鈕</a>
    <a href="#" class="list-group-item list-group-item-action">快速登入</a>
</div>
<div class="card mb-4">
    <div class="card-header">近期新聞</div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">2024-07-31 【南市新聞】酷暑高溫...</li>
        <li class="list-group-item">2024-07-30 【臺南新聞】大臺南...</li>
        <li class="list-group-item">2024-07-20 【活動訊息】府城歸...</li>
    </ul>
</div>

然後在 index.tpl 中，原來放置內容的位置引入 aside.tpl 樣板

七、建立頁尾樣板檔 `footer.tpl`

將側邊欄部份也存成 templates/footer.tpl

自己載入的 js 檔的部份設成變數 {$my_js}，因為前後台需載入不同的 js 檔，如：

<footer class="bg-light mt-4 py-3">
    <div class="container text-center">
        <p>系統設計：網你設計，電話：(06) xxxxxxxx (服務時間)</p>
        <p>Copyright © 2011 臺南市政府教育局資訊中心 All Rights Reserved.</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{$my_js}"></script>

然後在 index.tpl 中，原來放置內容的位置引入 footer.tpl 樣板

八、建立發布新聞的樣板檔 `create.tpl`

編輯 templates/admin.tpl 我們先將發布表單也拆分出來，將標題和表單的部份獨立存為 templates/create.tpl

<h2 class="my-4">文章編輯表單</h2>
<form action="admin.php" method="POST" enctype="multipart/form-data">
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="news_title" name="news_title" placeholder="新聞標題" required>
        <label for="news_title">新聞標題</label>
    </div>
    <div class="form-floating mb-3">
        <textarea class="form-control" id="news_content" name="news_content" placeholder="新聞內容" style="height: 100px" required></textarea>
        <label for="news_content">新聞內容</label>
    </div>
    <div class="form-floating mb-3">
        <input type="url" class="form-control" id="related_link" name="related_link" placeholder="相關連結">
        <label for="related_link">相關連結</label>
    </div>
    <div class="row mb-3">
        <div class="col-md-4">
            <div class="form-floating">
                <input type="text" class="form-control" id="publisher" name="publisher" placeholder="發布者" required>
                <label for="publisher">發布者</label>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-floating">
                <input type="text" class="form-control" id="school_name" name="school_name" placeholder="學校名稱" required>
                <label for="school_name">學校名稱</label>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-floating">
                <input type="date" class="form-control" id="report_date" name="report_date" placeholder="報導日期" required>
                <label for="report_date">報導日期</label>
            </div>
        </div>
    </div>
    <div class="form-floating mb-3">
        <select class="form-select" id="upload_type" name="upload_type">
            <option value="image" selected>上傳圖片</option>
            <option value="youtube">Youtube影片連結</option>
        </select>
        <label for="upload_type">上傳種類</label>
    </div>
    <div class="mb-3" id="image_upload">
        <label for="image_file" class="form-label">上傳圖片 (僅限jpg及png)</label>
        <input type="file" class="form-control" id="image_files" name="image_files[]" accept=".jpg,.png" multiple>
    </div>
    <div class="form-floating mb-3" id="youtube_link" style="display: none;">
        <input type="url" class="form-control" id="youtube_url" name="youtube_url" placeholder="Youtube影片網址">
        <label for="youtube_url">Youtube影片網址</label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

九、最後的主樣板檔 `index.tpl`

最後 index.tpl 整個看起來像這樣，是不是清爽多了？

{assign var="webTitle" value="龍崎國小校園藝文活動新聞"}
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    {include file="meta.tpl"}
</head>
<body>
    {include file="header.tpl"}

    <div class="container">
        <div class="row">
            {include file="nav.tpl"}
        </div>

        <div class="row">
            <main class="col-md-9">
                {include file="main.tpl"}
            </main>

            <aside class="col-md-3">
                {include file="aside.tpl"}
            </aside>
        </div>
    </div>

    {include file="footer.tpl" my_js="index.js"}
</body>
</html>

admin.tpl 大致一樣，只有主內容和自己載入的 js 檔的部份不一樣

{assign var="webTitle" value="龍崎國小校園藝文活動新聞"}
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    {include file="meta.tpl"}
</head>
<body>
    {include file="header.tpl"}

    <div class="container">
        <div class="row">
            {include file="nav.tpl"}
        </div>

        <div class="row">
            <main class="col-md-9">
                {include file="create.tpl"}
            </main>

            <aside class="col-md-3">
                {include file="aside.tpl"}
            </aside>
        </div>
    </div>

    {include file="footer.tpl" my_js="admin.js"}
</body>
</html>