I'm learning nodejs at the moment and my .ejs template files are pretty much standard (header, footer, js-defaults etc) - and the only thing that changes it the content in a HTML div.
I thought I could set a variable in my route and pass it along to the view (like you would a title or another variable), then include it - but it's not working (example below).
In Ruby you can do this with "yield" and I am trying to do the same with EJS.
Thanks for taking the time to read (and please forgive my ignorance in this matter).
Example Route
app.get('/fish', function(req, res) {
res.render('fish' {
title:"Fish",
template:"view/partials/content/fish.ejs"
});
});
Example EJS
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<% include views/partials/template/header.ejs %>
<body>
<div class="container">
<!-- Dynamic content here -->
<% include template %> <!-- tries to load template.ejs %>
</div>
</body>
<% include views/partials/template/footer.ejs %>
<% include views/partials/template/js-defaults.ejs %>
</html>
Looks like this is now supported in EJS. It was introduced in v2.0.1: 2015-01-02. The new syntax looks like this
<!-- Dynamic content here -->
<%- include(template) %>
To get this to work I had to disable caching in Express by setting:
app.set('view cache', false);
Related
I have a layout.ejs file that provides the basic layout of every page that I have for my node application. This includes some basic CSS files (i.e bootstrap). I have other ejs files that have their body rendered using that layout.ejs file but I also want them to be able to include their own CSS files for some custom styles.
I've tried to include the CSS directly in the other ejs files but that just sets the css file in the body of the html. I have thought about using a javascript file that injects the CSS file client-side but this feels too 'hacky' for me.
Currently, my test layout (the one that inherits from layout.ejs) looks essentially like this:
<head>
<link href="../public/styles/index.css" rel="stylesheet" type="text\css">
</head>
<section id="box-section" class="blox-mf route">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="title-box text-center">
<h3 class="title-a">
Title2
</h3>
<p class="subtitle-a" style="color: #be3131;">
Subtitle 2
</p>
<div class="line-mf"></div>
</div>
</div>
</div>
</div>
</section>
<script src="/scripts/index.js" crossorigin="anonymous"></script>
As I said, all I have is a css attached to the body of the html and not in the header so everything keeps the default style as the layout.ejs file. Is there a way I can achieve this by finding a way to get different routes to use the basic layout css files but allow for some variation using their own css?
I found a method to do this. All it takes is to have a variable passed into the template ejs that is an array of URIs to your css files. The ejs then loops through the array and creates the template with the required css files.
Here's the code for passing through the css files:
myCss.push({
uri: 'public/styles/index.css'
})
res.render('./home', {
styles: myCss,
});
And then on the template, all you have to do is:
<% for(var i=0; i < styles.length; i++) { %>
<link href="<%= styles[i].uri %>" rel="stylesheet" type="text/css">
<% } %>
Now all the sheets you need for a route can be passed on. A bit of code refactoring is necessary to replace having to add the links manually but you can get the essence of it.
EDIT:
This requires some setup to serve static files. You can do this by including this in your express application:
app.use(express.static(__dirname + '/public'));
I'm using the sails.js framework
I want to know if there is a way for a view to use only one css file, not the other ones being declared in the layout?
That is, ignore the other css definitions and use only one.
Is that possible?
Yes. Inside of the method that renders your view, return a value that references the stylesheet you want to include.
return res.view('someTemplate',{
myStylesheet: 'link/to/your/stylesheet.css'
})
Then, edit your layout.ejs file to include the stylesheet if our new value is present.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
...
<% if(myStylesheet) { %>
<link rel="stylesheet" href="<%= myStylesheet %>">
<% } %>
<!--STYLES-->
<link rel="stylesheet" href="/some/other/stylesheet.css">
<!--STYLES END-->
...
...
...
The EJS template pre-processor will now only include the stylesheet you specify if a value is provided.
I'm using EJS to include to maintain a standardized header and footer across a website.
<% include includes/footer %>
I'd like the footer to include file specific javascript for each page from which it is displayed:
<script src="public/js/<% NAME_OF_FILE_THAT_CALLS_FOOTER %>.js"></script>
Is this possible using node, express, and EJS?
I suggest you to import js file in the each page, not in footer.
Page.ejs
<% include header %>
//body
<script src="/bootstrap/js/bootstrap.min.js"></script>
<% include footer %>
Footer.js
// something more you want
</body>
</html>
I do have a small issue i can't solved despite reading on internet.
I'm learning node.js, express.js, ejs.
I create a small app that tries to display a dynamic webpage on my local server.
The code is working but not the display of the pictures! (the stylesheet works fine)
here is my index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head %>
</head>
<body class="container">
<header>
<% include partials/header %>
</header>
<main>
<h1><%= title %> </h1>
<img scr="/images/logo_small.jpg" alt="logo" />
<p> Welcome to <%= title %></p>
</main>
<footer>
<% include partials/footer %>
</footer>
</body>
</html>
In the main apps i wrote:
app.use(express.static(path.join(__dirname, 'public')));
And finally i put the images in ./public/images/logo_small.jpg.
The display shows "logo" instead of the pictures. When I go this URL
http://localhost:3000/images/logo_small.jpg
Firefox shows me the image. it is frustrating!
I miss something here, but i don't see what. Any idea ?
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.