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.
Related
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 screenshot the code to show the code indent. Previously I had error displaying on index.hade so, I remove the indent and the error gone. I did the same for layout.jade but the header went missing. SO I just leave it with indentation. But I've no clue as to why the contents of index.jade not showing up at all and not even error to denote?
layout.jade
index.jade
This is how it appears on web without textbox and button.
I think your indentation might be a bit off. Try copy and pasting the following:
layout.jade
doctype html
html
block head
title title
link(href='/stylesheets/style.css' rel='stylesheet' type='text/css')
body
header#banner
h1 Awesome Chat
block content
footer Hope you enjoy your stay here
index.jade
extends ./layout
block content
section#chatroom
div#messages
input#message(type="text" placeholder="Enter your message here")
input#send(type="button" value="Send")
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.
I'm currently experimenting with jade template engine. I've got the follow basic code in my layout.jade file:
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body!= body
header != partial('partials/head')
'dependant page content to go here'
footer != partial('partials/foot')
I'd like every page to follow this same structure (for now). However I would like the content to change, and the content should be depended on what is inside the 'pagename'.jade files e.g. index.jade:
section#page-content
h1= title
p Welcome to #{title}
What i'm trying to say is, upon a new page loading.. the content tag in layout should somehow be replaced by the appropriate tag of the page being loaded.
I think you're looking for:
body
header
p my header
section!= body
footer
p my footer
In this case, section!= body is replaced by whatever is in the 'pagename'.jade files.
use blocks
in layout.jade:
body
block some-block
p Blah
in test.jade
extends layaout
block some-block
p What