Engine syntax

Interpolation

Interpolation is a way to print out the dynamic data inside the HTML structure.

section.lh
<h1 class="@attr(section.settings.class)">
    Hello @print(section.settings.name)! Welcome to the Layouthub.com
</h1>

Evaluate

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.

section.lh
<ul>
@js
    let items = section.settings.items_group;
    items.map((item) => {
        print('<li>'+item.name+'</li>'); 
        // the print function works same with @print()
    })
@endjs
</ul>

Conditionals

You may construct if statements using the @if, @elseif, @else, and @endif directives. These directives function identically to their Javascript counterparts:

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
@else
    Product 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 case

Switch statements can be constructed using the @switch, @case, @break, @default and @endswitch directives:

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

For Loop

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:

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

While loop

section.lh
@var i=10
@while (i > 0)
<p>@print(i--)</p>
@endwhile

Including sub-views

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

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

Javascript callback

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.

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.