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>
Related
I followed this tutorial on sctoch.io to use ejs files but I'm looking for a main index to include the current page.
In the tutorial we will add head, header and footer inside all news pages.
But I want to write this once. For example :
<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">
<header>
<% include ../partials/header %>
</header>
<main>
<!-- Here is that I want -->
<% include ../partials/main %>
</main>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
How can I do load the good page inside the main file when I clic on different link of my navbar ?
First of all you will have to use Express and his template engine(views),so just add header and footer in every new file you make
<% include header %>
<!-- yout html code -->
<% include footer %>
And when you render it simply say
res.render('YourNewFile');
Your header should look something like this..
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title><%- title %></title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
And footer ..just close all tags ..and load some scripts if u want in it
<script src="..."></script>
</body>
</html>
Using ufront and erazor I ran into the following problem very quickly.
The hello-world example provides the following layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
#viewContent
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
</html>
For certain pages I want to add more headers or scripts after Jquery has been loaded.
One way to do so (for the scripts for example), would be to pass the scripts as an array of strings, and construct them on the layout file :
...
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
#for(script in scripts) {
<script src='#script.path'></script>
}
</html>
....
The problem with this approach is that I can't keep meaningful headers + body + scripts on the same template file witch would be great, also needs extra care to pass the scripts and headers as context.
Some template engines like Razor or Laravel allow to do that using 'sections'.
Is it possible to do something similar with erazor? If not what would be a good alternative?
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.
In Jade JS, it's very easy to extend a layout. Supposed one have layout.jade, and for the index.jade, just do:
extend layout
block content // content comes here
Then it's pretty sufficient.
I searched the official guide but didn't found how to do. The most similar seems to be something like:
{>partials}
But still that's not extending a layout. How to achieve similar thing in DustJS?
Thanks a lot.
I found the solution... turns out I didn't read the dust documents careful enough.
Layout File:
<html>
<head>
<title>{+title}Location of Title{/title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
</head>
<body>
<header>
<h1 id="page-title" class="very-middle">{+title}Title Comes Here{/title}</h1>
</header>
<div id="content">
{+content}
Content Comes Here
{/content}
</div>
</body>
</html>
Content File:
{>layout/}
{<content}
{!
Content simply comes here
}
{/content}
So the point is the use of {+placeHolder}, {>toExtend} and {
My jade file is as follows:
!!! 5
html(lang="en")
head
title test page
body
h1 hello world
But it renders as:
!!! 5
<html lang="en">
<head>
<title>test page</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
I've tried just !!! as well as doctype - all render as text. Any ideas?
Check if your file has a byte order mark in the beginning, if it does - remove it.
Some windows editors add it in order to distinguish endiannes.