:::

6-3-3 讓樣板檔接收二維陣列

  1. news.tpl裡面目前其實只有一個卡片,但實際上,我們會有好幾篇文章,所以,我們先將卡片部份內容再獨立存成 card.tpl
    <div
      class="card mb-3 border border-5 border-bottom-0 border-start-0 border-end-0 py-4"
    >
      ...略...
    </div>
    

     

  2. 接著再將news.tpl改一下,先將二維陣列 $all_news foreach 迴圈一筆一筆抽出,抽出後的 $news 就是一維陣列,也就是一筆文章資料
    <!-- 依序取出每篇文章 -->
    {foreach $all_news as $news}
      {include file='card.tpl'}
    {/foreach}
    

     

  3. 此時,改寫 card.tpl 的內容,將所有要呈現的部份都改成{$陣列.索引}
    <div
      class="card mb-3 border border-5 border-bottom-0 border-start-0 border-end-0 py-4"
    >
      <div class="row g-0">
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">
              <a href="{$url}/index.php?op=show&id={$news.id}">{$news.title}</a>
            </h5>
            <p class="card-text">
              <small>{$news.info} </small>
            </p>
            <p class="card-text">
              <small class="text-muted">
                {$news.date} <i class="far fa-eye"></i> {$news.counter}
              </small>
            </p>
            <p class="card-text">{$news.content}</p>
          </div>
        </div>
        <div class="col-md-4">
          <a href="{$url}/index.php?op=show&id={$news.id}">
            {if $news.files}
                <img
                  src="{$url}/uploads/{$news.id}/thumbs/{$news.files|reset}"
                  alt="{$news.title}"
                  class="img-fluid img-thumbnail"
                />
            {else}
              <img src="{$url}/images/none.png" alt="無圖檔" class="img-fluid img-thumbnail" />
            {/if}
          </a>
        </div>
      </div>
    </div>
    
  4. 我們順便在標題及縮圖部份,將連結路徑填上,如此便能連到單一文章頁面
    <a href="{$url}/index.php?op=show&id={$news.id}">{$news.title}</a>
    1. 其中 op 代表讓程式操作的下一個動作(自行定義的)
    2. id 則是文章編號
    3. 這是 get 的傳遞方法,用 ? 接參數,多組參數間用 & 連接起來
       
  5. 縮圖的部份利用Smarty的{if}{else}{/if}來判斷。若是$news.files有值的話,就用PHP的reset函式抓出陣列的第一個值,也就是第一個圖檔之意。若無,就顯示預設圖檔。
  6. 如此便初步完成資料的樣板套用!

 


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1808

計數器

今天: 4273427342734273
昨天: 5069506950695069
總計: 5134721513472151347215134721513472151347215134721