HTML 의 제목에 블레이드는 템플릿을 만들고 이를 상속하여 사용할 수 있으므로 이를 사용하면 페이지 레이아웃을 정의하고 하위 페이지는 이를 상속받아서 사용할 수 있습니다.

 

레이아웃은 사이트의 계층적 구조에 맞게 블레이드 템플릿 파일을 만들어서 관리하는 것이 편리하므로 레이아웃 관련 템플릿은 resources/views/layouts 폴더 하위에 작성하도록 하겠습니다. 

 

다음은 마스터 레이아웃을 정의한 master.blade.php 파일로  resources/views/layouts 에 위치시키면 됩니다.

resources/views/layouts/master.blade.php

<!DOCTYPE html>
<html lang='ko'>
<head>
	<meta charset='utf-8'>
	<title> @yield('title')</title>
	<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
	<div class='container'>
		@yield('content')
	</div>
</body>
</html>
PHP

부트스트랩이나 제이쿼리같이 모든 페이지에 공통으로 사용되는 리소스가 있다면 마스터 레이아웃에 지정하는게 좋습니다.

템플릿 내용중에 @ 뒤에 yield 가 붙은 부분이 보일 겁니다.  @yield 는 블레이드 템플릿 상속을 위한 핵심 키워드로  이 부분은 자식 컨텐츠가 구현하도록 양보하는 구문입니다.

상속받은 자식 페이지는 부모가 @yield 로 지정한 부분을 @section 키워드로 구현해야 하며 이때 @yield 의 첫 번째 파라미터 이름(여기에서는 title) 은 자식 페이지가 정의한 section 의 이름과 동일해야 합니다.

그러면 이제 위 레이아웃을 상속받은 자식 페이지(resources/views/task/list3.blade.php)를 구현해 보겠습니다.

resources/views/task/list3.blade.php

@extends('layouts.master')
@section('title')
    할일 목록
@endsection
 
@section('content')
    <table class='table'>
        <thead>
            <tr>
                <th>할 일</th>
                <th>기 한</th>
            </tr>
        </thead>
        <tbody>
        @foreach($tasks as $task)
            <tr>
                <td>{{ $task['name'] }}</td>
                <td>{{ $task['due_date'] }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
@endsection
PHP

  • @extends : 자식 페이지는 상속할 부모 템플릿을 extends 키워드로 지정해야 합니다. 템플릿은 layouts 폴더밑에 있으므로 계층을 표시하는 . 을 써서 확장할 템플릿을 지정해 줍니다. 만약 다른 마스터 레이아웃을 상속받은 새로운 레이아웃인 layouts/new-master/main-page.blade.php 템플릿을 사용한다면 다음과 같이 . 으로 계층을 표시하하면 됩니다.

    @extends('layouts.new-master.main-page')
    CODE
  • @section : 부모 페이지에서 @yield 로 지정한 영역은 @section 키워드로 지정한 블록에 구현하면 되며 블록의 끝은 @endsection 또는 @stop 키워드로 지정하면 됩니다. 위 예제에서는 두 개의 섹션이 있는데, 첫 번째 섹션에는 HTML의 제목이 들어가고, 두 번째 섹션에는 부모 페이지에서 content로 지정한 영역을 대체할 내용이 들어갑니다.

만약 자식이 @section 구문으로 확장하지 않아도 기본 값을 출력할 필요가 있다면 다음과 같이 @yield 의 두번째 파라미터에 기본 값을 지정하면 됩니다. 다음은 자식이 title 섹션을 지정하지 않았을 경우 기본값을 사용하겠다는 의미입니다.

<title> @yield('title', '할일 목록')</title>
CODE

 

이제 동작 여부를 확인하기 위해 새로 추가된 뷰를 라우트에 추가해 봅시다.

Route::get('task/list3', function() {
    $tasks= [ 
        ['name' => 'Response 클래스 분석', 'due_date' => '2015-06-01 11:22:33'],
        ['name' => '블레이드 예제 작성', 'due_date' => '2015-06-03 15:12:42'],
    ];  
    return view('task.list3')->with('tasks', $tasks);
});
CODE

 

이제 웹 브라우저로 새로 작성한 페이지에 연결하면 다음과 같이 페이지의 타이틀과 컨텐츠가 처리되어 표시됩니다.

 

브라우저에서 'HTML 의 소스보기'를  선택하면 @section 으로 지정한 부분이 자식 페이지에서 지정한 내용으로 변경되었음을 확인할 수 있습니다.