---
# System prepended metadata

title: 'Note from Laracasts: Integrate a Site Template (ep.15)'
tags: [laracasts]

---

# 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（分頁）。





