blocs/blocs

The PHP Template engine for Laravel


README

logo.svg

The PHP Template engine for Laravel

Laravelのためのテンプレートエンジン

Latest stable version Total downloads GitHub code size GitHub license Laravel awesome Laravel version PHP version

Website | Document | English

概要

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>

http://127.0.0.1:8000/blocs

<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>

http://127.0.0.1:8000/blocs

<html>
<div class="error">A fatal error has occurred.</div>
</html>

コメント記法

他のテンプレートを読み込む時や、HTMLタグに属性を動的に追加する時に、コメント記法で記述します。データ属性data-attributeは、コメント記法の次にあるHTMLタグの属性値を置換します。下記の例では$errorがない(エラーが発生しなかった)時は、divclasssuccessをセットします。タグ記法とコメント記法は併用できます。

/routes/web.php

Route::get("/blocs", function () {
  return view("example", [
    "error" => false,
    "message" => "No error has occurred."
  ]);
});

/resources/views/example.blocs.html
2行目 $errorがなければ、divclasssuccessにする

<html>
<!-- data-attribute="class" data-val="success" data-none=$error -->
<div class="error" data-val=$message>Message</div>
</html>

http://127.0.0.1:8000/blocs

<html>
<div class="success">No error has occurred.</div>
</html>