Snippets

Some times when we are creating a web site or application we need to reuse some of its parts like: the page header, page footer, sign in section, etc., avoiding duplication of code in every page. For these cases we can create what is known as snippets.

Snippets are in a nutshell small, independent and reusable HTML code portions, which after being pushed can be added to any page through the render_snippet directive.

        
            <div>
                {{ render_snippet('my-snippet', page) }}
            </div>
        
    

How to create and publish a snippet? #

To create an snippet we issue the following command:

        
            elemental-cms snippets create -s nav-bar
        
    

This will create 2 files at [your-snippets-folder] under the names nav-bar.json and nav-bar.html.

nav-bar.json

        
            {
                "_id": {
                    "$oid": "62602530f62a2bb120f9ce14"
                },
                "name": "nav-bar",
                "cssDeps": [],
                "jsDeps": [],
                "createdAt": {
                    "$date": 1650468144926
                },
                "lastModifiedAt": {
                    "$date": 1650468144926
                }
            }
        
    

nav-bar.html

        
            <div>_("This a new snippet.")</div>
        
    

n order to be able to use this snippet at our pages we must push it to the CMS database, using the snippets push command, like this:

        
            elemental-cms snippets push --snippet nav-var
        
    

Backup files #

If the snippet already exists a backup file will be created and stored at [your-snippets-folder]/.bak/nav-bar-[epoch-creation-time].json and [your-snippets-folder]/.bak/nav-bar-[epoch-creation-time].html