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

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


レイアウト用 ビュー

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.1/blade


まとめ

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

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

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中