What the heck is front matter anyway? If we compare your dev tools to a book, front matter is like the first section of a book that contains the preface or details of the novel. In Panini, front matter is similar to a page’s preface but with a lot more powerful. Coupled with Panini’s variables and partials, front matter changes the content allowing you to be much more efficient and organized. Using front matter and Panini’s variables you can give your pages some brains — allowing you to make your reusable components more usable. In this lesson you’ll learn how to use front matter and Panini’s variables to define content on your pages like a pro.

The front matter is where Panini gets extra tasty

Any file that contains a YAML front matter block will be processed by Panini —it’s the brains of the operation. The front matter must be the first thing in your HTML file and must take the form of valid YAML (it’s very easy to pick up) set between triple-dashed hyphens. Here is a basic example:

Between these triple-dashed hyphens, you can set predefined variables (see below for a reference) or even create custom ones of your own. These variables will then be available to you to access using Panini’s handlebars both further down in the file and also in any layouts or includes that the page or post in question relies on. Best of all - front matter can be used on pages and partials.

Using Panini’s predefined global variables

Layout: you can define a layout for the page to use. If you leave this empty or do not define it, it will default to the default.html layout.

In the above example, all of the page's HTML will be injected into a blog.html file in the layout folder.

Page: Prints the name of the current page, without its original file extension. One example you might use this with is to set the meta title for each page automatically in your layout.

Root: Root: Adds your root directory to a URL ensuring that your file paths are always correct no matter what folder you are in.

Using the root helper with images:

Using the root helper with links:

Pro tip: No preceding / is needed after the root variable.

Customize your Panini: Make your own variables

You can make up your own variables to use on a page or inside a partial. The syntax is standard handlebars variable syntax:

These allow you to use a HTML partial as a template and inject content into it. Let’s take this hero as an example:

We have created a structure for our hero unit that can be re-used on any page. Because we are setting the values of the variables at the top of page in the front matter, this one hero partial can be used in all of them. Check out the front matter:

Notice that we can use Panini’s variables inside our classes — really anywhere in the HTML. Using variables in the classes as in this example allows us to set a different background image for each page using modifier classes from our CSS. The HTML looks like this:

Data in front matter

Panini Handlebars add minimal logic thanks to the use of some helpers (such as if, with, unless, each and more). Using these helpers, we can define what happens on the page using data in front matter.

For example we can include or exclude a specific component from a page. Say we have this partial called iur layout using the if helper.

Then at the top of our pages we can choose to include this component, or not.

Setting this to true will include the partial in the layout for the page. Leaving it out or setting to false will not include the partial.

We can even set data in our front matter. For example, a navigation component that can change based on page would be best off using some of Panini’s helpers to change content rather than coding multiple versions.

The front matter can handle data to help you define what content shows for each page:

Don’t worry! We’ll cover Panini’s helpers in depth later in the series and data next week.

---