hi and sorry for my english.
I've a very simple "layout.jade"
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
and a very simple "index.jade"
extends layout
block content
- if (session) {
p Welcome
- } else {
p Login
-}
With this code i've got a blank page.
Now if i remove extends layout from my "index.jade" and i put the code directly in "index.jade" everything works fine, that is to say my conditional statement give me <p>Welcome</p> or <p>Login</p> no blank page any more.
I'm new to nodejs and my problem may be evident for many of you ;)
Thanks!
It looks like you have a leading whitespace mismatch, which is a no-no in significant whitespace languages like jade. Also if and else are directly supported in jade:
extends layout
block content
if session
p Welcome
else
p Login
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.
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 was wondering how to send text to a jade view and use that text to form a link's name and the link its self. I'm not sure what the syntax needs to be.
I've tried: a(href=#{link}) #{link}, what's wrong with that syntax? The current error is Unexpected token ILLEGAL.
full code:
extends layout
block content
h1 #{title}
p #{text}
a(href=#{link}) #{linktext}
I guess you'll have to use this syntax : != to use unescaped buffered code (check the Jade documentation for more information)
extends layout
block content
h1 #{title}
p #{text}
a(href!=link) #{linktext}
Note tested but take a look at the documentation to perfect this.
Edit : As Scimonster said, just using buffered code normally works as expected :
a(href=link) #{linktext}
I have a one page website that I would like to keep but I also need individual sections to be viewed as independent pages. I'm using Jade with Node and everything is working fine until I start including files/blocks.
base.jade
!!! 5
head
body
.nav
// menu
block content
index.jade
extends layout/base
block content
p
| This is the index page.
include about
about.jade
extends layout/base
block content
p
| This is the about page.
What I'm trying to do is use the index page to display all of my pages and then have the individual pages extend the base.jade file. What's happening is I'm getting multiple navigation bars on index.jade because I'm extending base.jade twice. I'm a little stuck and feel like I'm missing something simple here.
Any help is appreciated, thank you.
the file you include should only have the content portion such as
about-content.jade
p
| This is the something about the site.
then index.jade is
extends layout/base
block content
p
| This is the index page.
include about-content
and about.jade
extends layout/base
block content
p
| This is the about page.
include about-content
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