Such file contains different kinds of global variables (navigation, buy-link, callto-link, layout switcher etc.). The _config.pug file is a configuration file.In most cases this applies to to the tags like, ,, contents of the tag and global includes used on every page ( _elements.pug, _config.pug).Example of the code used in the _skeleton.pug file: The _skeleton.pug file has code that should be included to all files.Please, note, that templates may have different files structure (some files like functions.pug, mixins.pug and folders may not be available specifically in your template). Typical structure of files inside the pug folder: Pug files allow editing website pages, scss files should be used for adjusting website styles. You can find the source files in the sources folder of your template (be sure to unzip the zip file with the source files). Under the partials folder, create a new file called mixins.pug with the following content.This tutorial shows how to work with CSS/HTML sources files (pug/scss) in our Multipurpose Website templates. First, let's create a partial file to declare our mixin.

We're going to skip some of the basic examples and go to a slightly more advanced one, using attributes in mixins. This is an excellent use-case for PugJS mixin functionality documented here. However, this would probably not be the most efficient way to go about it. How might we do this? We could probably figure out a way to do this with conditional logic as described in part 3. Furthermore, let's say you want to be able to style the form independently in each place. Let's say you have a form element that you want to use in multiple places throughout your application. To follow along, be sure your code is up to date with the last part. Let's get started!įor brevity, I won't list our starting code here. In this post, I will demonstrate how to use Pug to create reusable blocks of code with mixins.

In the last part, I covered using using 'partials' in PugJS. This post is the fifth in a short series on using the PugJS templating engine with nodejs and expressjs.

Example pug template