LocomotiveCMS

The Locomotive V3 Developer Hub

Welcome to the Locomotive V3 developer hub. You'll find comprehensive guides and documentation to help you start working with Locomotive V3 as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

A snippet is a part of a website which will be re-used in multiple pages. Snippets reduce code duplication.

Reusable code: snippets

Let's create a sidebar snippet. Use the command line generator to create a snippet:

bundle exec wagon generate snippet sidebar

You will be asked if you prefer HAML template: if you're not familiar with HAML, answer 'n'.

You will also be asked if you want a localized template: answer 'n'.

A snippet file will be created.

+- app/views
    +- pages
        +- index.liquid
    +- snippets
        +- sidebar.liquid

In sidebar.liquid:

<div id="sidebar">
  the sidebar
</div>

Including the sidebar in a template:

<html>
  <head>
    <title>Snippet example</title>
  </head>
  <body>
    <header>
    </header>
    <div id="content">
      Page content
    </div>
    {% include 'sidebar' %}
    <footer>
    </footer>
  </body>
</html>

Editable elements inside snippets

It is possible to use editable_text or any other editable elements inside snippets but you need to wrap them inside a block in order to make them display properly in the engine.

In this example we would wrap the sidebar code inside the {% block 'sidebar' %}.

Snippets


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.