html-improved
Html template engine, inspired by jade
Adds improvements to html templates
Sample Project
Reference
Includes
Includes allow you to insert the contents of one HTML file into another.
...
Including Plain Text
Including files that are not HTML (.html, .html, .xhtml, .xml) just includes the raw text.
...
Template inheritance
Html Improved supports template inheritance via the <block/>
and <extends/>
keywords.
A block is simply a "block" of HTML that may be replaced within a child template, this process is recursive.
Html Improved blocks can provide default content if desired, however optional as shown below by block scripts, block content, and block foot.
<!-- layout.html --> some footer content
Now to extend the layout, simply create a new file and use the <extends/>
tag as shown below,
giving the path (with the extension). You may now define one or more blocks that
will override the parent block content, note that here the foot block is not
redefined and will output "some footer content".
<!-- page-a.html --> title
It's also possible to override a block to provide additional blocks, as shown in the following example where content now exposes a sidebar and primary block for overriding, or the child template could override content all together.
<!-- sub-layout.html --> nothing nothing
<!-- page-b.html --> ...
Block append / prepend
Html Improved allows you to replace (default), prepend, or append blocks.
Suppose for example you have default scripts in a "head" block that you wish to utilize on every page, you might do this:
<!-- layout.html --> ...
Now suppose you have a page of your application for a JavaScript game, you want some game related scripts as well as these defaults, you can simply append the block:
<!-- page.html -->
Variables
Html Improved makes it possible to define variables that can be used in your templates, using <vars/>
tag.
#{pageTitle} #{pageAuthor}
note that pageAuthor and page-author forms define the same variable (pageAuthor).
Whenever you define a variable, all previous definitions of this variable will be overwritten.
Conditional
Html Improved has syntax for conditional rendering of html blocks through tag <if />
.
Description #{description} Description Has no description No content provided <!-- will output --> Description foo bar baz
String Escaped
To escape safely strings, just use the operator #{
and }
.
This will be safe: #{theGreat}
will output
This will be safe: <span>escape!</span>
String Unescaped
You don't have to play it safe. You can buffer unescaped values into your templates using !{
and }
operator.
Joel: !{riskyBusiness}
will output
Joel: Some of the girls are wearing my mother's clothing.
Iteration
Html Improved supports one primary method of iteration, <each />
.
Html Improved iteration syntax makes it easier to iterate over arrays and objects within a template:
#{$key} - #{$value} #{$key} - #{$value} #{$key} - #{value} #{key} - #{value} #{$key} - #{$value.name} #{$key} - #{value.name} #{key} - #{value.name} #{key} - #{subKey} - #{subValue}
Mixins
Mixins allow you to create reusable blocks of HTML.
<!-- Declaration --> foo bar baz <!-- Use --> <!-- Will output --> foo bar baz
They can take required arguments:
<!-- Declaration --> #{name} <!-- Use --> <!-- Will output --> cat dog pig
Mixin content
Mixins can also take a block of HTML to act as the content:
<!-- Declaration --> #{title} #{authorName} !{$content} No content! <!-- Use --> This is my Amazing article <!-- Will output --> Hello world John Doe No content! Hello world John Doe This is my Amazing article
Mixin Attributes
Mixins also get an implicit attributes argument taken from the attributes passed to the mixin and variables.
<!-- Declaration --> #{name} <!-- Use --> <!-- Will output -->bar