[ Laravel ] 初心者之路#08 – Blade 實作補充

前言

上一篇[ 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">

@section('nav_home', 'active');

@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!