LaravelのBladeテンプレートを使って、コンテンツ以外のレイアウトを共通で管理できるようにしてみます。
完成想定
完成時のHTMLを作成してみます。
routes.php
Route::get('/page/', function() {
return view('page.index');
});
page\index.blade.php
<DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル | cly7796.net</title> <meta name="description" itemprop="description" content="説明文"> <meta name="keywords" itemprop="keywords" content="A,B,C"> <link href="/css/layout.css" rel="stylesheet"> <link href="/css/page.css" rel="stylesheet"> </head> <body> <header class="header"> ヘッダー </header> <div class="contents"> <div class="main"> <p>コンテンツ内容が入ります</p> </div> <div class="sub"> <div>共通のサイドバー部分</div> <p>個別サイドバーの内容</p> </div> </div> <footer class="footer"> フッター </footer> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="/js/page.js"></script> </body> </html>
今回ページ毎で設定させたいのは以下になります。
- title(ページタイトルの部分のみ)
- description
- keywords
- page.css(ページ毎のCSS)
- コンテンツ部分
- サイドバーの個別部分
- page.js(ページ毎のJavaScript)
まずはベースとなるテンプレートファイルを作成してみます。
layout\common.blade.php
<DOCTYPE HTML>
<html lang="ja">
<head>
@yield('head')
</head>
<body>
@yield('header')
<div class="contents">
<div class="main">
@yield('content')
</div>
<div class="sub">
@yield('sub')
@yield('pageSub')
</div>
</div>
@yield('footer')
</body>
</html>
@yield()はこの部分に後から追加できるようになります。
この機能を使って、head、ヘッダー、サイドバー、フッターはまた別のファイルで管理するようにしています。
layout\head.blade.php
@section('head')
<meta charset="UTF-8">
<title>@yield('title') | cly7796.net</title>
<meta name="description" itemprop="description" content="@yield('description')">
<meta name="keywords" itemprop="keywords" content="@yield('keywords')">
<link href="/css/layout.css" rel="stylesheet">
@yield('pageCss')
@endsection
@section(‘head’) ～ @endsectionが一つのブロックで、前述の@yield(‘head’)部分に追加されるようになります。
titleや個別のCSSなど各ページで変更したい部分は、@yield()で後から追加するようにしています。
layout\header.blade.php
@section('header')
<header class="header">
ヘッダー
</header>
@endsection
layout\sub.blade.php
@section('sub')
<div>共通のサイドバー部分</div>
@endsection
layout\footer.blade.php
@section('footer')
<footer class="footer">
フッター
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
@yield('pageJs')
@endsection
page\index.blade.php
ページ毎に作成するページです。
@extends('layout.common')
@section('title', 'ページタイトル')
@section('keywords', 'A,B,C')
@section('description', '説明文')
@section('pageCss')
<link href="/css/page.css" rel="stylesheet">
@endsection
@include('layout.head')
@include('layout.header')
@section('content')
<p>コンテンツ内容が入ります</p>
@endsection
@include('layout.sub')
@section('pageSub')
<p>個別サイドバーの内容</p>
@endsection
@section('pageJs')
<script src="/js/page.js"></script>
@endsection
@include('layout.footer')
@extends()は指定した画面を継承することができ、今回はベースのレイアウトを継承するようにしています。
他のテンプレートは@include()で読み込むようにしていますが、テンプレート内で@yield()を使用している場合、@include()で読み込むより前に@section()で設定しておく必要があります。
これで一通りのパーツ分割ができました。
ブラウザで確認してみると、想定どおりの出力ができました。
<DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル | cly7796.net</title> <meta name="description" itemprop="description" content="説明文"> <meta name="keywords" itemprop="keywords" content="A,B,C"> <link href="/css/layout.css" rel="stylesheet"> <link href="/css/page.css" rel="stylesheet"> </head> <body> <header class="header"> ヘッダー </header> <div class="contents"> <div class="main"> <p>コンテンツ内容が入ります</p> </div> <div class="sub"> <div>共通のサイドバー部分</div> <p>個別サイドバーの内容</p> </div> </div> <footer class="footer"> フッター </footer> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="/js/page.js"></script> </body> </html>
header内でページごとに出しわけ(ナビの現在位置など)をしたい場合、includeで引数を渡すことができます。
page\index.blade.php
@include('layout.header', ['current' => 2, 'page' => 'page'])
layout\header.blade.php
{{$current}}
{{$page}}
上記で値を受け取れるので、header.blade.php内で出し分ける処理を記述すればOKです。
【参考サイト】
コメントが承認されるまで時間がかかります。