I'm trying do an app with Node/Express/Jade/Stylus.
The problem is that Jade won't render the content of an included file.
Here are the files:
layout.jade:
doctype 5
html
block head
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
header
block header
#main-container
block content
footer
block footer
index.jade:
extends layout
include helpers/header
block content
form#form-login
helpers/header.jade:
extends ../layout
block header
#test
p Hello World
img(src="images/Logo.jpg" alt="Logo")
The rendered page is blank. In the page there is nothing. The image url is right, so tha's not part of the problem. I checked the page code, and header.jade was completely ignored.
I checked if the header.jade is loaded, and it is loaded (I tried putting an error in it).
Here the code of the rendered page:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<header></header>
<div id="main-container">
<form id="form-login"></form>
</div>
<footer></footer>
</body>
</html>
It looks like a block doesn't propagate properly from an include to a layout (I'm not overly familiar with Jade so this might be intended behaviour), because this seems to work:
// index.jade
extends layout
block header
include helpers/header
block content
form#form-login
Also, you shouldn't use extends ../layout in your header include, otherwise your layout file will be rendered twice.
Related
I am scraping a website and occasionally a page gets thrown up that appears completely empty in the browser. I would like to write an exception for this, but I cannot find a way to check with BeautifulSoup if this is true. I know this seems like an easy problem, but I am a beginner.
The structure of the offending HTML page is as follows:
<!DOCTYPE doctype html>
<html lang="en">
<head>
...
</head>
<body class="something" data-theme="something">
<csn-mobi>
</csn-mobi>
<div id="bitracking" style="display:none">
</div>
<script>
...
</script>
<script>
...
</script>
</body>
</html>
In other words, the <body> has a whole bunch of <script> tags and when I do something like:
BrowserText = soup.body.text
then the problem is that all the script inside the <script> tags gets included as well.
But I want to check if there is anything outside the <script> tags (but within the <body> tag), and if there is nothing, raise an exception.
Any ideas on how to do this?
I have a question about including scripts from blocks
From express-generator,
layout.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
include sidebar
script(src='/javascripts/jquery.js')
block bottomscripts
sidebar.jade
block bottomscripts
script(src='/javascripts/sidebar.js')
output
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>Express</h1>
<p>Welcome to Express</p>
<script src="/javascripts/sidebar.js">
</script><script src="/javascripts/jquery.js"></script>
</body>
</html>
how can i move sidebar.js below jquery.js ? i need this done inside sidebar.jade
thank you
Have you tried including jquery.js in your block? Seems like they are both "bottomscripts".
block bottomscripts
script(src='/javascripts/jquery.js')
script(src='/javascripts/sidebar.js')
So can move your include statement and change the indentation of your jquery sctipt statement to
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
script(src='/javascripts/jquery.js')
include sidebar
block bottomscripts
to get
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/sidebar.js"></script>
</body>
</html>
I'm writing a basic Node app and simply want to render the index page with Jade, and then let Angular do the rest on the front-end.
This is the Jade (slightly shortened to illustrate the problem):
doctype html
html
include ../includes/head
body(ng-app="TestApp" ng-controller="TestAppController")
div(ng-view)
include ../includes/foot
Which compiles to the following HTML:
<html>
<head>
<meta charset="utf-8">
<title>Example App</title>
<link rel="stylesheet" href="/dist/css/app.css">
</head>
<body ng-app="ExampleApp" ng-controller="ExampleAppController" class="ng-scope">
<!-- ngView: -->
<footer class="page-footer">
<ul class="page-footer-links">
<li>Some Twitter User</li>
</ul>
</footer>
<script src="/dist/js/app.min.js"></script>
</body>
</html>
Notice how div(ng-view) is now an HTML comment within the rendered HTML, rather than a DIV with the directive:
<!-- ngView: -->
Changing div(ng-view) within the Jade to any of the following produced the same result for me:
ng-view
<div ng-view></div>
| <div ng-view></div>
Any ideas as to why this is happening?
This was actually nothing to do with Jade. As stated in a comment by #NikosParaskevopoulos, the <!-- ngView: --> HTML comment is a placeholder created by Angular upon seeing a <div ng-view> and having no route to display in it.
Redefining my Angular routes solved the problem.
I've had a quick skim of the Jade documentation and I can't seem to figure out how to apply a wrapper to all templates that I output.
How is this usually done?
It sounds like you want template inheritance:
// layout.jade
!!!5
html
body
block content
The content block is what you define in all templates that are going to inherit the layout template:
// index.jade
extends layout
block content
h1 Hello World!
When you render index.jade, this is the result:
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>
So in layout.jade, you set up all common elements like JS/CSS, headers/footers, etc.
I'm trying to create a modular layout using jade template. I would like to append a script block from a child into its parents parent. I'm not quite sure if its possible at all.
Here is my structure
layout.jade
head.jade
index.jade
users.jade
layout.jade:
doctype
html#html
include head
body
block content
head.jade:
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
block scripts
index.jade:
extends layout
block content
h1 Hello
include users
users.jade
block append scripts
script(src='/javascripts/user.js')
ul
each user, i in users
li(class=i+"-"+user) #{user}
My desired html output should be:
<!DOCTYPE html>
<html id="html">
<head>
<title>Index</title>
<link href="/stylesheets/style.css" rel="stylesheet">
<script src="/javascripts/user.js"> <!--// append this from user.jade into head.jade //-->
</head>
<body>
<h1>Hello bob</h1>
<li class="0-user1">user1</li>
This should be possible, and there are examples in the jade documentation that do exactly this. Your code all looks fine except you need to indent your script tag in users.jade so it is indented below the block append script directive.
I tried to use the same approach to define a tab-control.
I defined the pages in separate jade-files.
Each jade-file appended a block that contained the tab-page which was included.
It also did not work until I appended something to the block in my 'index.jade' as below:
extends layout
append scripts
//- dummy
block content
h1 Hello
include users
However I also would like to add that since I added multiple .jade files I ran in the following. Each file inclued jade-template used block append to add a tab-page but the order in which the pages were added was reversed.