fbpx

今天我們要開始建立我們後台的view,我們的頁面一定會有一些地方是共用的,

為了減少一個頁面寫太多程式碼,所以我們會用一些方式來讓畫面更簡潔,

而今天主要介紹yield的使用與意思,但在那之前我們要先做幾樣事情再來解說。

Step1.

先了解頁面的分層

這邊我找了 Louise Whitehouse 的網頁作範例解說,

這個頁面會有navigation(導覽列)、content及footer,

有些人會把logo獨立出來放navigation的上面,

這樣就會多一個header的區塊在最上面,但這就看大家想要什麼形式嘍~

我建議在做頁面設計之前可以多找一些案例作參考,然後把區塊畫下來再去做。

藍色的部分(包括header)是要共用的區塊,紫色的部分就是每一頁放置內容的地方。

Step2.

畫出我們理想中的後台頁面

將想要的框架畫出來,並把要放置的內容以框框的方式擺進去,

這邊分成藍色區域跟紫色區域,藍色部分就是要共用的區塊,紫色就是會隨內容不同而變化。

Step3.

@yield的用法

這是我們後台共用的頁面,作為我們的模板,紫色的區域是要做替換的區域,

我們把模板比擬成積木底板,每個虛線都是凹槽,可以放置合適的積木。

yield就是我們空的凹槽,那明明說虛線是凹槽,為什麼藍色不是yield呢?

因為每個頁面藍色都一樣,所以都放上積木了,並不是空的喔。

Step4.

製作我們的模板

首先打開resources/views/layouts/app.blade.php,這是laravel原先的模板,

我們要把它改成我們要的樣式,所以我們先複製一個app.blade.php,

改名為dashboard,再來我們看看laravel的頁面和我們自己要的頁面不同之處。

在這裡我們要再多增加header跟footer,但這個部分是藍色虛線的部分,

所以增加的部分就下次做,而中間最大的紫色凹槽laravel已經幫我們做了,

那我們來新增一個凹槽吧~

<title>@yield(‘title’)</title>

將title改做成凹槽,’title’是title的標籤,

這樣title會根據你放的積木(section)而顯示那個積木的名字。

以上是今天模板凹槽介紹與製作,下一篇會介紹藍色虛線的部分。

Leave a Reply