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}
Related
I installed the pug-bootstrap module in a nodejs project. I am trying to create a menu from a navbar.
I have done those files:
layout.pug:
include /node_modules/pug-bootstrap/_bootstrap.pug
index.pug:
extends layout
block head
+navbar("menu")
+nav_item("#", undefined, true)
string test
block body
h1= title
p Welcome to #{title}
the _bootstrap.pug contains the bootstrap css file : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css. But it is not loaded on the webpage.
Someone know why? And how to fix that?
Any help would be appreciate.
When you extend a part of a template with block, you're replacing any code that was already in that block, before. In this case, I assume that the head included a reference to that CSS file, which you're overwriting.
Generally speaking, use append instead of block for the head section (see this page from their docs). That way, previous content of parent templates is not overwritten.
In your usecase, I am doubtful whether you should be placing anything at all in that head block, since it is reserved for meta-tags, not for actual visible content. In other words: You'll need to move the code you have there to the body anyway, since visible document objects belong in the body, not in the head.
I am making a static website using Wintersmith alongside the wintersmith-stylus and wintersmith-jade plugins.
I want to add a specific CSS file in a help page. The help page is based off the "layout" template. When I try to use a block to insert the stylesheet into the html head, I receive the following error:
Line ##: Unexpected identifier
layout.jade
doctype html
html
head
block head
link(rel="stylesheet" href="/styles/layout.css")
body
...
help.jade
---
template: layout.jade
---
//- Error inducing code
extends ./layout.jade
block head
link(rel="stylesheet" type="text/css" href="../styles/help.css")
//- end of error inducing code
...
Even if I move the extends and block head lines on top of the metadata block containing template: layout.jade, I still receive the same error. Removing extends ./layout.jade results in the error lines position moving from 40 to 5 in my case.
My guess is the error is caused by the wintersmith-jade plugin, but even if that's the case I'm lost for how I would go about fixing it.
Since I wanted to use both Stylus and Jade (with Jade for both content and templates), I ended up moving over to Harp. Harp not only has Stylus and Jade "built-in", but it's also slightly simpler than Wintersmith.
It's quite a workaround, but I'd say it's actually an upgrade at the same time.
I'm not using wintersmith-jade, but it looks like that plugin shouldn't affect the regular templates in /templates (which is what I think you're referring to).
Looking at templates/article.jade, it looks like you should use just extends layout instead of extends ./layout.jade.
The default templates also do not have the metadata block, but maybe that's necessary for the plugin you're using.
I am starting developing with Sailsjs and I would like to know how to divide a webpage into differents blocks.
for example :
in layout.jade i have
doctype html
html(lang="fr")
head
body
div(class='container')
div(class='row')
div(class='col-md-12')
block header
h1 header
div(class='row')
div(class='col-md-8')
block content
div(class='col-md-4')
block right
block footer
then in my controller1/index.jade i have
extends layout
append content
p
some content
So when I type http://myserver.com/controller1/index in the browser, it works.
How to append some code in the block right form the result of another controller ? (I don't want to append some code to the block right directly in the controller1/index.jade file, to make the file as shorter as possible).
So I guess we can call another method of the controller inside the jade file ?
For example i would like to put a code like :
append right
=call('controller2/action1')
at the end of the controller1/index.jade file.
The purpose of my question is to figure out how divide the html parts of a webpage like we can do it with php using include method (for example).
Thank you
Benjamin
I am using express and Jade. When i pass variable that contains a link i get undefined in front and at the end of the url. What is this problem and how can i solve it?
The same problem as here :
Express image upload and view in jade
but it's not answered there.
Jade code:
block content
h1= title
p Your photos
#photos
img(src=#{purl})
p #{photo.title}
Rendering code
res.render('./user/show', { title: 'photos',photo: photo, purl: purl)});
purl is the variable of the link which when i console log just above the render appears as should and the photo.title appears too normally.
UPDATE
It's a JADE problem as with EJS everything works great.... Guess for a small problem i'll have to switch.. If anyone comes up with a solution, you're welcome.
First off, before res.render() add a console.log(purl);
You want to rule out that the variable is not undefined before it even reaches the Jade template.
In your jade, your image src does not need #{} around the purl variable. Try this:
img(src=purl)
You only need #{} when you are inside a text string and want to refer to javascript varaibles.
If you really wanted to, it could be written as img(src='#{purl}')
Your paragraph could also be written as:
p= photo.title
Where the = means the following is interpreted as javascript. No need for #{}.
If you wanted to mix text with the photo title using #{} works like a charm.
p #{photo.title} lorem ipsum
Jade template inheritance in Jade is driving me mad...
The problem is that I would like to exclude a large bit of code to external template and then include it. When I do so everything gets f** up :/
Sample code:
!!!5
html(lang="en")
head
title sample title
body
header
div#someDiv
div#someContent
section#main
Let's say I want to exclude everything from top to div#someContent. Then I would have
include inc/header
section#main
This way code indentation goes wrong and everything is messed up :/ Can you point me to the right direction in including templates?
Thanks in advance!
This is not template inheritance, but includes (template inheritance is with block and extends keywords). I did try your code, and what it does with the include is insert "section#main" into "div#someDiv" instead of "div#someContent". Not sure if this should be considered a bug or what (how can the parser know if the added content should be inside the last item in the include file, or at the same level?). It doesn't seem to care about the level of indentation under the "include" statement.
However, if you DO use template inheritance, you can put an empty block at the end of your include:
!!!5
html(lang="en")
head
title sample title
body
header
div#someDiv
div#someContent
block content
Then you can append the block in your actual content file:
include inc/header
block append content
section#main
And this renders OK in the DOM (section#main is inside div#someContent). Depending on the structure of your views, you may be better off with "extends" instead of "include + block append". You can check Jade's GitHub doc for the details.