templatejs

Node.js package for HTML / PHP / CSS / JS template files

template.js

This module helps to build web sites based on templates. It supports HTML, PHP, JavaScript and CSS files (so far).

npm install template.js

A template file is a file with comments that declare fields. Input files are used to fill these fields.

Example template file (template.html):

<!DOCTYPE html>
<html>
    <head>
        <!--decl:head$-->
        <!-- Include scripts and stylesheets here... -->
    </head>
    <body>
        <div id="header">
            <!-- Some static content here -->
        </div>
        <div id="content">
            <!--decl:content$-->
        </div>
        <div id="footer">
            <!--decl:copy$-->
        </div>
    </body>
</html>

Input file 1 (page.html):

<!--start:content$-->
<h3>Year: <!--decl:year$--></h3>
<!--end:content$-->

Input file 2 (constants.html):

<!--start:year$-->2012<!--end:year$-->
<!--start:copy$-->&copy; Copyright <!--decl:year$--><!--end:copy$-->

By default templatejs supports two kinds of comments:

  • HTML comments: <!--command:NAME$-->
  • PHP / JavaScript / CSS comments: /--command:NAME$--/

Although this module can be used in other node.js scripts I recommend using the standalone binary.

You can translate these files into a single HTML document using the following command:

templatejs template.html page.html constants.html

This will print the resulting document to stdout.

Calling

templatejs template.html page.html constants.html > page.html

will synchronize the file page.html with the template. This is extremely useful if you want to have a single template file but dozens of files looking the same.

There is only one problem with the above command: For example, it is impossible to do something like the following:

<html lang="<!--decl:lang$-->">
    <head>
        <title><!--decl:title$--></title>
    </head>
</html>

The output would be similar to this:

<html lang="<!--start:lang$-->en-US<!--end:lang$-->">
    <head>
        <title><!--start:title$-->My Page<!--end:title$--></title>
    </head>
</html>

The generated field declarations will interfere with attributes or tag contents. The solution is to add the --production switch. This will strip all field declarations from the output. With the flag the output looks like this:

<html lang="en-US">
    <head>
        <title>My Page</title>
    </head>
</html>

Never overwrite existsing files with the output when using the production flag! Doing that would delete all field declarations in your source file!

  • Use the normal mode to sync your documents with your template
  • Use the production mode to generate the files served by your web server

You can specifiy the language with the --language parameter. To enable HTML comments in PHP files:

templatejs --language html template.php input1.php input2.php...

If you want to use the production mode in combination with a forced language you will have to specify the language first:

templatejs --language html --production template.php input1.php input2.php

This is the very first release of template.js. Although there are no known bugs or issues you should care about nested templates. They are meant to work but there is no guarantee.