Express & Jade - max Block Nesting - node.js

i use Express 3x + Jade + bootstrap +..etc
my block/extend structure looks like this
.layout.jade (only head stuff)
.topNav.jade (only top nav)
.sideNav.jade (sideNav and control center interface)
.slidePrem.jade (the actual content)
now i try to res render slidePrem
-> this renders sidenav, topnav, layout (so the "extends" statement is read out of slideprem)
but it wont show any content of slidePrem
so after many many hours of recoding, searching, reintending, etc
. i rewrote structure to slideprem -> sidenav -> layout
-> this renders slideprem, sidenav, layout
->>> So is there actually a limit of nested blocks?
-> is it editable?
-> or cld u imagine the error somewhere else?
regards Pika
Edit:
//slidePrem.jade//
extends ../sideNav
block wall
#bla (or alert or sth)
//sideNav.jade//
extends topNav
block content
#subHeader
#subHeadNav
#Content //doesnt conflict with "block content"
div.container
div.row
div.span9
block wall
div.span3
// further code
//topNav.jade//
extends layout
block navigation
div.topnav.....
div...
...
block content
#modal
//layout.jade//
doctype 5
html
head
title= title
<meta name="viewport" content="width=device-width, initial-scale=1.0">
link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Titillium+Web&subset=latin,latin-ext', type='text/css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css', media="screen")
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/cCenter.css')
script(src='/javascripts/jq.js')
script(src='/bootstrap/js/bootstrap.min.js')
script(src='/javascripts/core.js')
script(src='/javascripts/ajax.js')
body
block navigation

You should try to work with includes instead of extends.
So you can try for your layout.jade :
html
head
(...)
body
block navigation
And in your navigation.jade block
extends layout
block navigation
.topnav (div aren't required in jade)
(...)
include content
Your content.jade only needs then
#subHeader
#subHeadNav
#Content //doesnt conflict with "block content"
div.container
div.row
div.span9
include wall
div.span3
If that's not clear enough, you can find all the include documentation on the GitHub page of the project.
I hope it'll help.

Related

pug is not responsive

I'm using Bootstrap in a pug template, but the layout is not responsive
// layout.pug
html
head
title= title
link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css' integrity='sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l' crossorigin='anonymous')
link(rel='stylesheet', href='/stylesheets/register.css')
body
block content
index
extends layout
block content
.d-flex.flex-column.bd-highlight
.p-2.bd-highlight.px-0.py-0
nav.navbar.navbar-light.bg-red.by-5
.container-fluid
img(src='../images/iconWhite.png' alt='logo' width='35' height='35')
script(src='https://code.jquery.com/jquery-3.5.1.slim.min.js' integrity='sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj' crossorigin='anonymous')
script(src='https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js' integrity='sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns' crossorigin='anonymous')
I only needed this in head
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1')

Bootstrap not loading styles properly

I'm trying to write a small application using bootstrap but it seems it doesn't load the styles at all, even tho i included all bootstrap references properly, here is some code (i am using PUG, but i can provide the final HTML if needed)
extends layout
block content
link(rel='stylesheet', href='/stylesheets/index.css')
.container
.row
.col-md-8
section
h1.entry-title
span Sign Up
hr
form#signup.form-horizontal(method='post' name='signup' enctype='multipart/form-data')
.form-group
label.control-label.col-sm-3
| Email ID
span.text-danger *
.col-md-8.col-sm-9
.input-group
span.input-group-addon
i.fas.fa-envelope-open-text
input#emailid.form-control(type='email' name='emailid' placeholder='Enter your Email ID' value='')
.form-group
.col-xs-offset-3.col-xs-10
input.btn.btn-primary(name='Submit' type='submit' value='Sign Up')
The code of layout is this
doctype html
html(lang='en')
head
title= title
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
link(href='bootstrap/css/bootstrap.css', rel='stylesheet', media="all")
body
block content
script(src='jquery/jquery-3.4.1.min.js')
script(src='bootstrap/js/bootstrap.bundle.js')
script(src='https://kit.fontawesome.com/ae629fb23c.js')
I did check all the files and it does load bootstrap css and js, it just doesn't apply any styles, as seen here
Screenshot
The way your templates are setup, the link element loading your custom styles is placed in the body instead of the head where it belongs. Try something like this, which makes use of the prepend and append directives:
layout.pug
doctype html
html(lang='en')
head
block head
title= title
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
link(href='bootstrap/css/bootstrap.css', rel='stylesheet', media="all")
body
block content
script(src='jquery/jquery-3.4.1.min.js')
script(src='bootstrap/js/bootstrap.bundle.js')
script(src='https://kit.fontawesome.com/ae629fb23c.js')
page.pug
extends layout
append head
link(rel='stylesheet', href='/stylesheets/index.css')
prepend content
.container
.row
.col-md-8
section
h1.entry-title
span Sign Up
hr
form#signup.form-horizontal(method='post' name='signup' enctype='multipart/form-data')
.form-group
label.control-label.col-sm-3
| Email ID
span.text-danger *
.col-md-8.col-sm-9
.input-group
span.input-group-addon
i.fas.fa-envelope-open-text
input#emailid.form-control(type='email' name='emailid' placeholder='Enter your Email ID' value='')
.form-group
.col-xs-offset-3.col-xs-10
input.btn.btn-primary(name='Submit' type='submit' value='Sign Up')

How work template inheritance for Pug/Jade?

I have problem with template inheritance (more precisely with - block css ).
I have nested templates: template.pug -> index.pug -> contactContainer.pug
Every file has block css. And template.pug get all block css by index.pug and contactContainer.pug (it is right), but in html duplicate contactContainer.css:
<div id="leftColumn">
<link rel="stylesheet" href="/stylesheets/layouts/main/contactContainer.css">
<div id="contactContainer">
<div id="concatSubcontainer"></div>
</div>
</div>
I think problem by I use "include" instead "extends", but so i'm not sure because I have little experience for Pug.
Example my files:
template.pug (main template file)
doctype html
html
head
include ./head
block css
block js
body
div(id="page")
include ./header
block body
include ./footer
index.pug (body file)
extends layouts/main/template
block append css
link(rel="stylesheet" type="text/css" href="/stylesheets/index.css")
block body
div(id="mainContainer")
div(id="leftColumn")
include ./layouts/main/contactContainer
div(id="rightColumn")
include ./layouts/main/selfContainer
contactContainer.pug (template for leftColumn)
block append css
link(rel='stylesheet', href='/stylesheets/layouts/main/contactContainer.css')
div(id="contactContainer")
div(id="concatSubcontainer")

Why is my jade index page blank?

I'm broadly following this tutorial on Express, Mongo and Jade, and although I've successfully fetched back some data from mongo, but jade isn't rendering my page.
http://blog.ijasoneverett.com/2013/03/a-sample-app-with-node-js-express-and-mongodb-part-1/
Snippets are:
app.js:
app.get('/', function(req, res) {
employeeProvider.findAll(function(error, emps) {
// adding logging here shows that 'title' and 'emps' are correctly populated
res.render('index', { title:'Employees', employees:emps });
});
});
layout.jade:
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
index.jade:
extends layout
block content
h1= title
div
each employee in employees
div.employee
div.created_at= employee.created_at
div.title= employee.title
div.name= employee.name
When I extract the source from the page displayed in the browser, it just shows this:
<!DOCTYPE html><html><head><title>Employees</title><link rel="stylesheet" href="/stylesheets/style.css"></head><body></body></html>
In fact, nothing I put in jade.index to simplify it seems to get rendered. eg this also renders a blank page:
index.jade:
extends layout
block content
h1= title
Check again the tutorial and follow it (realy), since your code is diferent...
http://blog.ijasoneverett.com/2013/03/a-sample-app-with-node-js-express-and-mongodb-part-1/
The index.jade should be:
extends layout
block content
h1= title
#employees
- each employee in employees
div.employee
div.created_at= employee.created_at
div.title= employee.title
div.name= employee.name
a(href="/employee/new")!= "Add New Employee"
There are some needed css over #employees and
the each loop needs a - before itself.

Express, jade layout file rendering body but not rendering head

My problem is with my jade layout file not rendering correctly. The body is rendered but the head tags in the produced html are empty. I have tried to render the layout.jade file separately and it works perfectly.
Here is my layout.jade file
!!!
html
head
title= title
link(rel='stylesheet', href='stylesheets/style.css')
script(type='text/javascript', src='javascripts/jquery-1.7.2.js')
link(rel='stylesheet', href='stylesheets/pictogram-button.css')
body
header(style='padding-bottom:50px;')
include partials/header
section(style='min-height:600px;')
div!= body
footer.footer
include partials/footer
And here is my index.jade file
.line_h100t
.column_wrap800
.round_box1_w800
.list_fl10
ul.line_h40
li(style='margin-left:20px;')
ul
li
img(src='/images/icon/whiteWithoutCircle/check.png')
img(src='/images/login/loginTxt.png')
ul.line_h40t
li(style='margin-left:50px;')
p 로그인이 필요하신 분은
p Oopa Roopa 관리팀으로 문의해 주세요!
li(style='border-left:1px solid #999; padding:0 0 0 20px;')
ul
li
span.text_yellow ID
ul
li
input.login_input(type='text')
ul.line_h35t
li
span.text_yellow PASSWORD
ul
li
input.login_input(type='password')
li
ul.line_h10t
a.button-bevel.transparency(href='#')
.line_h35
span.lock
p(style='width:100px;') LOGIN
And here is the function in my express app that renders the index file.
adminLogin : function (req,res) {
res.render( 'index', {
title: 'Admin Login',
pageCategory: 'Admin Login',
pageName : 'index'
});
},
Thank you in advance for any help you an give me.
In express 3, layouts were removed in favor of template inheritance as explained here. The jade readme describes how this works, and an additional example is here.
You will need to replace div!= body with block body (or similar). Then at the top of index.jade, you'll want to add extends layout. Finally put the contents of index.jade under a block body (or whatever name you used in layout.jade).

Resources