Reusing Code Across Multiple Pages

This guide will help you reuse code across multiple pages using partials.
Partials are pieces of code extracted to their own files to maintain code readability, and follow the rule of DRY – Don’t Repeat Yourself.

Requirements

To follow the steps in this tutorial, you should have created a page and a layout before.

• Creating a Page
• Creating a Layout

Steps

Reusing code across multiple pages using partials is a two-step process:

Step 1: Create a partial

This tutorial uses the previously created application.liquid layout:

...
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
...
<h1>Layout</h1>
{{ content_for_layout }}

Create a partial file meta_tags.liquid in the app/views/partials directory. The content of the partial is the extracted meta tags from the layout:

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Step 2: Include the partial

In the original layout, include the meta_tags.liquid partial. Partials resolve from views/partials, so in the include you only have to specify the name of the partial in the views/partials directory.

...
  {% include 'meta_tags' %}
...
<h1>Layout</h1>
{{ content_for_layout }}

Deploy or sync your changes. Pages using the layout are displayed the same. When you check their source code, you can learn that the meta tags have been injected into the layout and thus the pages from the partial.

You can use partials with CSS, Javascript, etc. or include yield, content_for tags, etc.

Next steps

Congratulations! You have reused code across multiple pages using partials. Now you can learn about using assets.

• Using Static Assets on Your Pages