Deprecated: March 2020

The new syntax has been applied since March, some of old code will be deprecated.

1. Turn-off migration mode for dev
From url of editor, add the param &migration=no
The editor will stop moving the old syntax and display errors with error correction instructions.
2. New CSS Variable
Using global CSS variable for faster and cleaner code. View more detail ​📌 
style.css
// Old code
.myelm {
    color: %color%;
}
​
// New code
.myelm {
    color: var(--lh-color);
}
​
3. Using @print() for inner text only
‌Use a formal syntax to print out. View more detail ​​📌
section.lh
// Old code 
<h1>{{section.settings.}}</h1>
​
// New code
<h1>@print(section.settings.title)</h1>
// Escape html code
<h1>@print( esc(section.settings.title) )</h1>
4. Use @attr() for attribute 
Use @attr() for print out the escaped variable in attribute of HTML . View more detail ​​📌
section.lh
// Old code 
<h1 class="{{section.settings.class}}">This is </h1>
​
// New code, 
// The value will be escaped automatically so do not need to use esc() here
<h1 class="@attr(section.settings.class)">This is heading</h1> 
5. Use @lang() for inner text only 
Support multiple languages text, It works similar to the function @print() 
section.lh
<h1>@lang(section.settings.head_text)</h1>
​
<h1>@lang( esc(section.settings.head_text) )</h1>
​
<h1>@lang('This is text supported ')</h1>
​
<a href="#" title="@attr( lang(section.settings.title) )">
 ... 
</a>
​
​
​
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.

Development - Previous

Engine syntax

Next - Development

Create a theme

Last updated 4 months ago