Metalsmith Templating

This post is part of a series on setting up a generated static site; You can start here

Setting up templating in your metalsmith project is a necessity, and extremely easy with metalsmith-templates. You can use pretty much any templating engine you choose, and that template is fed the json generated by Metalsmith and your other plugins for input.

In part one of this tutorial I indicated how important it is to structure your projects in a way that will minimize the impact of any mistakes you make. this library helps in this way by letting you choose from any of 20+ template libraries if you change your mind. I'm not saying choosing Handlebars as a template engine is a mistake, but I easily could have spent days researching and testing template libraries before selecting one. So I chose the template engine I have the mose experience with and will let me get the website going right now, with plenty of room for change.

In the initial commit for site I put in some starter templates for this project and registered a header and footer partial template. These use simple includes to get in a header and footer around the contents of your pages.

With the above files you can register these as partials for your other templates:

Now to tie these into the rest of the site, I have moved some of the posts around into the posts folder. See commit details

This will automatically use the metalsmith-collections plugin to automatically put the posts into a separate collection for listing on the home page.

This all will allow the listing of all of the posts from the post collection on the home page. Notibly missing is any pagination or any parsing of the short-form article. These will be handled when we add in some advanced templating and routing.

Lastly to note in all of the posts I have added plenty of additional data in the YAML portion of the documents for use in the posts and pages. This is also often how you can pass data to the various plugins you add to your project.

In part 3 we will explore the LESS file, styling and how not to over-do it.

By on