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.
Related
I have three Pug files in a Node.js/Express application which follows the following layout:
//layout.pug
html
head
title= title
link(rel="stylesheet", href="link")
script(src="links")
// many css and javascript imports
body
header
// header section
block content
footer
// footer section
// more script imports
//index.pug
extends layout
block content
//some content
include slider
//slide.pug
div(class="xxx")
//slider contents
The include keyword actually works here and it renders the slider.pug but the problem I'm facing is that it does not render the slider.pug page as expected. The slider page is rendered in a way that it does not load required styles and javascript files so the result is a messed up html inside a nicely rendered one (index.pug in this case is the nicely rendered one).
I've tried adding the extend layout line to the slider.pug but it also failed.
What is the appropriate way to include a pug file that is meant to rely on the resources included in the layout page such as css and javascript inside another pug file?
At the moment, I have the following (in Pug):
block content
header
.header-content
.header-content-inner
h1#homeHeading= title
hr
p
| This is just a proof of concept
a.btn.btn-primary.btn-xl.page-scroll(href='#about') Find Out More
This has a specific background image (Stylus):
header
position relative
width 100%
min-height auto
-webkit-background-size cover
-moz-background-size cover
background-size cover
-o-background-size cover
background-position center
background-image url('/images/header.jpg')
text-align center
color $bg-white
For other routes, I have the former block of code, but I'm wondering if it's at all possible to have a different background image for each route?
For example,
index would have '/images/header.jpg'
route1 would have '/images/header-1.jpg'
route2 would have '/images/header-2.jpg'
... and so on ...
Thanks
Just add another class to your header in each route's template. e.g:
block content
header.header-1
.header-content
.header-content-inner
… and set the background image with some new styles in your stylesheet:
.header-1
background-image url('/images/header-1.jpg')
.header-2
background-image url('/images/header-2.jpg')
Send the page/route name in as a variable, then specify that as part of the class:
header(class="header_" + pg)
Then you define the background image style for header_home, header_about etc.
Check the variable syntax for the version of pug you are using since it has changed recently.
Have you tried using append/prepend blocks in pug
https://pugjs.org/language/inheritance.html#block-append-prepend
//- layout.pug
html
head
block head
script(src='/vendor/jquery.js')
script(src='/vendor/caustic.js')
body
block content
//- page.pug
extends layout
// it gets head content from both layout and this head as well
append head
script(src='/vendor/three.js')
script(src='/game.js')
I'm new to node.js, jade, & express, so please bear with me.
I have the following files.
layout.jade
index.jade
extends layout
block content
label initial layout
form(action="/getReports", method="GET", enctype="multipart/form-data")
input(type='submit', value='Generate Report')
child.jade
extends index
block append content
label added child
server.js
app.get('/getReports', function(res, req)
{
res.render("child.jade");
});
Process:
User comes on and loads the site. They see the initial index page
User clicks on the form which triggers an action that calls the Rest
Api getReports
The call will render the child template that should just append "added child" to the content part of index.jade.
However, I'm not seeing this. I guess I'm trying to understand the best approach to append a partial template that is rendered to the original index.jade page.
The problem i'm having is that this code is the client side is the index.jade page. The button triggers an action call to the server. The server processes data, then the goal is to take the data and process a template that it was to display on the index.jade page.
Normally, without the jade template files, I would just use javascript and to the naive way which would be just have the client side java code trigger the ajax call and in the response use the DOM to append the html with the processed data but I wanted to take advantage of jade.
Any advice Appreciated,
Thanks,
D
Here are some pointers that might help you,
In res.render("child.jade");, don't include extension of the jade file, .jade. Just res.render("child"); will work.
In your "child.jade", block append content is wrong as there is no block with that name. If you want to render some partial in index page then you should specify a block in "index.jade". Make it like,
extends layout
block content
label initial layout
form(action="/getReports", method="GET", enctype="multipart/form-data")
input(type='submit', value='Generate Report')
block child
and "child.jade" to,
extends index
block child
label added child
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 using layout.jade as a template for all the partials. layout.jade includes a header, footer, sidebar etc, and the partials is what is shown in the body.
Now I've implemented a lightbox with iframe, to show one of the partials in. The problem is that I don't want the header, footer etc to be shown inside the lightbox, just the partial jade file.
Is there a way to exclude layout.jade in this case?
Thanks in advance!
Yes, here's how:
res.render('template', { layout: false /* ... other parameters */ });
See Express docs on view rendering. You can also specify a different layout.