Almost every project will have some HTML code that should be on every page – usually at minimum something in the header and something at the end of the body. Since there is no browser-native way to do this without repetition or an awkward source code structure, Vanilla Plus JS provides a preprocessor command to import raw HTML source code into your document. Furthermore, it provides a very simple stack if you need to make some modifications based on context.
Templates are stored in the src/partials
directory and they are referenced relative to that directory. So, for
example, if you have a template at
src/partials/head/standard.html,
then it is imported using
<!--[TEMPLATE: ["/head/standard.html"]]-->If you want to use the stack, you pass variables using a json object:
<!--[TEMPLATE: ["/head/standard.html", {"title": "Try it Now"}]]-->And access them as follows:
<title><!--[STACK: ["retrieve", "title"]]--></title>