前言
上一篇[ Laravel ] 初心者之路#07 – Blade 實作中,帶各位使用Laravel的Blade Templates實作前端的頁面,不過可能有些人發現有個小小的瑕疵,讓我們來看看這個瑕疵在哪裡
Navigation的小瑕疵
讓我們看看下面幾張截圖
有沒有看到哪裡出現問題呢? (大家來找碴XD)
沒有?!
沒關西,我來告訴你
Navigation的部分應該根據在當前頁面而去highlight
然而現在每個頁面highlight的都是Home
所以我們要來進行一點小修正
各位有沒有一點想法呢?
Challenge
想要挑戰看看的,先不要急著往下拉看答案
自己嘗試看看用過去所學的Blade語法達成highlight當前頁面對應的navigation
.
.
.
.
.
.
Answer
讓我們來看看該怎麼解決這個問題
首先,先了解到Navigation是怎麼highlight的
它是藉由在class中加上 active
來讓它有highlight的效果
那麼,我們要做的就是要在當前頁面對應的 li class
中加上 active
方法如下,讓我們把li的class的active的部分替換成@yield(…)
<li class="nav-item @yield('nav_home') px-lg-4"> <li class="nav-item @yield('nav_about') px-lg-4"> <li class="nav-item @yield('nav_products') px-lg-4"> <li class="nav-item @yield('nav_store') px-lg-4">
接下來,就在分頁的view中,去填入自己的yield
例如在index.blade.php加入…
@section('nav_home', 'active');
在about.blade.php中加入
@section('nav_about', 'active');
以此類推…
好了之後refresh頁面
你就可以得到在當前頁面highlight對的navigation囉!
不曉得你的挑戰有沒有成功呢?
我相信讀者們一定都很聰明的啦~
就算沒有也別氣餒,咱們再接再厲就好!
加入版本控制
完成後也別忘了將目前的進度加入到版本控制當中
ctrl + `
叫出命令列
輸入
git add . git commit -m "fix front-end navbar bug"
總結
今天我們使用上次所教的@yield / @section的方式
修正了navigation的bug
並且將進度加入至版本控制中
下一次我們會開始談論到database in laravel
See you!