こんにちは、ヨロと申します。
前回は「Laravel」で、こんな感じの簡単なホームページの作り方を紹介してみました。
今回はその引継ぎ、応用編「Laravel」をもっと便利に使う方法で、
「Laravel」でレイアウトの共通部分をテンプレートで設定するやり方について、
@yield, @extends, @sectionの説明など、レイアウト、テンプレートの使い回しの方法をご紹介。
【Laravel】@yield, @extends, @section, レイアウトの共通部分をテンプレートで設定
今回は「ディレクティブ」という機能について、
「Laravel」においてのレイアウトファイルの使い方。
という事で、今回使うのは、この３つ、
これらは「ディレクティブ」という機能で、
例えば、それぞれのページの内容は違ってもヘッダーやフッターなどの見た目は毎回同じ、といった場合に、
これらを使う事によって、毎回それぞれのファイルごとに似たようなHTMLを書いていかなくても済むという便利な機能。
これに関しては「ワードプレス」に慣れてる人だとイメージがつきやすいかも。
今回やる事としては、
今回は、見た目の使い回し用に「layout.blade.php」というファイルを作ってみます。
という事で、
今現在の「index.blade.php」の中身はこんな感じ。
「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.webp') }}" 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」に適用するとこんな感じ。
@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
@extends('layout')
@section('content')
<h2>可愛いわんちゃんがうちに来てくれました！！</h2>
<p>元気な元気な男の子です</p>
<p>これから毎日散歩が楽しみ！</p>
<p>運動好きないい子です！</p>
@endsectionlike.blade.php
@extends('layout')
@section('content')
<h2>今日はポチの好きな食べ物を紹介します。</h2>
<p>お肉</p>
<p>すいか</p>
<p>コーヒー</p>
@endsectiondislike.blade.php
@extends('layout')
@section('content')
<h2>今日はポチの嫌いな食べ物を紹介します。</h2>
<p>きゅうり</p>
<p>メロン</p>
<p>キムチ</p>
@endsectionbirthday.blade.php
@extends('layout')
@section('content')
<h2>今日はポチの１才の誕生日！！</h2>
<p>大きくなったね！</p>
<p>１年があっという間！</p>
<p>これからもよろしくね！</p>
@endsectionそうすれば見た目は全て同じ。
@yield, @extends, @section, レイアウトの共通部分をテンプレートで：タイトル部分
ただ、今のままだと、どのページにも同じタイトルが割り当てられているため、
その場合は「layout.blade.php」のタイトル部分に、
@yield(‘title’)
を追加する、
そうすると中身はこんな感じ。
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.webp') }}" alt="dog">
@yield('content')
</body>
</html>そして、それぞれのファイルに再度、@section～@endsectionを追加し、中身を追加する。
最終的にそれぞれのファイルの中身はこんな感じ。
index.blade.php
<pre><code>@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</code></pre>welcome.blade.php
@extends('layout')
@section('title')
可愛いわんちゃんがうちに来てくれました
@endsection
@section('content')
<h2>可愛いわんちゃんがうちに来てくれました！！</h2>
<p>元気な元気な男の子です</p>
<p>これから毎日散歩が楽しみ！</p>
<p>運動好きないい子です！</p>
@endsectionlike.blade.php
@extends('layout')
@section('title')
ポチの好きな食べ物
@endsection
@section('content')
<h2>今日はポチの好きな食べ物を紹介します。</h2>
<p>お肉</p>
<p>すいか</p>
<p>コーヒー</p>
@endsectiondislike.blade.php
@extends('layout')
@section('title')
ポチの嫌いな食べ物
@endsection
@section('content')
<h2>今日はポチの嫌いな食べ物を紹介します。</h2>
<p>きゅうり</p>
<p>メロン</p>
<p>キムチ</p>
@endsectionbirthday.blade.php
@extends('layout')
@section('title')
ポチが１才になりました
@endsection
@section('content')
<h2>今日はポチの１才の誕生日！！</h2>
<p>大きくなったね！</p>
<p>１年があっという間！</p>
<p>これからもよろしくね！</p>
@endsectionそうする事で、それぞれのページにきちんと異なったタイトルをつける事が可能。
これに関しては、@endsectionを使わず、
@section(‘title’, ‘ここにタイトル’)
この１行だけでもOK。
終わり。
毎回同じ内容を書くのが面倒