liquidjs/docs/source/tutorials/partials-and-layouts.md

title

title
Partials and Layouts

Render Partials

For the following template files:

// file: color.liquid
color: '{{ color }}' shape: '{{ shape }}'

// file: theme.liquid
{% assign shape = 'circle' %}
{% render 'color.liquid' %}
{% render 'color.liquid' with 'red' %}
{% render 'color.liquid', color: 'yellow', shape: 'square' %}

The output will be:

color: '' shape: 'circle'
color: 'red' shape: 'circle'
color: 'yellow' shape: 'square'

For more details, see the render tag.

{% note tip The ".liquid" Extension %} The ".liquid" extension in layout, render and include can be omitted if Liquid instance is created using extname: ".liquid" option. See the extname option for details. {% endnote %}

Layout Templates (Extends)

For the following template files:

// file: default-layout.liquid
Header
{% block content %}My default content{% endblock %}
Footer

// file: page.liquid
{% layout "default-layout.liquid" %}
{% block content %}My page content{% endblock %}

The output of page.liquid:

Header
My page content
Footer

For more details, see the layout tag.