Readouble

Laravel 5.0 テンプレート

BladeテンプレートBlade Templating

Bladeはシンプルですが、パワフルなLaravelのテンプレートエンジンです。コントローラーレイアウトと違い、Bladeはテンプレートの継承セクションにより扱われます。全てのBladeテンプレートには.blade.php拡張子が付きます。Blade is a simple, yet powerful templating engine provided with Laravel. Unlike controller layouts, Blade is driven by template inheritance and sections. All Blade templates should use the .blade.php extension.

Bladeレイアウトを定義するDefining A Blade Layout

<!-- resources/views/layouts/master.blade.php として保存 -->

<html>
	<head>
		<title>アプリ名 - @yield('title')</title>
	</head>
	<body>
		@section('sidebar')
			ここにマスターサイドバー
		@show

		<div class="container">
			@yield('content')
		</div>
	</body>
</html>

Bladeレイアウトを使用するUsing A Blade Layout

@extends('layouts.master')

@section('title', 'ページタイトル')

@section('sidebar')
	@@parent

	<p>ここはマスターサイドバーに追加される</p>
@stop

@section('content')
	<p>ここはコンテンツの本文</p>
@stop

Bladeレイアウトを「拡張(extends)」するには、ただレイアウトのセクションをオーバーライドするだけです。子のビューで親のコンテンツをインクルードするには@@parentディレクティブをセクションで使用します。サイドバーやフッターでレイアウトのコンテンツを追加する場合などに便利です。Note that views which extend a Blade layout simply override sections from the layout. Content of the layout can be included in a child view using the @@parent directive in a section, allowing you to append to the contents of a layout section such as a sidebar or footer.

セクションを定義するべきか迷うこともあります。そんな場合は、デフォルト値を@yieldに直接指定できます。2つめのパラメーターで、デフォルト値を指定してください。Sometimes, such as when you are not sure if a section has been defined, you may wish to pass a default value to the @yield directive. You may pass the default value as the second argument:

@yield('section', 'デフォルトの内容')

その他のBlade制御構文Other Blade Control Structures

データーのechoEchoing Data

こんにちは、{{ $name }}さん。

現在のUnixタイムスタンプは、{{ time() }}です。

存在を確認した後にデーターをechoEchoing Data After Checking For Existence

時々、セットされてるかわからない変数をechoしたい場合があります。基本的に、このように実現できます。Sometimes you may wish to echo a variable, but you aren't sure if the variable has been set. Basically, you want to do this:

{{ isset($name) ? $name : 'デフォルト値' }}

三項演算子を書く代わりに、Bladeでは次のような短縮形を使用することができます。However, instead of writing a ternary statement, Blade allows you to use the following convenient short-cut:

{{ $name or 'デフォルト値' }}

波括弧をそのまま出力するDisplaying Raw Text With Curly Braces

カギカッコで囲まれた文字列をそのまま出力する必要がある場合には、@を先頭に付けることで、Bladeの処理をエスケープすることができます。If you need to display a string that is wrapped in curly braces, you may escape the Blade behavior by prefixing your text with an @ symbol:

@{{ これはBladeで処理されない }}

データをエスケープしたくない場合は、以下のような記述をしてください。If you don't want the data to be escaped, you may use the following syntax:

こんにちは、{!! $name !!}さん。

注意: アプリケーションのユーザーから入力された内容を表示する時には注意が必要です。内容をHTMLエンティティへエスケープするために、二重の波括弧記法をいつも使用すべきでしょう。Note: Be very careful when echoing content that is supplied by users of your application. Always use the double curly brace syntax to escape any HTML entities in the content.

If文If Statements

@if (count($records) === 1)
	レコードは一つ!
@elseif (count($records) > 1)
	複数のレコードがある!
@else
	レコードはない!
@endif

@unless (Auth::check())
	あなたはログインしていない!
@endunless

ループLoops

@for ($i = 0; $i < 10; $i  )
	現在の値は、{{ $i }}です。
@endfor

@foreach ($users as $user)
	<p>ユーザー{{ $user->id }}です。</p>
@endforeach

@forelse($users as $user)
	<li>{{ $user->name }}</li>
@empty
	<p>ユーザー未登録</p>
@endforelse

@while (true)
	<p>永久にループ中</p>
@endwhile

サブビューをインクルードするIncluding Sub-Views

@include('view.name')

読み込むビューにデーターの配列を渡すことも可能です。You may also pass an array of data to the included view:

@include('view.name', ['some' => 'data'])

セクションのオーバーライドOverwriting Sections

セクション全体を書き換えるには、overwrite文を使用してください。To overwrite a section entirely, you may use the overwrite statement:

@extends('list.item.container')

@section('list.item.content')
	<p>これは、{{ $item->type }}タイプのアイテムです。</p>
@overwrite

多言語に対応済みの行表示Displaying Language Lines

@lang('language.line')
@choice('language.line', 1)
@choice('language.line', 1);

コメントComments

{{-- このコメントは、HTMLにレンダーされない --}}

章選択

Artisan CLI

設定

明暗テーマ
light_mode
dark_mode
brightness_auto システム設定に合わせる
テーマ選択
photo_size_select_actual デフォルト
photo_size_select_actual モノクローム(白黒)
photo_size_select_actual Solarized風
photo_size_select_actual GitHub風(青ベース)
photo_size_select_actual Viva(黄緑ベース)
photo_size_select_actual Happy(紫ベース)
photo_size_select_actual Mint(緑ベース)
コードハイライトテーマ選択

明暗テーマごとに、コードハイライトのテーマを指定できます。

テーマ配色確認
スクリーン表示幅
640px
80%
90%
100%

768px以上の幅があるときのドキュメント部分表示幅です。

インデント
無し
1rem
2rem
3rem
原文確認
原文を全行表示
原文を一行ずつ表示
使用しない

※ 段落末のEボタンへカーソルオンで原文をPopupします。

Diff表示形式
色分けのみで区別
行頭の±で区別
削除線と追記で区別

※ [tl!…]形式の挿入削除行の表示形式です。

Pagination和文
ペジネーション
ペギネーション
ページネーション
ページ付け
Scaffold和文
スカフォールド
スキャフォールド
型枠生成
本文フォント

総称名以外はCSSと同様に、"〜"でエスケープしてください。

コードフォント

総称名以外はCSSと同様に、"〜"でエスケープしてください。

保存内容リセット

localStrageに保存してある設定項目をすべて削除し、デフォルト状態へ戻します。

ヘッダー項目移動

キーボード操作