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.