Engine syntax
for Liquid.json only
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>
@js
let 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
@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 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
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 1yr ago