XOOPS輕鬆架 - 線上書籍

:::

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

1. 我們希望所有的文章都用同一個格式，這樣日後比較好維護：![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/55/main.png)
    1. 只有第一篇文章有滑動圖，但無左邊縮圖，文章完整顯示
    2. 其餘文章沒有滑動圖，但有左邊縮圖，文章僅顯示摘要（或固定字數）
 
### 一、修改主要文章部份

1. 我們先將滑動圖也拆分出來成為`templates/slider.tpl`，並順便將`container-fluid`改為`alert-info`以加上個藍色外框 
    ```markup
    <div class="alert alert-info">
        <div class="row">
            <div class="col-md-3 order-md-1 order-2 mb-3 mb-md-0">
                <div class="thumbnail-container" id="thumbnailContainer">
                    
                </div>
            </div>
            <div class="col-md-9 order-md-2 order-1">
                <img id="mainImage" src="https://fakeimg.pl/800x600/cccccc/909090?text=Image+1" alt="主圖片">
            </div>
        </div>
    </div>
    ```
2. 將滑動圖移到標題上方，主要文章的部份看起來像這樣： 
    ```markup
    <article class="mb-4">
        {include file="slider.tpl"}
        <h2>犀牛上顎與白堊化石有看頭</h2>
        <p>2024-06-29記者某某/台南報導 石膏化石展區「台灣古生物剪影區」特展二十九日收攤囉喔，由國立工業生產中心的「犀牛上顎頭骨標本」...[內容省略]</p>
    </article>
    ```
 
### 二、次要文章部份

1. 次要文章有縮圖，縮圖希望在左邊，文字摘要在右邊，因此，我們手動改一下： 
    ```markup
    <article class="mb-4">
        <h2>跨越國界的音樂情緣-橋中管樂團與日本開智未來高校吹奏部攜手野球應援</h2>
        <div class="row">
            <div class="col-md-4 mb-3">
                <img src="https://fakeimg.pl/800x400/cccccc/909090?text=Orchestra+Image" class="img-fluid mb-3" alt="管樂團圖片">
            </div>
            <div class="col-md-8 mb-3">
                <p>光武國小體育館內發出悠揚音樂，只見指揮在台前揮灑，音樂優雅且意味深長...[內容省略]</p>
            </div>
        </div>
    </article>
    ```
 
### 三、將主、次要文章併成同一個樣板

1. 接著合併之，並將原來的內容都改成變數： 
    ```markup
    <article class="my-5">
        {if $slider}
            {include file="slider.tpl"}
        {/if}
    
        <h2>{$title}</h2>
        <div class="row">
            {if $thumb}
                <div class="col-md-4 mb-3">
                    <img src="{$thumb}" class="img-fluid" alt="{$title}圖片">
                </div>
                <div class="col-md-8 mb-3">
                    {$content}
                </div>
            {else}
                <div class="col-md-12 mb-3">
                    {$content}
                </div>
            {/if}
        </div>
    </article>
    
    ```
 
### 四、加上資訊列

1. 資訊列其實挺好做，若不熟也可以請AI幫忙，AI提示詞： 
    ```markup
    請生成一段使用Bootstrap 5的HTML原始碼，包含一個分成左右兩欄的資訊列，比例約為10:2。左邊欄位顯示「2024-07-22 @ XX國中 已有 2828 次點閱」，底色為淺色背景並有內邊距(padding)；右邊欄位顯示「XXX 報導」，底色為深色背景半透明，文字為白色並置中對齊，且有內邊距。兩欄之間無間隙，並且整個資訊列上下有些許間距。
    ```
2. 標題下方加入資訊列，並將完成的文章樣板獨立存成 `templates/article.tpl`： 
    ```markup
    <article class="my-4">
        {if $slider}
            {include file="slider.tpl"}
        {/if}
    
        <h2>{$title}</h2>
        <div class="row g-0 my-2">
            <div class="col-10 bg-light p-2">
                {$date} @ {$school} 已有 {$count} 次點閱
            </div>
            <div class="col-2 bg-dark bg-opacity-50 p-2 text-white text-center">
                {$author} 報導
            </div>
        </div>
    
        <div class="row">
            {if $thumb}
                <div class="col-md-4 mb-3">
                    <img src="{$thumb}" class="img-fluid" alt="{$title}圖片">
                </div>
                <div class="col-md-8 mb-3">
                    {$content}
                </div>
            {else}
                <div class="col-md-12 mb-3">
                    {$content}
                </div>
            {/if}
        </div>
    </article>
    
    ```
3. 在` main.tpl` 中，若要產生文章，則用 `{include} `引入文章樣板檔，然後給予參數值即可： 
    ```markup
    {include file="article.tpl" slider=true title="最新消息" date="2024-08-06" school="龍崎國小" count=88168 author="吳弘凱" content="<p>文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。</p>
    <p>文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。</p>" link="" thumb=""}
    
    {include file="article.tpl" slider=false title="最新消息" date="2024-08-06" school="龍崎國小" count=88168 author="吳弘凱" content="<p>文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。</p>
    <p>文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。</p>" link="" thumb="https://fakeimg.pl/400x300/cccccc/909090?text=Image+1"}
    
    {include file="article.tpl" slider=false title="最新消息" date="2024-08-06" school="龍崎國小" count=88168 author="吳弘凱" content="<p>文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。</p>
    <p>文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容，文章完整內容。</p>" link="" thumb="https://fakeimg.pl/400x300/cccccc/909090?text=Image+2"}
    
    
    <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
            <li class="page-item"><a class="page-link" href="#">«</a></li>
            <li class="page-item active"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>
            <li class="page-item"><a class="page-link" href="#">»</a></li>
        </ul>
    </nav>
    ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器