3-3-3 統一主內容樣式 main.tpl

1. 我們希望所有的文章都用同一個格式，這樣日後比較好維護：
   1. 只有第一篇文章有滑動圖，但無左邊縮圖，文章完整顯示
   2. 其餘文章沒有滑動圖，但有左邊縮圖，文章僅顯示摘要（或固定字數）

一、修改主要文章部份

1. 我們先將滑動圖也拆分出來成為templates/slider.tpl，並順便將container-fluid改為alert-info以加上個藍色外框

   <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">
                   <!-- 縮圖將通過 JavaScript 動態添加 -->
               </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. 將滑動圖移到標題上方，主要文章的部份看起來像這樣：

   <article class="mb-4">
       {include file="slider.tpl"}
       <h2>犀牛上顎與白堊化石有看頭</h2>
       <p>2024-06-29記者某某/台南報導 石膏化石展區「台灣古生物剪影區」特展二十九日收攤囉喔，由國立工業生產中心的「犀牛上顎頭骨標本」...[內容省略]</p>
   </article>

    

二、次要文章部份

1. 次要文章有縮圖，縮圖希望在左邊，文字摘要在右邊，因此，我們手動改一下：

   <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. 接著合併之，並將原來的內容都改成變數：

   <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提示詞：

   請生成一段使用Bootstrap 5的HTML原始碼，包含一個分成左右兩欄的資訊列，比例約為10:2。左邊欄位顯示「2024-07-22 @ XX國中 已有 2828 次點閱」，底色為淺色背景並有內邊距(padding)；右邊欄位顯示「XXX 報導」，底色為深色背景半透明，文字為白色並置中對齊，且有內邊距。兩欄之間無間隙，並且整個資訊列上下有些許間距。

    

2. 標題下方加入資訊列，並將完成的文章樣板獨立存成 templates/article.tpl：

   <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} 引入文章樣板檔，然後給予參數值即可：

   {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>