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

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」

    「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」に適用するとこんな感じ。

    「@extend」を使って「layout.blade.php」を呼び出し、見た目をそのまま引き継ぎつつ、

    「@section」を使って中身を書き換える事が出来る

    (※@sectionは必ず、@endsectionで閉じる)

    他のファイルも同様に、あとは内容を書き換えていけば完成。

    「welcome.blade.php」

    「like.blade.php」

    「dislike.blade.php」

    「birthday.blade.php」

    そうすれば見た目は全て同じ。

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

    ただ、今のままだと、どのページにも同じタイトルが割り当てられているため、

    その場合は「layout.blade.php」のタイトル部分に、

    を追加する、

    そうすると中身はこんな感じ。

    そして、それぞれのファイルに再度、@section~@endsectionを追加し、中身を追加する。

    最終的にそれぞれのファイルの中身はこんな感じ。

    「index.blade.php」

    「welcome.blade.php」

    「like.blade.php」

    「dislike.blade.php」

    「birthday.blade.php」

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

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

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

    この1行だけでもOK。

    終わり。

    プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール