:::

6-5 讓導覽列有作用

一、加入分類設定方便日後調整

  1. 導覽列的選項目前是寫死的,但其實寫成活的更好,也就是可以方便的調整分類項目。
  2. 首先,我們可以在 config.php 檔中新增分類的設定,如:
    // 分類設定
    $categories = [
        1 => '榮譽榜',
        2 => '傑出校友',
        3 => '校園新聞',
        4 => '海外交流',
    ];
    

    其中索引就是我們存入資料庫的 cate_id,也就是一個數字,這樣的好處是日後若想微調文字,就不用修改一大堆資料。

二、將分類設定送到樣板

  1. 由於樣板中會用到該變數,所以,我們可以在 header.php 中,將之也送到樣板檔去。
    <?php
    require_once 'vendor/autoload.php';
    require_once 'config.php';
    
    $smarty = new \Smarty;
    ...略...
    
    // 文章分類
    $smarty->assign('categories', $categories);

     

  2. 最後修改導覽列樣板 templates/nav.tpl,我們利用Smarty的 {foreach} 來將分類讀出,並將每個選項加上連結到 index.php?cate_id=分類編號,好讓 index 列表可以根據 cate_id 來做文章的篩選:
    <!-- 導覽列選項 -->
    <ul class="navbar-nav me-auto mb-2">
      {foreach $categories as $k=>$category}
        <li class="nav-item">
          <a class="nav-link"
            href="{$url}/index.php?cate_id={$k}">{$category}</a>
        </li>
      {/foreach}
    </ul>
  3. 此時,只要導覽列有正確出現即可:
  4. 但目前點擊分類時,該分類並不會用比較量的顏色呈現,所以,我們要加上 active 的樣式給目前的選項,繼續修改 templates/nav.tpl
    <!-- 導覽列選項 -->
    <ul class="navbar-nav me-auto mb-2">
      {foreach $categories as $k=>$category}
        <li class="nav-item">
          <a class="nav-link {if $smarty.get.cate_id==$k}active{/if}"
            href="{$url}/index.php?cate_id={$k}">{$category}</a>
        </li>
      {/foreach}
    </ul>

    其中的 $smarty.get.cate_id 是 Smarty 的用法,也就是直接抓取用 get 傳遞的 cate_id 變數(網址上的 cate_id 變數) 來跟我們的分類設定比對,如果編號一致,就加上 active 樣式,如此,就完成了。

  5. 看起來就正常了!
  6. 若是想讓 .active 除了變白以外,底下還會出現一個小三角形,那麼可以修改 css/style.css,加入:
    ...略...
    
    .nav-link{
      font-size: 1.2rem;
      position: relative;
    }
    
    ...略...
    
    .nav-link.active::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 0;
      margin-left: -.3rem;
      vertical-align: middle;
      content: "";
      border-right: .3rem solid transparent;
      border-bottom: .3rem solid;
      border-left: .3rem solid transparent;
    }

     

三、萬一沒收到 $cate_id 會出錯

  1. 此時回到首頁會發現導覽列一片狼藉:
  2. 這是因為沒有接收到 $cate_id 的關係,所以,我們可以修改 index.php,加入變數過濾,並給個預設值
    // 過濾外來變數
    ...略...
    $cate_id = isset($_REQUEST['cate_id']) ? (int) $_REQUEST['cate_id'] : 0;

     

  3. 然後再將該參數送到樣板檔即可,例如:
    $smarty->assign('op', $op);
    $smarty->assign('cate_id', $cate_id);
    $smarty->display('index.tpl');

     

  4.  修改 templates/nav.tpl將其中的 $smarty.get.cate_id 改為 $cate_id 即可:
    <!-- 導覽列選項 -->
    <ul class="navbar-nav me-auto mb-2">
      {foreach $categories as $k=>$category}
        <li class="nav-item">
          <a class="nav-link {if $cate_id==$k}active{/if}"
            href="{$url}/index.php?cate_id={$k}">{$category}</a>
        </li>
      {/foreach}
    </ul>

     


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 4325432543254325
昨天: 5069506950695069
總計: 5134773513477351347735134773513477351347735134773