I'm devloping a sample website in order the learn Node.js with express. In a routes file I have this code to render a page:
app.get('/new-product', requireLoggedIn, function(req,res){
res.sendFile(path.join(__dirname+'/../views/new-product.html'));
res.set('Access-Control-Allow-Origin', '*');
});
Is there a way I could have the page header (with the logo, menus, etc) in a separated html file so I can load the header in all pages from the same file, and the content of each page in another file?
in order to load a piece of page in all pages , you need to use the EJS engine in place of html , just use <% include name_of_the_view %> in your ejs page and each time this page 'll be rendered , the name_of_the_view will be rendered with it
learn more :
http://www.embeddedjs.com/
Related
When I develop ejs file, I would like to transit to another ejs by clicking button.
But when I try to click and trnasit to quiz.ejs,nothing happend.
Are there any wrong point in ejs ?
And how to fix them?
Thanks
following is a part of my ejs file.
<button onclick = "href = '/quiz'">start</button>
And following is my Router.
router.get('/quiz',(req,res)=>{
res.render(Views+'quiz.ejs');
});
following is a part of my app.js
app.use('/quiz',Router);
Firstly you don't transit to any ejs file. You transit to another route which renders an ejs file.
So all you need to do is
Create a ejs file, lets say 'quiz.ejs'
Add a route to render this -
router.get('/quiz',(req,res)=>{
res.render('quiz');
});
And then finally redirect the user to quiz route.
<a "href = '/quiz'>To Quiz</button>
Also note that you need <a> anchor tag to navigate not a button.
I have three Pug files in a Node.js/Express application which follows the following layout:
//layout.pug
html
head
title= title
link(rel="stylesheet", href="link")
script(src="links")
// many css and javascript imports
body
header
// header section
block content
footer
// footer section
// more script imports
//index.pug
extends layout
block content
//some content
include slider
//slide.pug
div(class="xxx")
//slider contents
The include keyword actually works here and it renders the slider.pug but the problem I'm facing is that it does not render the slider.pug page as expected. The slider page is rendered in a way that it does not load required styles and javascript files so the result is a messed up html inside a nicely rendered one (index.pug in this case is the nicely rendered one).
I've tried adding the extend layout line to the slider.pug but it also failed.
What is the appropriate way to include a pug file that is meant to rely on the resources included in the layout page such as css and javascript inside another pug file?
I'm trying to create a PDF from one of my views.
This view is rendered using Jade and Express, loads some Javascript, some CSS files, extends some Jade views, and queries a database to populate different graphs. The rendering process takes about 7 seconds because it is not very well optimized.
Additionally, the GET request for the view uses passport and connect-ensure-login to verify that the user is logged in before rendering and passes some variables for Jade to use when rendering. This is the handler code:
var express = require('express');
var router = express.Router();
var moment = require('moment');
router.get('/', require('connect-ensure-login').ensureLoggedIn(), function (req, res, next) {
res.render('summary', {
title: 'Summary',
day: moment().format('D'),
month: moment().locale('es').format('MMMM'),
year: moment().format('YYYY')
});
});
module.exports = router;
This is the Jade file that needs to be converted to PDF:
extends layout
block content
.container-fluid
#banner
.chart#chart1
.chart#chart2
.chart#chart3
script(type='text/javascript', src='/javascripts/summary.js')
And this is the Jade file (layout) that is extended:
doctype html
html
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(http-equiv='content-type', content='text/html; charset=UTF-8')
meta(content='width=device-width, initial-scale=1', name='viewport')
title=title
link(rel='stylesheet', type='text/css', href='/stylesheets/styles.css')
script(type='text/javascript', src='/assets/jquery-3.1.1/jquery-3.1.1.min.js')
script(type='text/javascript', src='/assets/bootstrap-3.3.7/js/bootstrap.min.js')
body
.page-wrapper
block content
How would I go about loading the page and taking a screenshot and converting it to a PDF or rendering it as a PDF from the Jade file?
I've heard of PhantomJS but I can't find information that is up-to-date.
If anyone could help me out I would be very grateful.
What you can do, is use the jade/pug to generate the .html file with the desired values, save it in the File System (Async way) once this is done, use this library:
https://www.npmjs.com/package/html-pdf
To Read (Async way) the .html file that you saved in the file system and convert it into a pdf, and finally, stream it to the client.
Maybe you can use another library to instead of write to the File System, pipe it directly to the PDF converter, and it will be faster.
If the template will change frequently, this will have to be done for every request, otherwise, you can cache it, and only generate it the first time, then detect if is already there and pipe it to the response.
Hope it helps.
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 am working on a Html app which uses require.js to load the scripts.I have a homepage which is loaded using jquery load().
I would like to know if we can load the html page using require.js.
The text plugin is your friend. See the text plugin documentation or a blog post on that topic.
Quoting from the former:
require(["some/module", "text!some/module.html", "text!some/module.css"],
function(module, html, css) {
//the html variable will be the text
//of the some/module.html file
//the css variable will be the text
//of the some/module.css file.
}
);