Dynamic Expressions

Here are the most common uses of expressions

How to use variables in layouts ?

You must always precede the name of your variable with "page.".

<div>Your name {{ page.variables }}</div>

Conditionals

<if condition="page.firstname">
  <div>Hello {{ page.firstname }}</div>
</if>

<if condition="page.firstname === 'John'">
  <div>Hello John</div>
</if>
<elseif condition="page.firstname === 'Joe'">
  <div>Hello Joe</div>
</elseif>
<else>
    <div>Hello</div>
</else>

Loops

Arrays

<each loop="item, index in page.myArray">
  <p>{{ index }}: {{ item }}</p>
</each>

Objects

<each loop="value, key in page.myObject">
  <p>{{ key }}: {{ value }}</p>
</each>

Loop props

While inside a loop, you will have access to a special object called {{ loop }}. This object provides you with valuable information about the current loop iteration.

• loop.index - the current iteration of the loop (0 indexed)

• loop.remaining - number of iterations until the end (0 indexed)

• loop.first - boolean indicating if it's the first iteration

• loop.last - boolean indicating if it's the last iteration

• loop.length - total number of items

Switches

<switch expression="page.user.role">
  <case n="'admin'">
    <p>Welcome, admin! You have full access to all features.</p>
  </case>
  <case n="'editor'">
    <p>Welcome, editor! You can create and edit content on the platform.</p>
  </case>
  <case n="'subscriber'">
    <p>Welcome, subscriber! Enjoy exclusive content and updates.</p>
  </case>
  <default>
    <p>Welcome, guest! Sign up or log in to access more features.</p>
  </default>
</switch>

Fetch

<fetch url="https://jsonplaceholder.typicode.com/users">
  <each loop="user in res">
    {{ user.name }}
  </each>
</fetch>

Raw

If you want to ignore expressions in a block of code

<raw>
  This will not be parsed:
  <if condition="page.env">
    {{ page.env }}
  </if>
  Neither will this expression: {{ page.env }}
</raw>