blocs / blocs
Laravel template engine
Installs: 1 272
Dependents: 1
Suggesters: 0
Security: 0
Stars: 0
Watchers: 4
Forks: 0
Open Issues: 0
- dev-main
- v1.1.143
- v1.1.142
- v1.1.141
- v1.1.140
- v1.1.139
- v1.1.138
- v1.1.137
- v1.1.136
- v1.1.135
- v1.1.134
- v1.1.133
- v1.1.132
- v1.1.131
- v1.1.130
- v1.1.129
- v1.1.128
- v1.1.127
- v1.1.126
- v1.1.125
- v1.1.124
- v1.1.123
- v1.1.122
- v1.1.121
- v1.1.120
- v1.1.119
- v1.1.118
- v1.1.117
- v1.1.116
- v1.1.115
- v1.1.114
- v1.1.113
- v1.1.112
- v1.1.111
- v1.1.110
- v1.1.109
- v1.1.108
- v1.1.107
- v1.1.106
- v1.1.105
- v1.1.104
- v1.1.103
- v1.1.102
- v1.1.101
- v1.1.100
- v1.1.99
- v1.1.98
- v1.1.97
- v1.1.96
- v1.1.95
- v1.1.94
- v1.1.93
- v1.1.92
- v1.1.91
- v1.1.90
- v1.1.89
- v1.1.88
- v1.1.87
- v1.1.86
- v1.1.85
- v1.1.84
- v1.1.83
- v1.1.82
- v1.1.81
- v1.1.80
- v1.1.79
- v1.1.78
- v1.1.77
- v1.1.76
- v1.1.75
- v1.1.74
- v1.1.73
- v1.1.72
- v1.1.71
- v1.1.70
- v1.1.69
- v1.1.68
- v1.1.67
- v1.1.66
- v1.1.65
- v1.1.64
- v1.1.63
- v1.1.62
- v1.1.61
- v1.1.60
- v1.1.59
- v1.1.58
- v1.1.57
- v1.1.56
- v1.1.55
- v1.1.54
- v1.1.53
- v1.1.52
- v1.1.51
- v1.1.50
- v1.1.49
- v1.1.48
- v1.1.47
- v1.1.46
- v1.1.45
- v1.1.44
- v1.1.43
- v1.1.42
- v1.1.41
- v1.1.40
- v1.1.39
- v1.1.38
- v1.1.37
- v1.1.36
- v1.1.35
- v1.1.34
- v1.1.33
- v1.1.32
- v1.1.31
- v1.1.30
- v1.1.29
- v1.1.28
- v1.1.27
- v1.1.26
- v1.1.25
- v1.1.24
- v1.1.23
- v1.1.22
- v1.1.21
- v1.1.20
- v1.1.19
- v1.1.18
- v1.1.17
- v1.1.16
- v1.1.15
- v1.1.14
- v1.1.13
- v1.1.12
- v1.1.11
- v1.1.10
- v1.1.9
- v1.1.8
- v1.1.7
- v1.1.6
- v1.1.5
- v1.1.4
- v1.1.3
- v1.1.2
- v1.1.1
- v1.1.0
- v1.0.107
- v1.0.0
- dev-develop
- dev-hotfix/v1.1.143
This package is auto-updated.
Last update: 2024-09-22 02:00:03 UTC
README
Laravel template engine
Laravelのテンプレートエンジン
概要
BLOCSは、LaravelのBladeをもっと便利にする拡張パッケージです。Bladeのテンプレートでは、本の一覧表示などの繰り返し処理を以下のように記述します。
@foreach($books as $book) <tr> <td>{{ $book->id }}</td> <td>{{ $book->title }}</td> ... <td> @foreach($book->tags as $bookTag) <span>{{ $bookTag->name }}</span><br> @endforeach </td> ... </tr> @endforeach
BLOCSを使うと、同様の処理を以下のように記述できます。テンプレートで指定したデータ属性data-*
で、HTMLを動的に生成します。HTMLをくずさずに構造を活かして、シンプルに記述できるテンプレートエンジンを目指して、BLOCSを開発しています。
<tr data-loop=$books> <td>{{ $book->id }}</td> <td>{{ $book->title }}</td> ... <td> <span data-loop=$book->tags data-assign=$bookTag>{{ $bookTag->name }}</br></span> </td> ... </tr>
特徴
- HTMLをくずさない記述方法(タグ記法、コメント記法)
<div class="error" data-exist=$error>{{ $message }}</div>
- テンプレートでバリデーションを指定
<form method="post"> @csrf <label for="name">名前</label> <input type="text" id="name" name="name" data-filter="katakana" required /> <!-- data-form="name" data-validate="required" data-lang="必須入力です。" --> @error("name") <div>{{ $message }}</div> @enderror <input type="submit" /> </form>
select
radio
checkbox
の項目を動的に追加
/routes/web.php
2行目 Warning
を追加
Route::get("/blocs", function () { \Blocs\Option::add("level", ["2" => "Warning"]); return view("example", [ "level" => "2" ]); });
/resources/views/example.blocs.html
<html> <form> <select name="level"> <option value="">No error</option> <option value="1">Fatal error</option> </select> </form> </html>
<html> <form> <select name="level"> <option value="">No error</option> <option value="1">Fatal error</option> <option value="2" selected>Warning</option> </select> </form> </html>
導入方法
composerで導入してください。
laravel-app % composer require blocs/blocs Info from https://repo.packagist.org: #StandWithUkraine Using version dev-main for blocs/blocs ./composer.json has been updated Running composer update blocs/blocs Loading composer repositories with package information Info from https://repo.packagist.org: #StandWithUkraine Updating dependencies Lock file operations: 1 install, 0 updates, 0 removals - Locking blocs/blocs (dev-main 1c25ad6) Writing lock file Installing dependencies from lock file (including require-dev)
システム要件
Laravel >= 7
php >= 7.4
使い方
BLOCSテンプレートのファイル名は*.blocs.html
です。データ属性data-*
は、HTMLタグに属性を追加するタグ記法と、コメントで記述するコメント記法の2つの記述方法があります。4種類のデータ属性をタグ記法とコメント記法で記述して、HTMLを動的に生成します。
タグ記法
タグ記法は、HTMLタグにデータ属性を追加する記述方法です。開始タグに追加したデータ属性は、終了タグまで影響します。下記の例では、$message
の値でdiv
の間のコンテンツをすべて置換します。追加したデータ属性は、BLOCSが生成したHTMLでは削除されます。
/routes/web.php
Route::get("/blocs", function () { return view("example", [ "error" => true, "message" => "A fatal error has occurred." ]); });
/resources/views/example.blocs.html
2行目 $error
があれば、$message
を表示
<html> <div class="error" data-exist=$error data-val=$message>Message</div> </html>
<html> <div class="error">A fatal error has occurred.</div> </html>
コメント記法
他のテンプレートを読み込む時や、HTMLタグに属性を動的に追加する時に、コメント記法で記述します。データ属性data-attribute
は、コメント記法の次にあるHTMLタグの属性値を置換します。下記の例では$error
がない(エラーが発生しなかった)時は、div
のclass
にsuccess
をセットします。タグ記法とコメント記法は併用できます。
/routes/web.php
Route::get("/blocs", function () { return view("example", [ "error" => false, "message" => "No error has occurred." ]); });
/resources/views/example.blocs.html
2行目 $error
がなければ、div
のclass
をsuccess
にする
<html> <!-- data-attribute="class" data-val="success" data-none=$error --> <div class="error" data-val=$message>Message</div> </html>
<html> <div class="success">No error has occurred.</div> </html>