I am trying to understand how JADE works when there are several templates.
I worked by this tutorial:
http://www.franz-enzenhofer.com/jade
But, I got this:
$ curl http://localhost:3000
<h1> Franz Enzenhofer</h1>
It seems that the command "res.render('index.jade',..." only took the index.jade template, but didn't insert it into the layout.jade template as should happen...
I assume you are using partials. They were removed with express v3. See the View System Changes part for more information.
From express v3 on you should use blocks. For example:
my-template.jade:
extends my-layout
block head
script(src="myfile.js")
block content
h1 My page
my-layout.jade
doctype 5
html
head
title My title
block head
body
#content
block content
Related
I am using Express with Pug as a view engine.
Pug renders comments in the HTML. For example:
div
// comment
p Hello
Would be rendered as:
<div>
<!--comment-->
<p>Hello</p>
</div>
How would I disable this functionality and instead strip them from the template so that they aren't visible in the rendered HTML?
I can see there is this pug-strip-comments package, but there is no documentation whatsoever for Express.
I want to avoid using something like a middleware to strip comments.
Thank you.
You can strip pug comments by using the following code. Just add //- instead of just // and it will strip it from from the rendered HTML.
//- will NOT output within markup
p foo
p bar
// will output within markup
p foo
p bar
You can take a look at the comments documentation for pug here:
https://pugjs.org/language/comments.html
I want to ajax for blocks that without layout
Such as
extends layout
block content
p xxxx
I want to get the content in block
if !layout
include layout
The solution
If you don't want the standard pug layout then create a file that doesn't have extends layout in it:
doctype html
html(lang='en-us')
head
title Page Title
body
div Content goes here
You don't need to do anything in your app.js file to make this happen. You've probably figured out that none of the statements in your question work. This is all controlled in the pug template file.
I am making a static website using Wintersmith alongside the wintersmith-stylus and wintersmith-jade plugins.
I want to add a specific CSS file in a help page. The help page is based off the "layout" template. When I try to use a block to insert the stylesheet into the html head, I receive the following error:
Line ##: Unexpected identifier
layout.jade
doctype html
html
head
block head
link(rel="stylesheet" href="/styles/layout.css")
body
...
help.jade
---
template: layout.jade
---
//- Error inducing code
extends ./layout.jade
block head
link(rel="stylesheet" type="text/css" href="../styles/help.css")
//- end of error inducing code
...
Even if I move the extends and block head lines on top of the metadata block containing template: layout.jade, I still receive the same error. Removing extends ./layout.jade results in the error lines position moving from 40 to 5 in my case.
My guess is the error is caused by the wintersmith-jade plugin, but even if that's the case I'm lost for how I would go about fixing it.
Since I wanted to use both Stylus and Jade (with Jade for both content and templates), I ended up moving over to Harp. Harp not only has Stylus and Jade "built-in", but it's also slightly simpler than Wintersmith.
It's quite a workaround, but I'd say it's actually an upgrade at the same time.
I'm not using wintersmith-jade, but it looks like that plugin shouldn't affect the regular templates in /templates (which is what I think you're referring to).
Looking at templates/article.jade, it looks like you should use just extends layout instead of extends ./layout.jade.
The default templates also do not have the metadata block, but maybe that's necessary for the plugin you're using.
I'd like to pass the name of a template file to my jade template and have it expand that template. I'm using node and express.
html
div(id="content")
extend #(content}
seems intuitive to me but it doesn't work. Is this possible and/or is there an alternative pattern to better achieve this?
After rethinking the pattern (I'm brand new to express and node), I realized a better solution. What I've done is taken the content (which was all static) and included it in block statements in multiple template files. I then serve those template files based on the route.
Say I have a layout page that has header and footer and multiple views: index, search, and getting started.
//layout.jade
html
head
block extra_headers
body
div(id="header")
div(id="content")
block content
div(id="footer")
//index.jade
html
block head
script(src="sss.js")
block content
| welcome to my home page
//results.jade
html
block head
script(src="search.js")
block content
| my search results
And so on with 'getting started'. My node code then looks like this:
app.get('/', function(res, req) {
return res.render('index'); // renders the index view.
});
I am attempting to utilize the JShare module for Node/Express.
The example given on Github says:
Next, you need to make a call out to the JShare helper method in your layout file:
!!!
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
!{includeJShare()}
body!= body
So, this example is in Jade. I am using EJS, and for the life of me, I can't figure out how to implement the helper method... This seems so simple, but I'm not sure what !{} does in Jade, or how to replicate it in EJS.
!{var} is unescaped interpolation in jade. You should be able to get the same thing in ejs by doing:
<%- includeJShare() %>
This should write in a <script> tag.
Edit
If ejs tries to parse include, submit a patch request to https://github.com/brooklynDev/JShare/issues (or to ejs) and in the meantime go into node_modules/JShare/jshare.js and change res.locals.includeJShare to just res.locals.JShare and then use JShare() in your ejs.