初めてのLaravel 5.6 : (5) Bladeでレイアウトを作る

前回までで、aboutページ、contactページを作成してきました。この２つのページは共通したHTMLを多く含んでいます。今回はこの共通した部分を切り出してレイアウトファイルを作成し、２つのページで共有できるようにしてみます。

レイアウト用 ビュー

resouces/views/layout.blade.php をテキストエディタで作成します。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
</head>
<body>

    @yield('content')

</body>
</html>

bodyタグの中に @yield(‘content’) と記入しました。この箇所が実際のページのコンテンツを流し込む箇所になります。

引数で渡している ‘content’ は 複数の@yieldがある場合に、場所を特定する為の名前になります。

about ページのビュー

resouces/views/pages/about.blade.php を修正します。

<!-- 修正前 -->

<!DOCTYPE HTML>
<html>
<head>
    <title>About</title>
</head>
<body>
    <h1>About Me: {{ $first_name }} {{ $last_name }}</h1>
</body>
</html>

<!-- 修正後 -->

@extends('layout')

@section('content')
    <h1>About Me: {{ $first_name }} {{ $last_name }}</h1>
@endsection

@extendsで “layout” (layout.blade.php) を継承するよう指示しています。

@section(‘content’) から @endsection までが、layout ビューの @yield(‘content’) の箇所に流し込む部分になります。

HTML をごっそりと消して、layout ビューに移すことができました。
これで layout ビューを他のビューからも使用することができます。

演習

  • contact ページのビューでも layout ビューを使うように修正してください。
  • bladeには、if 文や foreach 文、include文等もあります。以下のサイトで確認してみてください。

http://laravel.com/docs/5.6/blade

まとめ

以下のことができるようになりました。

  • 共通レイアウトビューの作成
  • blade の @yield, @extends, @section の使用

コメントを残す