1.0.3 • Published 5 years ago
ezrender v1.0.3
HTML template renderer for Node.js Express applications
Installation:
npm install ezrender
Server Overview:
- Configure in your server.js file (or wherever you've configured Express)
The '/public/html' path parameter in the first 'app.set()' statement should point to the directory where your HTML templates and partials are stored
const app = express(); const ezrender = require('ezrender'); app.engine('html', ezrender); app.set('views', '/public/html'); app.set('view engine', 'html');
Controller Overview:
- Input patterns are in the 'patterns' property of the 'options' parameter
The 'options' object has the following structure. The 'decorations' property is optional, but if present will be applied to all {{{ patterns }}} unless overridden by the pattern's own style. In the following example values stored in a user's cookie are being rendered.
let cookieValues = JSON.parse(req.cookies.cookie_name).cookie_properties; let options = { decorations: { style: '<span style="color: deeppink">@@@</span>' }, patterns: { 'email': { value: cookieValues['email'], style: '<span style="color: skyblue">@@@</span>' }, 'first-name': { value: cookieValues['first-name'] }, 'last-name': { value: cookieValues['last-name'], style: '<span style="color: orange">@@@</span>' }, 'main-content': { value: 'This is any arbitrary content....' }, 'copyright-notice': { value: 'Copyright ME, 2019', style: '<span style="font-size: 100px;">@@@</span>' } } } res.render('template-file-name-without-extension', options);
Parameters:
- filePath {string} file name to read, minus extension
- options {object} input options (see description for important details)
- callback {function} callback function from Express
Returns:
- callback {function} function with rendered HTML as a parameter
Template Overview:
- In the template the following are matched and rendered:
- {{{ patterns }}} are rendered with styles, if they have a 'style' property
- {{ patterns }} are rendered without styles, even if they have a 'style' property
- {{% partials %}} are filenames of partials which are imported before any other patterns are rendered
- Base template
- If the path is the same as in the Server Overview, the actual location would be '/public/html/template-file-name-without-extension.html'
{{% header %}} {{{ first-name }}} <input type="text" value="{{ first-name }}" /> {{{ last-name }}} <input type="text" value="{{ last-name }}" /> {{{ main-content }}} {{% footer %}}
- Header template
- If the path is the same as in the Server Overview, the actual location would be '/public/html/header.html'
{{{ email }}}
- Footer template
- If the path is the same as in the Server Overview, the actual location would be '/public/html/footer.html'
{{ copyright-notice }}
- Rendered output:
<span style="color: skyblue">me@you.email</span> Joe <input type="text" value="Joe" /> <span style="color: orange">Blow</span> <input type="text" value="Blow" /> <span style="color: deeppink">This is any arbitrary content....</span> Copyright ME, 2019 <!-- No styling here, due to the {{ pattern }} ignoring styles -->