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.
Last modified 6mo ago