@yield, @extends, @section|Laravelでレイアウトの共通部分をテンプレートで

man

困ってる人
Laravelでホームページを作るのに、毎回同じデザインやレイアウトを、簡単に引き継ぐ方法を知りたい
毎回同じ内容を書くのが面倒
それでしたら本日は、Laravelのレイアウトの使い回しについてご案内致しますね
operator

オペレーター

こんにちは、ヨロと申します。

前回は「Laravel」で、こんな感じの簡単なホームページの作り方を紹介してみました。

「Laravel」で簡単なサイト・ホームページを作る方法

今回はその引継ぎ、応用編「Laravel」をもっと便利に使う方法で、

「Laravel」でレイアウトの共通部分をテンプレートで設定するやり方について、

@yield, @extends, @sectionの説明など、レイアウト、テンプレートの使い回しの方法をご紹介。

【Laravel】@yield, @extends, @section, レイアウトの共通部分をテンプレートで設定

今回は「ディレクティブ」という機能について、

「Laravel」においてのレイアウトファイルの使い方。

という事で、今回使うのは、この3つ、

  • @yield
  • @extends
  • @section ~ @endsection
  • これらは「ディレクティブ」という機能で、

    例えば、それぞれのページの内容は違ってもヘッダーやフッターなどの見た目は毎回同じ、といった場合に、

    これらを使う事によって、毎回それぞれのファイルごとに似たようなHTMLを書いていかなくても済むという便利な機能。

    これに関しては「ワードプレス」に慣れてる人だとイメージがつきやすいかも。

    今回やる事としては、

  • ① 使いまわし用のメインのレイアウトのファイルを作成
  • ② @extendsを使って、①のファイルの見た目を引き継ぐ
  • ③ @section ~ @endsectionに内容を書いていく。
  • 今回は、見た目の使い回し用に「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')}}">ポチが1才になりました</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')}}">ポチが1才になりました</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>
    
    @endsection

    like.blade.php

    @extends('layout')
    
    @section('content')
    
    	<h2>今日はポチの好きな食べ物を紹介します。</h2>
    
    	<p>お肉</p>
    	<p>すいか</p>
    	<p>コーヒー</p>
    
    @endsection

    dislike.blade.php

    @extends('layout')
    
    @section('content')
    
    	<h2>今日はポチの嫌いな食べ物を紹介します。</h2>
    
    	<p>きゅうり</p>
    	<p>メロン</p>
    	<p>キムチ</p>
    
    @endsection

    birthday.blade.php

    @extends('layout')
    
    @section('content')
    
    	<h2>今日はポチの1才の誕生日!!</h2>
    
    	<p>大きくなったね!</p>
    	<p>1年があっという間!</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')
    
        &lt;h2&gt;うちの可愛い愛犬ポチを紹介するホームページです。&lt;/h2&gt;
     
        &lt;p&gt;&lt;a href="{{url('/welcome')}}"&gt;可愛いわんちゃんがうちに来てくれました&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a href="{{url('/like')}}"&gt;ポチの好きな食べ物&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a href="{{url('/dislike')}}"&gt;ポチの嫌いな食べ物&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a href="{{url('/birthday')}}"&gt;ポチが1才になりました&lt;/a&gt;&lt;/p&gt;
     
    @endsection</code></pre>

    welcome.blade.php

    @extends('layout')
    
    @section('title')
        可愛いわんちゃんがうちに来てくれました
    @endsection
    
    @section('content')
    
    	<h2>可愛いわんちゃんがうちに来てくれました!!</h2>
    
    	<p>元気な元気な男の子です</p>
    	<p>これから毎日散歩が楽しみ!</p>
    	<p>運動好きないい子です!</p>
    
    @endsection

    like.blade.php

    @extends('layout')
    
    @section('title')
        ポチの好きな食べ物
    @endsection
    
    @section('content')
    
    	<h2>今日はポチの好きな食べ物を紹介します。</h2>
    
    	<p>お肉</p>
    	<p>すいか</p>
    	<p>コーヒー</p>
    
    @endsection

    dislike.blade.php

    @extends('layout')
    
    @section('title')
        ポチの嫌いな食べ物
    @endsection
    
    @section('content')
    
    	<h2>今日はポチの嫌いな食べ物を紹介します。</h2>
    
    	<p>きゅうり</p>
    	<p>メロン</p>
    	<p>キムチ</p>
    
    @endsection

    birthday.blade.php

    @extends('layout')
    
    @section('title')
        ポチが1才になりました
    @endsection
    
    @section('content')
    
    	<h2>今日はポチの1才の誕生日!!</h2>
    
    	<p>大きくなったね!</p>
    	<p>1年があっという間!</p>
    	<p>これからもよろしくね!</p>
    @endsection

    そうする事で、それぞれのページにきちんと異なったタイトルをつける事が可能。

    これに関しては、@endsectionを使わず、

    @section(‘title’, ‘ここにタイトル’)

    この1行だけでもOK。

    終わり。