You are here

Includes: The Building Blocks of Code

Submitted by Kady on June 30, 2015 - 12:37pm

NationBuilder's webfiles are organized into various levels of .html files, each pulling in different pieces of the site at increasingly more granular levels.

The meta-level file is called "layout.html". This is the file that pulls in the Doctype information, and includes the head of the site, as well as the opening and closing body tags, and is used by nearly every forward-facing page template.

Within the layout.html file, other pieces of the site are pulled in from separate .html files via liquid "include statements". These statements appear as such in the code: {% include "filename" %}, where the "filename" is an html file saved elsewhere on the site. This system keeps the meta-level code neat and well organized.

NationBuilder has its own standard set of "Includes" which it uses in its default templates. You can access and modify those files by going to the "Theme" tab under "Pages". At the bottom of the default templates page is a list called, "Includes". One example of this is the code for the top navigation, which is called in via an include called "nav". Find that include statement in the layout.html file: {% include "nav"%}.

Note that it is very possible to have include statements within include files. For example, layout.html has a series of include statements, which are called either "columns 1" or "columns 2". Those files determine whether the page will appear with or without the sidebar. If you go into either of those files, you will find a whole new level of include statements, which call in more specific pieces of code.

When you are creating custom pieces of code for NationBuilder, it is helpful to use this same system of include statements and files to keep your code well organized and neat. Instead of putting your code directly into the layout, create a new file under "Theme">"Current Custom Theme">"New File". Make sure you follow the appropriate naming convention when saving your file: "_filename.html". Then, when calling your include file in, remove the leading underscore and the ".html". Ex: {% include "filename" %}