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

前言

上一篇[ Laravel ] 初心者之路#07 – Blade 實作中,帶各位使用Laravel的Blade Templates實作前端的頁面,不過可能有些人發現有個小小的瑕疵,讓我們來看看這個瑕疵在哪裡

 

Navigation的小瑕疵

讓我們看看下面幾張截圖

page_about

 

page_products

 

page_store

有沒有看到哪裡出現問題呢? (大家來找碴XD)

沒有?!

question_nigger

沒關西,我來告訴你

Navigation的部分應該根據在當前頁面而去highlight

然而現在每個頁面highlight的都是Home

所以我們要來進行一點小修正

各位有沒有一點想法呢?

 

Challenge

想要挑戰看看的,先不要急著往下拉看答案

自己嘗試看看用過去所學的Blade語法達成highlight當前頁面對應的navigation

.

.

.

.

.

.

 

Answer

讓我們來看看該怎麼解決這個問題

首先,先了解到Navigation是怎麼highlight的

nav_active

它是藉由在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!

Leave a Comment