I tried making comments in Jade/pug, but the comments render as text in the HTML. This is my code:
doctype html
html(lang='en')
body
/ This should be a comment
What am I doing something stupid?
As written in the comment documentation, you can either use // which will translate to a HTML comment or //- which won't be visible in the outputted HTML code.
In jade we use //- for comment.
If you are trying to comment a block, make sure it should be indented properly like in below example-
doctype html
html(lang='en')
body
//-
This should be a comment
Indent correctly for 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.
This file name is layout.pug(parent):
doctype html
html
head
title knowledgebase
body
block content
br
hr
footer
p Copyright © 2018
And this file name is index.pug(child):
extends layout
block content
h1 articles
h1 #{title}
At first I thought everything was good with your code, then I looked closely at what was pasted here.
If inspect the code in layout.pug you'll see that there's a leading space on every line. Make sure that doctype html and html (which are your root elements in the parent template) have ZERO spaces at the start of the line.
Otherwise your code looks good and should work as expected.
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
Jade template inheritance in Jade is driving me mad...
The problem is that I would like to exclude a large bit of code to external template and then include it. When I do so everything gets f** up :/
Sample code:
!!!5
html(lang="en")
head
title sample title
body
header
div#someDiv
div#someContent
section#main
Let's say I want to exclude everything from top to div#someContent. Then I would have
include inc/header
section#main
This way code indentation goes wrong and everything is messed up :/ Can you point me to the right direction in including templates?
Thanks in advance!
This is not template inheritance, but includes (template inheritance is with block and extends keywords). I did try your code, and what it does with the include is insert "section#main" into "div#someDiv" instead of "div#someContent". Not sure if this should be considered a bug or what (how can the parser know if the added content should be inside the last item in the include file, or at the same level?). It doesn't seem to care about the level of indentation under the "include" statement.
However, if you DO use template inheritance, you can put an empty block at the end of your include:
!!!5
html(lang="en")
head
title sample title
body
header
div#someDiv
div#someContent
block content
Then you can append the block in your actual content file:
include inc/header
block append content
section#main
And this renders OK in the DOM (section#main is inside div#someContent). Depending on the structure of your views, you may be better off with "extends" instead of "include + block append". You can check Jade's GitHub doc for the details.