XOOPS輕鬆架 - 線上書籍

:::

用AI學PHP8
========

### 一、為什麼要拆分？

1. 讓版面更清爽易懂
2. 可以更彈性的依照需求引用
3. 若是有多個主樣板，可以共用子樣板，而無須重複製作
4. <span style="color:#c0392b;">當然，不拆也是可以的</span>
5. 接下來的動作先以 `index.tpl` 為主，`admin.tpl` 也比照辦理即可
 
### 二、建立檔頭樣板檔 `meta.tpl`

1. 修改 `templates/index.tpl` 將整個檔頭都獨立成 `templates/meta.tpl`，並設定一個變數 `{$webTitle}`，以便傳入頁面標題： 
    ```markup
    <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">
    ```
2. 然後在 `index.tpl `中，先用 `assign` 定義一個樣板變數` webTitle`，並用 `value `指定其值。原檔頭位置用 `{include file='樣板檔'} `的方式引入 `meta.tpl `樣板 
    ```markup
    {assign var="webTitle" value="龍崎國小校園藝文活動新聞"}
    
    <html lang="zh-Hant">
    <head>
        {include file="meta.tpl"}
    </head>
    ```
 
### 三、建立頁首樣板檔 `header.tpl`

1. <span id="cke_bm_2075S" style="display: none;"> </span>修改 `templates/index.tpl` 將整個檔頭都獨立成 `templates/header.tpl`，並標題改為變數 `{$webTitle}`： 
    ```markup
    <header class="header mb-4">
        <div class="container">
            <h1 class="text-center">{$webTitle}</h1>
        </div>
    </header>
    ```
2. 然後在 `index.tpl `中，原頁首位置用 `{include file='樣板檔'} `的方式引入 `header.tpl `樣板
 
### 四、建立導覽列樣板檔 `nav.tpl`

1. 將導覽列部份獨立成 `templates/nav.tpl`，如： 
    ```markup
    <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>
    ```
2. 然後在 `index.tpl `中，原導覽列位置引入 `nav.tpl `樣板
 
### 五、建立主內容區樣板檔` main.tpl`

1. 主內容區也存成` templates/main.tpl`，如： 
    ```markup
    <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>
    ```
2. 然後在 `index.tpl` 中，原主內容區位置引入 `main.tpl` 樣板
 
### 六、建立側邊欄樣板檔` aside.tpl`

1. 將側邊欄部份也存成` templates/aside.tpl`，如： 
    ```markup
    <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>
    ```
2. 然後在 `index.tpl` 中，原來放置內容的位置引入 `aside.tpl` 樣板
 
### 七、建立頁尾樣板檔` footer.tpl`

1. 將側邊欄部份也存成` templates/footer.tpl`
2. 自己載入的 js 檔的部份設成變數` {$my_js}`，因為前後台需載入不同的 js 檔，如： 
    ```markup
    <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>
    ```
3. 然後在 `index.tpl` 中，原來放置內容的位置引入 `footer.tpl` 樣板
 
### 八、建立發布新聞的樣板檔 `create.tpl<span id="cke_bm_131S" style="display: none;"> </span> <span id="cke_bm_277S" style="display: none;"> </span>`

1. 編輯 `templates/admin.tpl `我們先將發布表單也拆分出來，將標題和表單的部份獨立存為 `templates/create.tpl`
    
     
    ```markup
    <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>

新聞內容

相關連結

發布者

學校名稱

報導日期

上傳種類

上傳圖片 (僅限jpg及png)

Youtube影片網址

``` ### 九、最後的主樣板檔` index.tpl` 1. 最後 `index.tpl` 整個看起來像這樣，是不是清爽多了？ ```markup {assign var="webTitle" value="龍崎國小校園藝文活動新聞"} {include file="meta.tpl"} {include file="header.tpl"}

{include file="nav.tpl"}

{include file="main.tpl"}

{include file="footer.tpl" my_js="index.js"} ``` 2. `admin.tpl `大致一樣，只有主內容和自己載入的 js 檔的部份不一樣 ```markup {assign var="webTitle" value="龍崎國小校園藝文活動新聞"} {include file="meta.tpl"} {include file="header.tpl"}

{include file="nav.tpl"}

{include file="create.tpl"}

{include file="footer.tpl" my_js="admin.js"} ``` 3. 最後重新整理一下畫面，至此，只要畫面沒有變化就是正確的！

:::

書籍目錄

展開 | 闔起

快速登入

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1999

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器