html-template-engine

Include other HTML files into your code using pure HTML tags, no need to know Javascript (or any other language).

Usage no npm install needed!

<script type="module">
  import htmlTemplateEngine from 'https://cdn.skypack.dev/html-template-engine';
</script>

README

HTML Template Engine (live demo)

Include other files into your current file:

<!-- Include other html files into your own -->
<span require-file="./parts/footer.html"></span>

Instalation

  • Using NPM
$ npm install html-template-engine --save
  • Or using a simple script tag before your body closing tag and use the autoload feature to avoid using any Javascript whatsoever.
<script type="text/javascript" src="html-template-engine.min.js?autoload"></script>

Important! Please notice the ?autoload at the end of the script url, here is the library code

Usage (Remember to install the library first)

On your HTML paste the following code whenever you want to include another html file

<!-- Include other html files into your own -->
<span require-file="./parts/footer.html"></span>

<!-- You can also include svg files -->
<span require-file="./parts/images/name.svg"></span>

Only for NPM installations:

import TemplateManager from 'html-template-engine';

//if you want to load the templates when the website finishes loading
window.onload = function(){ TemplateManager.start(); }

Additional Available Params

  1. Log on the console all the pieces being loaded into the html
    <body log-template-requests="true">
  1. Set a base template path for all your url's
    <body base-template-path="./parts/">
    ...
        <span require-file="footer.html"></span>
    </body>

Authors

Alejandro Sanchez Alejandro Sanchez @alesanchezr alesanchezr.com