I just recently wrote a post on the node.js powered html template engine called pug, and mentioned that I have some experience working with ejs, which so far I seem to like the best when it come to doing this sort of thing in a node.js environment. However so far I have not wrote a post on ejs, so why not get one together right?
ejs is a popular template format used in many node.js projects, and is one of several options that works out of the box in hexo.
Once that is done I made an ejs folder in the root path of test_ejs, this is where I placed my ejs files. Also within the ejs folder I also placed a _parts folder for my ejs partial files.
The whole point of EJS, or any template engine and language is to ultimately render plain old HTML which will be written out as HTML files, or delivered to the client on demand if we are talking about some kind of advanced content management system rather than the simple static site generators that I often work with.
So lets start out with a basic example of this. In my project folder I made a basic.js file that looks like this.
Here we have the whole idea of this to begin with at a very simple, and easy to understand level. I give the render method of the ejs package a string of ejs markup, and an object containing values that can be used when rendering out the HTML. There is a great deal more to cover of course, but you should see where this is going.
Will give me
I can also use if statements, and methods like array.forEach in a similar manor.
There is an actual syntax for comments like this:
I can also use html comments but those will render of course, as long as that is not a problem that is yet another option for commenting.
It is possible to pass a data object to a template that can contain useful data. The key value pares will become variables, and values in the global scope when working within the ejs template. This is the second argument that is given after the template, and before an optional options object.
The object can also contain methods, but the methods can not do anything that requires an asynchronous task, such as reading a file. So anything like that will have to be done before hand, and then appends to the object.
It is possible to change the delimiters from percentage sines to something else if need be. This can be done by setting the delimiter properties of the options object that is given after the data object. It can also be set globally by setting the delimiter property of the ejs object.
So I could use nodes filesystem module to read an external file, and pass that to the render method. However there is also a renderFile method in ejs itself that can be used which is what I will cover here.
So I made a readfile.js file in the root space of test_ejs like this:
Now I am ready to read an *.ejs file in the ejs folder, or at any path that I pass to readfile.js when calling it from the command line. So the first.ejs file in the ejs folder looks like this:
So now when I call my readfile.js script from the command line interface to read this file I will get the following html:
Partials are a great way of breaking my templates into many smaller components that come together to make an overall layout for a website. As I mentioned earlier I placed a _parts folder in my ejs folder, this is for said partials.
One way to do this is to have some kind of layout.ejs that will have the certain components of an html document that are consistent with all pages, such as the doctype, and a meta tag that tells the browser I am using utf-8 charset encoding.
So in the /ejs folder I have that layout.ejs file that looks like this:
And as you can see I am using a nav.ejs file using the include method. This nav.ejs file will render html that has to do with site navigation.
here is the nav.ejs file at /ejs/_parts
EJS is a great solution for making templates in a node.js environment, maybe some of these other solutions have there strengths, pug does have a pretty clean, and easy to follow look to it, but I seem to enjoy dealing with ejs the best.