Interpolation is a way to print out the dynamic data inside the HTML structure.
Syntax | Description |
@print(variable) | Print out the variable |
@lang(variable) | Print out the variable or string which will be supported multiple |
@attr() | Print out the escaped of variable into attribute of HTML element |
section.lh<h1 class="@attr(section.settings.class)">Hello @print(section.settings.name)! Welcome to the Layouthub.com</h1>
The engine is built in Javascript, In some situations, it's useful to embed logic code into your views. You can use the blade @js directive to execute your logic code. It works similarly to <?php
and ?>
in PHP programming language.
Name | Syntax |
Start | @js |
End | @endjs |
section.lh<ul>@jslet items = section.settings.items_group;items.map((item) => {print('<li>'+item.name+'</li>');// the print function works same with @print()})@endjs</ul>
You may construct if statements using the @if
, @elseif
, @else
, and @endif
directives. These directives function identically to their Javascript counterparts:
Name | Syntax |
if | @if (conditions) |
else if | @elseif (conditions) |
else | @else |
endif | @endif |
unless | @unless(!conditions) |
section.lh@if (section.settings.limit_items < 5)Product items limit less than 5@elseif ( section.settings.limit_items < 10)Product items limit less than 10@elseProduct items limit greater than 10@endif
For convenience, Blade also provides an @unless
directive:
section.lh@unless (section.settings.show_logo == 'yes')Customer don't want to show logo@endunless
Switch statements can be constructed using the @switch
, @case
, @break
, @default
and @endswitch
directives:
Name | Syntax |
switch | @switch (variable) |
case | @case (value) |
break | @break or @endcase |
default | @default |
endswitch | @endswitch |
section.lh@switch (section.settings.head)@case 'one'<h1>The case one of variable section.settings.head<1>@break@case 'two'<h2>The case two</h2>@break@default<h3>The default</h3>@break@endswitch
In addition to conditional statements, Engine provides simple directives for working with Javascript's loop structures. Again, each of these directives functions identically to their Javascript counterparts:
Name | Syntax |
for | @for (contitional statements) |
endfor | @endfor |
elsefor | @elsefor // incase array has no items |
endelse | @endelse |
section.lh// Loop JSON object@for (object as key => item)<p>@print(key): <strong>@print(item)</strong></p>@elsefor<p>No items</p>@endelse​// Loop an array@for (array as item)<p>@print(item)</p>// The current index is: _i@endfor​// Loop sequentially@for (var i=0; i<10; i++)<p>@print(i)</p>@endfor
Name | Syntax |
while | @while (conditions) |
endwhile | @endwhile |
section.lh@var i=10@while (i > 0)<p>@print(i--)</p>@endwhile
Engine's @include
directive allows you to include a Engine view from within another view (file *.lh) in /includes
folder. All variables that are available to the parent view will be made available to the included view via section.assign
Notice: You should separate it to a sub-view, it will cleaner than and load faster than
Name | Syntax |
include | @include('name', assign) |
<div><div class="logo"><img src="%URL%logo.png" /></div><div class="main-menu">@include('menu')</div</div>
<ul><li><a href="/">Home</a></li><li><a href="/collections/all">Catalog</a></li></ul>
You can write your javascript callback function for section template file section.lh or any Include Sub-Views file. The callback will between the @javascript
and @endjavascript
The callback will be called after the HTML of template file is rendered with some arguments.
Name | Description |
this | The HTML Node of curent view |
section.url | The http url of current section |
section.settings | All settings of current section |
section.lh<div id="my-section"><a href="#">Click me</a></div>​@javascript// this is the HTML Node div#my-section$(this).find('a').on('click', (e) => {alert('Clicked on you');});@endjavascript
​
​
If you love LayoutHub, could you consider posting an review? That would be awesome and really help us to grow our business, here is the link.