# Note from Laracasts: Integrate a Site Template (ep.15) ###### tags: `laracasts` >將內含html/css的頁面佈局輸入到laravel當中，並且做畫面的分割。 >https://laracasts.com/series/laravel-6-from-scratch/episodes/15?autoplay=true ### Step1: 將佈局檔案丟入/public資料夾中 ![](https://i.imgur.com/woAEtaf.png) > 可省略html和text檔，並index.html內的程式碼複製欲指定的頁面佈局檔當中，例如layout.blade.php。 > 另外建議將css檔集中在/public/css資料夾中。 ### Step2: 為顯示頁面輸入路由函式 ```php // routes/web.php // 即在主頁面的welcome分頁中，顯示welcome.blade.php的內容 Route::get('/welcome', function () { return view('welcome'); }); ``` ### Step3 :定義頁面佈局和繼承頁面佈局 :::info :bulb: 認識blade樣版引擎的獨有指令 - @extends() 指定子頁面應該「繼承」哪一個佈局 - @yield() 被用來顯示給指定區塊的內容 - @section() 定義一個內容區塊，區塊末端另使用@endsection ::: ![](https://i.imgur.com/8RvZ2ef.png) >將欲套用的頁面佈局複製到layout2.blade.php 再輸入@extends('layout2')至welcome.blade.php當中 (如圖，筆者在此套入的佈局第二種，因此命名為layout2) ![](https://i.imgur.com/wwslh3v.png) >此時welcome子頁面已繼承layout2的頁面。接著回到layout2.blade.php，我們將原本放在<body></body>裡面的內容剪下。輸入@yield('content')和@yield(header)。而已經被剪下的內容，我們會將它放到@section()裡面去引用。 ![](https://i.imgur.com/5vPn4BU.png) >把剪下的內容置入@section()當中，分別成為@section('content')、@section('header')。 ![](https://i.imgur.com/zIn6A1X.jpg) ==換句話說，welcome這個子頁面完全繼承了原本的套入的佈局，而原本的layout2缺少了裁下來的兩塊版面== ![](https://i.imgur.com/xtrQ07K.png) >在about分頁中，筆者同樣繼承layout2的佈局，但加入了原本被移除掉@yield('content')，加入@section(content)。 ![](https://i.imgur.com/r0kS4fD.png) >完成之後的about分頁就去掉了大banner，僅保留標題欄。這樣就能夠清楚地分別welcome（主頁）和about（分頁）。