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



相關文章

初心者之路#14– 整合實作 PART 2 前言 在上一篇,跟各位快速的實作完後台的介面,並且完成了Database中資料的新增、修改、刪除 接下來,就是要讓我們在後台的變更都可以直接影響到前台,將資料帶入到前台頁面當中~ &nb...
初心者之路#11 – 透過Migration建立Datebase實作... 前言 今天將會利用上一次 初心者之路#10 – Migrations 和 Schema的內容,利用Migration帶各位建立目前專案的資料庫結構   建立Database 要透...
初心者之路#09 – Database in Laravel 前言 今天要跟各位介紹的,是在Laravel中該如何存取資料庫。 在Laravel中,可以透過原生的SQL以及Laravel提供的查詢指令,或是Eloquent ORM的方式,來存取資料。 ...
初心者之路#04 – 工具準備 (VS Code, Git) 所謂工欲善其事,必先利其器,初心者要練等打怪,也要先有武器裝備。今天要跟各位介紹的,是我們在開發專案時會使用到的工具,包含了文字編輯器- Visual Studio Code,以及版本控制系統- Gi...