I want to focus on learning how to build things in node without having to fiddle about with the jade syntax. I want to know if its possible to blend native html syntax in jade templates along with its looping syntax etc.If so how. If not, is there a template engine for node that will allow this.
Thank you.
For sure you can blend plain HTML and Jade code, just use Piped Text.
For example:
| Plain HTML
Here an example from the Jade Online Demo (actually great to play around with and test some sort of things!):
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 Jade - node template engine
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it!
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
| Plain HTML
with this test data:
{
pageTitle: 'Jade Demo',
youAreUsingJade: true
}
generates this code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade Demo</title>
<script type="text/javascript">
if (foo) {
bar(1 + 5)
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p>
</div>Plain HTML
</body>
</html>
Related
I am using Express-Handlebars as my templating engine and I use a layout for all my views. However, I want to be able to add scripts via the view for specific pages. Very much like in this example: is there a way to add CSS/JS later using EJS with nodejs/express
I want to add my scripts after the standard scripts that are used for all pages(bootstrap, jquery). These are placed at the bottom of body in my layout, like so:
<html>
<header>
...
</header>
<body>
...
{{{body}}}
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
How would I go about doing this using Handlebars? Or is my best bet to use EJS? Or can I use both?
Any help is much appreciated,
Freece
Never mind! I realized that that method would contradict the foundations of Handlebars. Instead I added the following to my controller:
var scripts = [{ script: '/js/myTestScript.js' }];
...
res.render('contact', { title: 'Kontakt', scripts: scripts });
And in my layout it looks like this:
...
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
{{#each scripts}}
<script src="{{script}}"></script>
{{/each}}
I'm looking for alternatives to Jade templates in express 4.x because I really don't like Jade's syntax. I'm tending towards EJS, because it's basically just HTML on steroids.
However, one really nice feature of Jade templates is the ability to use layouts. I've found https://www.npmjs.org/package/express-ejs-layouts, but it seems to be made for express 3 and its build is failing :/.
I also found https://www.npmjs.org/package/ejs-mate which is made for express 4.x but it only seems to support a single content block (body).
I would like to have something like this:
layout.something:
<html>
<head>
<% block styles %>
<% block scripts %>
</head>
<body>
<% block body %>
</body>
</html>
index.html:
uses layout "layout.somehing"
scripts:
<script src="my_custom_script.js"></script>
styles:
<link rel="stylesheet ...></link>
body:
<h1>This is my body!</h1>
So that this yields:
<html>
<head>
<link rel="stylesheet ...></link>
<script src="my_custom_script.js"></script>
</head>
<body>
<h1>This is my body!</h1>
</body>
</html>
Does anyone know an engine that is capable of that besides Jade?
You can try express-handlebars, it supports layout and partial views.
I've had a quick skim of the Jade documentation and I can't seem to figure out how to apply a wrapper to all templates that I output.
How is this usually done?
It sounds like you want template inheritance:
// layout.jade
!!!5
html
body
block content
The content block is what you define in all templates that are going to inherit the layout template:
// index.jade
extends layout
block content
h1 Hello World!
When you render index.jade, this is the result:
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>
So in layout.jade, you set up all common elements like JS/CSS, headers/footers, etc.
I have the following template:
<!DOCTYPE HTML>
<html>
<head>
<link href="css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/libs-0001.js" async="async"></script>
<script type="text/javascript" src="/js/app-0004.js" async="async"></script>
<script>
var name = {literal}<%= name %>{/literal};
var version = {literal}<%= version %>{/literal}};
</script>
</head><body></body></html>
Like in smarty, from php, I want to use {literal} declarations in the template, under the script session.
How to do this in locomotivejs views?
As far as I understand {literal}/{/literal}, everything between those tags isn't interpreted. EJS templates don't have something similar, although there are ways of circumventing that.
One way is to configure EJS to use different open/close tags, described here.
Another way is to use a different templating engine altogether, which isn't too difficult since LocomotiveJS isn't hardcoded to using EJS templates. I like the Swig templating engine myself, which has the {% raw %} tag that seems to do the same as {literal}.
I'm new to Haxe, and I'm trying to experiment with Ufront.
I got a problem using Erazor templates: I don't understand how to escape HTML when outputting variables.
With this simple template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Users list</title>
</head>
<body>
<ul>
#for(user in users)
{
<li>#user.name</li>
}
</ul>
</body>
</html>
If any of the users has name '<script>', then the template will simply output <script> for its name.
How can I properly HTML escape in Erazor?
How to HTML escape view arguments
In order to HTML escape an argument in your Erazor views,
you could simply use the HTML helper method encode().
Supposing your argument is called pageContent and its value is:
<script>
alert("BAD things could happens if you don't properly escape!!");
</script>
You can escape it using following code:
#Html.encode(pageContent)
Your template will be safely rendered as
<script>
alert("BAD things could happens if you don't properly escape!!");
</script>
Html.encode() internally uses StringTools.htmlEscape() in order to escape its argument.
Thanks to the kindly help of Franco, I've written a page on the Ufront site to explain how to HTML escape in Ufront.
Ufron automatically includes the helper class that contains the desired method:
<li>#Html.encode(user.name)</li>