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
1
<h1 class="@attr(section.settings.class)">
2
Hello @print(section.settings.name)! Welcome to the Layouthub.com
3
</h1>
Copied!

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
1
<ul>
2
@js
3
let items = section.settings.items_group;
4
items.map((item) => {
5
print('<li>'+item.name+'</li>');
6
// the print function works same with @print()
7
})
8
@endjs
9
</ul>
Copied!

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
1
@if (section.settings.limit_items < 5)
2
Product items limit less than 5
3
@elseif ( section.settings.limit_items < 10)
4
Product items limit less than 10
5
@else
6
Product items limit greater than 10
7
@endif
Copied!
For convenience, Blade also provides an @unless directive:
section.lh
1
@unless (section.settings.show_logo == 'yes')
2
Customer don't want to show logo
3
@endunless
Copied!

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
1
@switch (section.settings.head)
2
@case 'one'
3
<h1>The case one of variable section.settings.head<1>
4
@break
5
@case 'two'
6
<h2>The case two</h2>
7
@break
8
@default
9
<h3>The default</h3>
10
@break
11
@endswitch
Copied!

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
1
// Loop JSON object
2
@for (object as key => item)
3
<p>@print(key): <strong>@print(item)</strong></p>
4
@elsefor
5
<p>No items</p>
6
@endelse
7
8
// Loop an array
9
@for (array as item)
10
<p>@print(item)</p>
11
// The current index is: _i
12
@endfor
13
14
// Loop sequentially
15
@for (var i=0; i<10; i++)
16
<p>@print(i)</p>
17
@endfor
Copied!

While loop

Name
Syntax
while
@while (conditions)
endwhile
@endwhile
section.lh
1
@var i=10
2
@while (i > 0)
3
<p>@print(i--)</p>
4
@endwhile
Copied!
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.