XOOPS輕鬆架 - 線上書籍

:::

XOOPS快速模組開發
===========

1. 顯示單一資料的動作是 `show`，會產生以下規則： 
    1. 觀看單一投稿主題，存入的資料表是 `submission`，流程的 `$op` 值是 `submission_show`，呼叫的物件方法就是 `Submission::show()`，對應樣板則是 `op_submission_show.tpl`
    2. 觀看學生的投稿內容，存入的資料表是 `submission_data`，流程的 `$op` 值是` submission_data_show`，呼叫的物件方法就是 `Submission_data::show()`，對應樣板則是 `op_submission_data_show.tpl`
2. 因此，要修改單一投稿主題的畫面，就是去修改 `op_submission_show.tpl `樣板檔， `Submission::show()`會負責傳地方相關的變數以及 JS 或 CSS 給該樣板使用。
3. VSCode中，<kbd>Ctrl</kbd>+<kbd>P</kbd>，貼上檔名，可以快速開啟，不用找半天。
4. 單一投稿主題畫面原本的基本架構： 
    ```markup
    <h1 class="my text-center">標題</h1>
    
    <div class="text-center">
        根據身份顯示各種功能按鈕
    </div>
    
    <div class="text-center">
        顯示建立者、建立時間等相關資訊
    </div>
    
    <{if $content|default:false}>
        <div class="my-border">
            投稿說明
        </div>
    <{/if}>
    
    <div class="vtb mt-3">
    顯示內容
    </div>
    
    ```
5. 一般來說，這個樣板通常會大改。我們一一的來修改之，先修改標題部份。 
    ```markup
    <h1 class="my text-center">
        <a href="setup.php" class="text-black-50" data-bs-toggle="tooltip" title="回投稿管理列表">
        <i class="fa-solid fa-turn-up fa-rotate-270"></i>
        </a>
        <{$title}>
    </h1>
    ```
    
    
    1. 標題套用兩個樣式，一個是 `my`（在 `css/module.css` 中設定），一個是 `text-center`（BootStrap用法）
    2. 需要修改` .my` 樣式的話，可以修改 `css/module.css `此部份（改成不指定字型及位置）： 
        ```css
        h1.my,
        h2.my,
        h1>span.my,
        h2>span.my {
          padding: 6px;
          font-weight: bold;
          color: rgb(33, 51, 51);
        }
        
        h3.my,
        h4.my,
        h5.my,
        h3>span.my,
        h4>span.my,
        h5>span.my {
          padding: 6px;
          font-weight: normal;
          color: rgb(92, 41, 56);
        }
        ```
6. 接著修改顯示各種功能按鈕的工具列部份，目前是只允許有管理權限者才能看到，我們可以調整按鈕文字部份 
    ```markup
    <div class="text-center">
        <{if $smarty.session.submission_adm|default:false}>
            <a href="javascript:submission_destroy_func(<{$id}>);" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" title="刪除投稿主題"><i class="fa fa-times" aria-hidden="true"></i></a>
            <a href="<{$xoops_url}>/modules/submission/setup.php?op=submission_edit&id=<{$id}>" class="btn btn-sm btn-warning" data-bs-toggle="tooltip" title="修改投稿主題"><i class="fa fa-pencil" aria-hidden="true"></i> 修改投稿主題</a>
            <a href="<{$xoops_url}>/modules/submission/setup.php?op=submission_create" class="btn btn-sm btn-primary" data-bs-toggle="tooltip" title="建立投稿主題"><i class="fa fa-plus" aria-hidden="true"></i> 建立投稿主題</a>
        <{/if}>
    </div>
    ```
7. 如果有發布者和發布日期等欄位，就會多一個頁面的發布資訊，這部份也可以刪除或修改（順便移到工具列上方） 
    ```markup
    <div class="text-center">
        <div class="alert alert-warning d-inline-block text-center py-1 px-4 my-3 mx-auto">
            <i class="fa fa-user"></i> <{$uid_name}> 發布於 <{$create_time}>
        </div>
    </div>
    ```
8. 在頁面的發布資訊的下方，加入只有管理者可以看到的額外設定，[圖示可到此搜尋](https://fontawesome.com/search?ic=free) 
    ```markup
    <{if $smarty.session.submission_adm|default:false}>
        <div class="row justify-content-center fs-5">
            <div class="col-lg-auto"><i class="fa-solid fa-trophy"></i> 獎項：<{if $info.award|default:''}><{$info.award}><{else}>無<{/if}></div>
            <div class="col-lg-auto"><i class="fa-solid fa-lock"></i> 密碼：<{if $info.pass_code|default:''}><{$info.pass_code}><{else}>無<{/if}></div>
            <div class="col-lg-auto"><i class="fa-solid fa-children"></i> 年級：<{if $info.grade|default:''}><{'、'|implode:$info.grade}><{else}>無<{/if}></div>
        </div>
    <{/if}>
    ```
    
    
    1. `justify-content-center` 使用 flex 將 .col-\* 的內容水平置中排列，[可參考這裡](https://getbootstrap.com/docs/5.3/utilities/flex/#justify-content)
    2. `fs-5` 將文字設為5級大小（數字越大字越小，1~6，[可參考這裡](https://getbootstrap.com/docs/5.3/utilities/text/#font-size)）
    3. `<{'、'|implode:$info.grade}>` 的用法是在Smarty中使用PHP函數的用法，`implode() `是將陣列，用指定的字元串接起來，原本在PHP應該是這樣： 
        ```php
        implode('、', $info['grade']);
        ```
    4. 到了Smarty，需要將第一個參數，放到最左邊，接著用` | `來接著函數名稱，若還有第二個、第三個參數，依序用` : `隔開即可 
        ```markup
        <{'、'|implode:$info.grade}>
        ```
9. 最後修改說明欄，也可以移到工具列上方： 
    ```markup
    <div class="my-border">
        <{$content|default:''}>
        <{$files}>
    </div>
    
    ```
10. 我們順便修改一下`css/module.css `中 `.my-border `的設定，我們將寬度設在60%，加個陰影，底色改為白色： 
    ```css
    .my-border {
      padding: 12px 20px;
      border: 1px solid rgb(225, 225, 225);
      border-radius: 8px;
      background: rgb(255, 255, 255);
      box-shadow: 0px 0px 6px 1px rgba(37, 37, 37, 0.2);
      margin: 10px auto;
    }
    ```
11. 將下方的 vtb 表格刪除（投稿起訖日），改為條列式，並放到標題下方： 
    ```markup
    <div class="text-center fs-5">
        <i class="fa-solid fa-calendar-check"></i>
        <{$smarty.const._MD_SUBMISSION_START}>：<{$start}>
    </div>
    
    <div class="text-center fs-5">
        <i class="fa-solid fa-calendar-xmark"></i>
        <{$smarty.const._MD_SUBMISSION_END}>：<{$end}>
    </div>
    ```
12. 看起來就像這樣：  
     ![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/20250704090016_rjYj.png)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器