Modularization
In this section, we will go through the ways Jade views can be modularized at file and code level.
Includes
A Jade view file can seamlessly include other Jade files, CSS, JavaScript, and HTML files. If you have installed the markdown
Node module, you can include Markdown files too.
To include a file in a view, use the include
directive and pass it the path of the file to be included. It is very important to give the correct extension to the include files, because Jade uses the extension of the file to render the content accordingly.
Note
A Jade view file and its included Jade files share the same scope. So variables defined in one file are available to the other.
The indented hierarchy is applicable to the include
directive too, so the way you indent it is important.
Let's create an example to understand how include
works. In the views
directory of your app, create a new directory named includes
, where we will be creating the following include files:
A Jade file named
header.jade
...