https://github.com/nidorx/html-improved
Adds improvements to html templates
https://github.com/nidorx/html-improved
Last synced: 6 months ago
JSON representation
Adds improvements to html templates
- Host: GitHub
- URL: https://github.com/nidorx/html-improved
- Owner: nidorx
- License: gpl-2.0
- Created: 2015-04-29T18:00:00.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T18:48:01.000Z (almost 3 years ago)
- Last Synced: 2025-03-24T08:48:24.410Z (7 months ago)
- Language: JavaScript
- Size: 174 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-improved [](https://travis-ci.org/nidorx/html-improved) [](https://www.npmjs.com/package/html-improved)
Html template engine, inspired by [jade](https://github.com/jadejs/jade)
Adds improvements to html templates
## Sample Project
[html-improved-sample](https://github.com/nidorx/html-improved-sample)
# Reference
## Includes
Includes allow you to insert the contents of one HTML file into another.
```html
...
```
### Including Plain Text
Including files that are not HTML (.html, .html, .xhtml, .xml) just includes the raw text.
```html
...
```
## Template inheritance
**Html Improved** supports template inheritance via the `` and `` 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*.
```html
some footer content
```
Now to extend the layout, simply create a new file and use the `` 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".
```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.
```html
nothing
nothing
```
```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:
```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:
```html
```
## Variables
**Html Improved** makes it possible to define variables that can be used in your templates, using `` tag.
```html
#{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 ``.
```html
Description
#{description}
Description
Has no description
No content provided
Description
foo bar baz
```
### String Escaped
To escape safely strings, just use the operator `#{` and `}`.
```html
This will be safe: #{theGreat}
```
will output
```html
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.
```html
Joel: !{riskyBusiness}
```
will output
```html
Joel: Some of the girls are wearing my mother's clothing.
```
### Iteration
**Html Improved** supports one primary method of iteration, ``.
**Html Improved** iteration syntax makes it easier to iterate over arrays and objects within a template:
```html
-
#{$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.
```html
- foo
- bar
- baz
- foo
- bar
- baz
```
They can take required arguments:
```html
- cat
- dog
- pig
```
### Mixin content
Mixins can also take a block of HTML to act as the content:
```html
#{title}
#{authorName}
!{$content}
No content!
This is my
Amazing article
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.
```html
bar
```