Create Pages With Pre-compiling The Templates

January 31, 2023 Post a Comment

In my current project, my work is only with html and css (HTML skinning). There are many pages which have repeated sections like Header, footer, sharing links etc. I don't want to

Solution 1:

You can use Jade - node template engine

It gives option to include external jade files, where in it allows you to insert the contents of one jade file into another

index.jade:

doctype html
html
  include ./includes/head.jade
  body
    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade

head.jade

//- includes/head.jade
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

foot.jade

//- includes/foot.jade
#footer
  p Copyright (c) foobar

Compiles to:

index.html

<!doctype html>
<html>
  <head>
    <title>My Site</title>
    <script src='/javascripts/jquery.js'></script>
    <script src='/javascripts/app.js'></script>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    <div id="footer">
      <p>Copyright (c) foobar</p>
    </div>
  </body>
</html>

Solution 2:

Explanation:

Whenever I used to search on google for "pre-compiling templates", I was ending up on sites which were combining all the HTML template files to one single js file. But in my case, I was looking for a way to compile the templates completely on system itself with no support of a "all template compiled js file". (So, I was looking for a solution which pre-renders the HTMLs)

Answer :

I found this awesome template engine, Nunjucks, which lets me compile the HTML templates to Independent HTML pages when used with gulp.

Check this one, gulp-nunjucks-render. By using this along with gulp, I am able to include section of .html files into other .html files. Here is the code (assuming you installed nodejs and gulp):

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');

gulp.task('default', function () {
    nunjucksRender.nunjucks.configure(['templates/'], { watch: false });
    return gulp.src('templates/!(_)*.html')
        .pipe(nunjucksRender({
            css_path: "../assets/css/",
            js_path: "../assets/js/",
            img_path: "../assets/images/"
        }))
        .pipe(gulp.dest('html'));
});
gulp.task('watch', function () {
    gulp.watch(['templates/*.html'], ['default']);
});

In the above code, I am keeping the HTML templates in templates folder and with the above gulp code, I am generating the new HTMLs in html folder. The above code will not generate the files which are prefixed with _. (something similar to sass)

and later in command prompt:

gulp watch  // Watches the files for changes continuously --> OWNING :D

Here is an example:

<!-- // Index.html -->
<!DOCTYPE html>
<html>
    {% include "_head.html" %}
    <body>
        {% include "_content.html" %}
        {% include "_footer.html" %}
    </body>
</html>

Which renders to:

<!DOCTYPE html>
<html>
    <head>
        <title>Website title</title>
        <link  href="../assets/jcss/main.css" type="text/css"/>
    </head>
    <body>
        <div class="page">
            <!-- content here -->
        </div>
        <div class="footer">
            <!-- footer content here -->
        </div>
    </body>
</html>

Advantages:

No need of server support to compile the templates.
No need to include any pre-compiled js file in index.html.
Whenever we do some change in common section, no need to include that section again in every page.

Disadvantages:

Till now, I didn't find any :).

Free Interactive Html5 Tutorial