それでしたら本日は、Laravelのレイアウトの使い回しについてご案内致しますね
こんにちは、ikuxxと申します。
前回は「Laravel」で、こんな感じの簡単なホームページの作り方を紹介してみました。
今回はその引継ぎ、応用編「Laravel」をもっと便利に使う方法で、
「Laravel」でレイアウトの共通部分をテンプレートで設定するやり方について、
@yield, @extends, @sectionの説明など、レイアウト、テンプレートの使い回しの方法をご紹介。
【Laravel】@yield, @extends, @section, レイアウトの共通部分をテンプレートで設定
今回は「ディレクティブ」という機能について、
「Laravel」においてのレイアウトファイルの使い方。
という事で、今回使うのは、この３つ、
これらは「ディレクティブ」という機能で、
例えば、それぞれのページの内容は違ってもヘッダーやフッターなどの見た目は毎回同じ、といった場合に、
これらを使う事によって、毎回それぞれのファイルごとに似たようなHTMLを書いていかなくても済むという便利な機能。
これに関しては「ワードプレス」に慣れてる人だとイメージがつきやすいかも。
今回やる事としては、
今回は、見た目の使い回し用に「layout.blade.php」というファイルを作ってみます。
という事で、
今現在の「index.blade.php」の中身はこんな感じ。
「index.blade.php」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// index.blade.php <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="{{ asset('css/style.css') }}"> <title>我が家の愛犬ポチの日記</title> </head> <body> <h1>我が家の愛犬ポチの日記</h1> <img src="{{ asset('images/inu.png') }}" alt="dog"> <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2> <p><a href="{{url('/welcome')}}">可愛いわんちゃんがうちに来てくれました</a></p> <p><a href="{{url('/like')}}">ポチの好きな食べ物</a></p> <p><a href="{{url('/dislike')}}">ポチの嫌いな食べ物</a></p> <p><a href="{{url('/birthday')}}">ポチが１才になりました</a></p> </body> </html> ※リンク部分に関しては、<a href="{{url('/****')}}</a>を使わなくても、例えば、 <a href="/welcome">可愛いわんちゃんがうちに来てくれました</a>でも、とりあえずはOK。 |
「layout.blade.php」を新しく作成し、
「index.blade.php」の中身を「layout.blade.php」にコピー。
今回のサイトの作りだと、タイトルや画像部分はどのページも同じで、毎回変わるのがこの部分。
ここ以外の見た目は、基本的にはどのページも同じなので、
「layout.blade.php」に、@yield(”)を追加(今回は仮に’content’と入れてみた)
この「@yield(‘content’)」以外の部分は、あとはどのファイルも基本的には同じ。
こうする事によって、あとはどのページに対しても「layout.blade.php」のレイアウトを使い回しする事が出来るようになる。
【Laravel】@yield, @extends, @section：layout.blade.phpの呼び出し方
「layout.blade.php」の呼び出し方という事で「index.blade.php」を編集してみる。
今の「index.blade.php」の中身はこんな感じで、ページごとに毎回見た目が変わるのはこの部分、
ここから使っていくのが、
@extendsと、
@section
これらを「index.blade.php」に適用するとこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// index.blade.php @extends('layout') /* ここでlayout.blade.phpを呼び出す */ @section('content') /* @yield('content') - ここから */ <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2> <p><a href="{{url('/welcome')}}">可愛いわんちゃんがうちに来てくれました</a></p> <p><a href="{{url('/like')}}">ポチの好きな食べ物</a></p> <p><a href="{{url('/dislike')}}">ポチの嫌いな食べ物</a></p> <p><a href="{{url('/birthday')}}">ポチが１才になりました</a></p> @endsection /* @yield('content') - ここまで */ |
「@extend」を使って「layout.blade.php」を呼び出し、見た目をそのまま引き継ぎつつ、
「@section」を使って中身を書き換える事が出来る
(※@sectionは必ず、@endsectionで閉じる)
他のファイルも同様に、あとは内容を書き換えていけば完成。
「welcome.blade.php」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// welcome.blade.php @extends('layout') @section('content') <h2>可愛いわんちゃんがうちに来てくれました！！</h2> <p>元気な元気な男の子です</p> <p>これから毎日散歩が楽しみ！</p> <p>運動好きないい子です！</p> @endsection |
「like.blade.php」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// like.blade.php @extends('layout') @section('content') <h2>今日はポチの好きな食べ物を紹介します。</h2> <p>お肉</p> <p>すいか</p> <p>コーヒー</p> @endsection |
「dislike.blade.php」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// dislike.blade.php @extends('layout') @section('content') <h2>今日はポチの嫌いな食べ物を紹介します。</h2> <p>きゅうり</p> <p>メロン</p> <p>キムチ</p> @endsection |
「birthday.blade.php」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// birthday.blade.php @extends('layout') @section('content') <h2>今日はポチの１才の誕生日！！</h2> <p>大きくなったね！</p> <p>１年があっという間！</p> <p>これからもよろしくね！</p> @endsection |
そうすれば見た目は全て同じ。
@yield, @extends, @section, レイアウトの共通部分をテンプレートで：タイトル部分
ただ、今のままだと、どのページにも同じタイトルが割り当てられているため、
その場合は「layout.blade.php」のタイトル部分に、
|
1 |
@yield('title') |
を追加する、
そうすると中身はこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// layout.blade.php <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="{{ asset('css/style.css') }}"> <title>@yield('title')</title> </head> <body> <h1>我が家の愛犬ポチの日記</h1> <img src="{{ asset('images/inu.png') }}" alt="dog"> @yield('content') </body> </html> |
そして、それぞれのファイルに再度、@section～@endsectionを追加し、中身を追加する。
最終的にそれぞれのファイルの中身はこんな感じ。
「index.blade.php」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// index.blade.php @extends('layout') @section('title') 我が家の愛犬ポチの日記 @endsection @section('content') <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2> <p><a href="{{url('/welcome')}}">可愛いわんちゃんがうちに来てくれました</a></p> <p><a href="{{url('/like')}}">ポチの好きな食べ物</a></p> <p><a href="{{url('/dislike')}}">ポチの嫌いな食べ物</a></p> <p><a href="{{url('/birthday')}}">ポチが１才になりました</a></p> @endsection |
「welcome.blade.php」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// welcome.blade.php @extends('layout') @section('title') 可愛いわんちゃんがうちに来てくれました @endsection @section('content') <h2>可愛いわんちゃんがうちに来てくれました！！</h2> <p>元気な元気な男の子です</p> <p>これから毎日散歩が楽しみ！</p> <p>運動好きないい子です！</p> @endsection |
「like.blade.php」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// like.blade.php @extends('layout') @section('title') ポチの好きな食べ物 @endsection @section('content') <h2>今日はポチの好きな食べ物を紹介します。</h2> <p>お肉</p> <p>すいか</p> <p>コーヒー</p> @endsection |
「dislike.blade.php」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// dislike.blade.php @extends('layout') @section('title') ポチの嫌いな食べ物 @endsection @section('content') <h2>今日はポチの嫌いな食べ物を紹介します。</h2> <p>きゅうり</p> <p>メロン</p> <p>キムチ</p> @endsection |
「birthday.blade.php」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// birthday.blade.php @extends('layout') @section('title') ポチが１才になりました @endsection @section('content') <h2>今日はポチの１才の誕生日！！</h2> <p>大きくなったね！</p> <p>１年があっという間！</p> <p>これからもよろしくね！</p> @endsection |
そうする事で、それぞれのページにきちんと異なったタイトルをつける事が可能。
これに関しては、@endsectionを使わず、
@section(‘title’, ‘ここにタイトル’)
この１行だけでもOK。
終わり。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
海外約50ヶ国を放浪中
海外生活が長い事もあり、英語と韓国語をある程度話せます。
最近はマレーシアに住んでるおかげで中国語もちょこちょこ伸びてきてます。
趣味は健康、筋トレ、海外旅行。
YouTubeもやってます。
このWordPressテーマはゼロからの自作
なので、どこか変なところがあったら教えて下さい
最近はマレーシアに住んでいますが、数年後にはヨーロッパに住んで、その後中国に住みたいなと考えています。
最終的には日本の田舎に住もうかな。
Laravelでホームページを作るのに、毎回同じデザインやレイアウトを、簡単に引き継ぐ方法を知りたい
毎回同じ内容を書くのが面倒