Engine syntax

for Liquid.json only

Interpolation

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>

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.

Name

Syntax

Start

@js

End

@endjs

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:

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

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

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:

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

While loop

Name

Syntax

while

@while (conditions)

endwhile

@endwhile

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

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.