I'd like to set my CSS path in my express application in order to use this one in my jade layouts. However, I don't know how to do, I try to use "app.set('cssPath', __dirname+'/public/admin/css/')" but it doesn't work because I can not use "app.get()" in my external controllers.
My layout _layout.jade :
!!! 5
html(lang='fr')
head
meta(charset='UTF-8')
link(href='admin/css/screen.css', media='screen, projection', rel='stylesheet', type='text/css')
body
.container
h1 Wellcome to Forest Administrator
.space20
block content
.clear.space20
script(type='text/javascript', src='admin/js/jquery.js')
My page edit.jade :
extends ../_layout
block content
.block.half.first
h2 Add a post
And I'd like to use something like :
link(href='+myCssPath+', media='screen, projection', rel='stylesheet', type='text/css')
Not sure if I get what you want to do but You can use
res.locals.cssPath = 'string with the path';
And cssPath will be available in your template.
Besides that you don't need __dirname+'/public/. Part because when the page is rendered for the browser /public/ will be /
[edit] If you want to have that variable available in all you routes, but declaring it just once, you can create a small middleware like
var express = require('express');
var app = express();
var app.configure(function(){
app.use(express.bodyParser());
app.use(express.methodOverride());
// .. and your other tipical configuration
//this small middleware for variables that must available in all paths
app.use(function(req, res, next) {
res.locals.cssPath = 'path to the css directory';
next();
});
});
//From here your typical route declarations
app.get('/', function(req, res) { res.render('someView'); });
Related
I used NodeJs with Handlebars and thought about switching to PugJs because some functionality is native - using Handlebars requires some helper functions / partials.
In Handlebars I have to define a layout and pass in the template. In PugJs I created two example routes
First route file:
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.render('index', {
title: 'Home',
template: 'main'
});
});
module.exports = router;
Second route file:
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.render('index', {
title: 'Page2',
template: 'pageTwo'
});
});
module.exports = router;
As you can see I always have to render my index file and pass in the desired pug file as a template variable.
index.pug
doctype html
html
include ./header.pug
body
include ./templates/#{template}.pug
header.pug
head
title #{title} template!
main.pug
script(src='./client/main.js')
h1 main content here
pageTwo.pug
p pageTwo
When rendering the pug files I get this error
ENOENT: no such file or directory, open
'...\views\templates\#{template}.pug'
How can I replace #{template} with the correct template variable?
Dynamic template selection isn't a feature of pug, I believe it has something to do with how pug pre-compiles everything into a JavaScript function that stays in-memory inside node.js when it runs. The benefit of that is super-fast page rendering, so we're happy to keep using pug and just work around this.
Speaking of which, you can accomplish what you want to do using conditional logic:
doctype html
html
include ./header.pug
body
if template === 'pageOne'
include ./templates/pageOne.pug
else if template === 'pageTwo'
include ./templates/pageTwo.pug
else
include ./templates/home.pug
You should also look into the extends feature to simplify adding the header into your templates and mixins to resuse code between templates. You might find that these features could provide a better solution to your requirements with some redesign.
I am new to Node, Express, and Jade, and have a question about how to structure my script files.
In my layout I have jquery listed at the bottom. In another file, on another route, I wanted to add a script that uses jquery, so I wanted to add it below the jquery script tag on layout.jade when using that particular route.
layout.jade:
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/happy.css')
link(rel='stylesheet', href='/stylesheets/fonts.css')
link(href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600', rel='stylesheet', type='text/css')
link(href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600', rel='stylesheet', type='text/css')
link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet")
link(rel="icon" href="/favicon.png" sizes="16x16" type="image/png")
body
block content
script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js')
script(src="/javascripts/script.js")
I want this file added to the bottom of my scripts on the layout page when visting the /about route:
script(src="/javascripts/scroll.js")
/routes/about.js:
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('about');
});
module.exports = router;
from app.js:
app.use('/about', about);
You can use multiple layouts one with the script and one without
you set layouts like this
res.render('about', { layout: 'layoutwithscript.jade' });
Credit to #alessioalex in this post
The offending route in my node server code is this:
app.get('/s/:searchTerm', function(req, res) {
res.render('index');
});
After this happens, all the relative links in index.jade are relative to "hostname/s/" instead of "hostname/", which is broken.
My node setup looks like this:
app.set('view engine', 'jade');
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + '/public/'));
app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
app.use(express.json());
app.use(app.router);
All of these routes, except for the /s/:searchTerm route, work. Even the /results route. There, the relative links in partials/result are relative to 'hostname' as I'd expect.
app.get('/', function(req, res) {
res.render('index');
});
app.get('/s/:searchTerm', function(req, res) {
res.render('index');
});
app.get('/results', function(req, res) {
res.render('partials/results');
});
index.jade simply references layout.jade:
extends layout
layout.jade begins like this:
!!! 5
html(lang='en' data-ng-app='FooApp')
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(name='author', content='foo#gmail.com`')
link(rel='shortcut icon', href='img/favicon.ico')
title FooApp.com â„¢
// Bootstrap core CSS
link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css', rel='stylesheet')
// Custom css for this template
link(href='css/style.css', rel='stylesheet')
//if lt IE 9
script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
script(src='https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js')
body(data-ng-controller='SearchController'
.navbar.navbar-inverse.navbar-fixed-top(role='navigation')
.container
.navbar-header
button.navbar-toggle(type='button' data-target='.navbar-collapse'
How do I render a partial and keep links in that partial relative to 'hostname' ???
edit: added index.jade and layout.jade code
edit: ah, I see I'm doing something redundant with favicon
The behavior you are seeing is what is expected as hrefs are relative to the page that loads them. Since your /a/:searchTerm route is nested at /a, hrefs to static assets like img/favicon.ico will pick up their relative parent route. If you want the href to look in the root of your public directory for static assets, then prepend a / to the href like so: /img/favicon.ico
I am new to Express for Node.js, and I was just setting up a simple app by following Pedro Teixeira's Node Tuts Episode 9. I wanted to experiment with layout files, so I set the layout to be "true." When I did that though, it didn't render with my layout, only with my body. How should I get it to render correctly? Below is my app.js file, my index.jade, my layout.jade, and a screenshot of my rendered page.
app.js
var express = require('express');
var app = express.createServer();
app.configure(function () {
app.use(express.logger();
});
app.set('views', __dirname + '/views');
app.set('view engine','jade');
app.set('view options', {layout: true});
app.get('/', function(request, response) {
response.render('index');
});
app.listen(4000);
index.jade
h2 Hello
p World!
layout.jade
!!! 5
html
head
title My template
body
#main
h1 Content goes here
p Testing 123
#container!= body
If you are using Express 3 this is normal the way template are rendered has changed.
Your layout needs to be like this:
!!! 5
html
head
title My template
body
#main
h1 Content goes here
p Testing 123
block content
And you templates:
extends layout
block content
h1 Something
Examples here:
https://github.com/dotcloud/express-on-dotcloud/blob/master/app/views/layout.jade#L64
https://github.com/dotcloud/express-on-dotcloud/blob/master/app/views/welcome.jade#L1
If you are starting with Node and Express feel free to clone this demo/tutorial App:
https://github.com/dotcloud/express-on-dotcloud
You can fool with it localy and discover some nice features of Express 3, if you want to share your app it is all setup to be pushed to dotCloud.
Hi is there a 'express' specific way to make some global app data available to all my routes?
Or is it a case of just using an module.exports statement?
Any pointers more than welcome.
Node noob - btw
You can set a global object that is also available in your layout
app.js
app.configure(function(){
app.set('view options', {pageTitle: ''});
});
app.get('/',function(request, response){
response.app.settings['view options'].pageTitle = 'Hello World';
response.render('home');
});
layout.jade
!!!
html
head
title= pageTitle
body!= body
You can use app.set() in the setup portion of your app to make it available to each request. The app object is available via req.app in your routes.
Personally, I like to do an app.set('name', obj); in the setup and in the routes I access it via req.app.settings.name.
You could also use a dynamic helper to pass data to all views.
app.js
// Dynamic Helpers
app.dynamicHelpers({
appSettings: function(req, res){
return {name:"My App", version:"0.1"};
}
});
Now on your views you can use it like this (I used ejs on this example but it should work with jade or any other view engine):
view.ejs
<%= appSettings.name %>
<%= appSettings.version %>
Hope this helps.