1

Partials and Layouts

harttle edited this page 2019-08-06 00:51:59 +08:00

Table of Contents

• Include Partials
• Layout Templates (Extends)

Include Partials

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

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

The output will be:

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

Layout Templates (Extends)

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

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

The output of page.liquid:

Header
My page content
Footer

• A layout file can define multiple blocks.
• Block name is optional when there's only one block.

• Home
• Tutorial
  • Render a Template File
  • Caching
  • Use with Express.js
  • Partials and Layouts
  • Whitespace Control
  • Register Filters/Tags
  • Plugins
• API
  • Options
  • Builtin Filters
  • Builtin Tags
  • Operators
  • Truthy and Falsy
• Misc
  • Migrate to 9.0.0

Liquid for JavaScript, authored by harttle.