I have a static html site:
index.html
I want to use handlebars {{username}} to inject a username variable. It looks like:
res.render('index', {username:'MyName'})
should work. The problem is my index.html is in my '/static' (my express.static()) directory. What is the best way to get my username variable into my html page without having to convert it to something that doesn't look like html? Thats why I dont want to use jade and prefer handlebars. If there is some other way, it would be best.
Update: I would like to preserve the same structure I have (keeping everything in my static directory) as opposed to moving things out to a "views" directory. Is this possible?
Then you must have to use Template engine. You can use Jade it also support HTML, only you have to use . at end of tag like:
doctype 5
html. // THAT DOT
<body>
<div>This is jade testing with HTML</div>
</body>
Is there a way to keep the file in my /static directory without having
to put it in the "views" directory?
Yes you can use _dirname while rendering
app.get('/anyurl/' , function(req, res){
res.render(__dirname + '/../static/path/folder') //modify path according to your structure
});
Related
I need to access the variable user in my client-side that sent by
res.render('home.html', { user: req.user });
without using template engines like pug or ejs
Is that possible?
HTML is not a templating language, so it can't be used to send variables.
res.render() function compiles your template , inserts locals there, and creates html output out of those two things. The syntax is as follows -
res.render(view [, locals] [, callback])
The view argument is a string that is the file path of the view file to render. For this to work, you need a template or view engine .
In html, you can't dynamically pass/insert data variables. That's the main use case for templating engine. They put runtime/dynamic value in html which is what you are probably looking for.
In short, its better to use any template engine like pug,jade,ejs, etc most of which would have almost similar syntax with html to render dynamic html pages. I don't think there's any method (atleast simple enough) to send variables dynamically from server to client in an html page. Using a template engine would be the best choice in your use case.
For eg. you are passing user from server side and most probably want the passed variable to be rendered on the client side. You can just install an view engine like ejs - npm install ejs, set your view engine in app.js - app.use('view engine','ejs'); , and just add this line in the html page where you want to send the variable to client side like - <p> <%= user %> </p> and that's it. Keep your html file in view folder and this would do it.
I am trying to create a Node website with a header ejs file that is included on each page.
When I load my index.ejs page, I would also like to pass a variable from my server to my header page.
I could be wrong, but it seems like the best way to do that is to pass that variable from the server, to the index page, then to the header.
Currently, the only example I've seen of this is the following code snippet:
<%- include("header",{title:"your_title"}) %>
The catch is that I would need to replace "your_title" with a title variable that I set serverside.
Is there a way to do this?
My hunch is that it may look like the following:
<% runHeader = function(title){ %>
<%- include('../partials/header', {title: title}); %>
<%}; %>
Unfortunately, include does not seem to run properly here, and the header does not load at all.
Any help would be much appreciated!
so the best way I found for this to work is to make a a "views" folder under your project folder. The views folder will have an ejs file with the name of "title.ejs" the call should then look like <%- include("title") -%>this will look for the ejs file in the same directory. I'd say in the title file add some sample HTML then everything should work.
Make sure that you have NPM installed ejs, then in nodefile use const ejs = require("ejs"); and app.set('view engine', 'ejs'); and app.use(express.static("public"));in the same node.js file.
Hope this makes sense and good luck.
For a templating system like Jade, is it better to put page-specific (that is, used on only 2-3 pages) javascript in its own .js file in a public directory (to be included with a <script> tag), or to write it in its own .jade file to be included straight into any html files? I.E., should I do this:
page.jade
script(src="/path/to/file.js")
file.js
$(document).ready(function() { /* do a thing */ });
or this:
page.jade
block script-file
include scripts/file
scripts/file.jade
block script-file
script(type="text/javascript").
$(document).ready(function() { /* Do a thing */ });
It seems like the second would result in fewer HTTP requests, which is a good thing, right? But then, it seems somewhat outside the intended use case for Jade to be hosting clientside javascript in a serverside template. Which do people use in practice? Which is actually better?
I have a folder of static html files files as part of an existing project. I would like to find the simplest way to serve these via node/express using jade. There is a common head/menu/header section at the top that I would like to strip out and put in the jade template, a common section of js includes at the bottom that should also be in the template, and I would like to send a couple variables (e.g. the user) from the server. I would very much appreciate a pattern of how to do this that shows:
the route and controller for the render and how to set up the corresponding static serving with node
the sections of content in the jade files
where the static files should be stored
how jade links together blocks with the same class/id.
Thank you.
You can just read the static files with fs and then pass the data of each file through res.render('page', {contentHTML: data}). In the client page use the != operator to unescape the data and inject it to the view.
For example:
static.html (suppose that the file is in the views folder)
<div>
<p> some text </p>
</div>
Server: (suppose this code is in the routes folder)
router.get('/static', function(req, res){
fs.readFile('./views/static.html', function(err, data){
res.render('page', {responseHtml: data});
});
});
page.jade: (suppose this view is in the views folder)
extends layout
block content
div!= responseHtml
The app structure is this:
-example
...
-routes
index.js (here is the code show above, in the Server section)
users.js
-views
...
page.jade (client code show above)
static.html (content to load in page.jade)
app.js
package.json
I setup node and express then integrated the mustache.js template by following the instructions on this page:
http://bitdrift.com/post/2376383378/using-mustache-templates-in-express
So far so good, except I'm having a lot of trouble trying to setup mustache.js to have the same functionality as Jade's "layout". I'm basically trying to setup 1 master file to serve as a shell for my other pages similar to extending a template with Django.
Ex. The layout file could have this:
[html]
[title]my title[/title]
[body]{{content}}[/body]
[/html]
Where {{content}} gets replaced with the contents of a file which I would specify somehow in the route for that page.
I just have no idea how to set this up with express because I'm still a huge newbie with it and the way it's setup with Jade is automagical which seems to be specific to Jade only.
With Jade you just need to make a "layout.jade" file and have something like this as your route:
app.get('/', function(req, res) { res.render('home', { title: 'My home page' }); });
Then it magically adds the contents of home.jade into your layout.jade file wherever you specified the body!= body tag.
So yeah, how can I set something like that up with Mustache? If you know the answer please explain it step by step.
You could write a stache renderer plugin for docpad