今天我們要開始建立我們後台的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)而顯示那個積木的名字。
以上是今天模板凹槽介紹與製作,下一篇會介紹藍色虛線的部分。