How do I loop over an object and output markdown as part of the loop in my jade template?
Here is my template file
block content
section.content
h1= title
p Welcome to #{title}
ul
each post in posts
li!= :markdown
post
Here is an example posts object
{
"post1": "#Hey\nHow are you?",
"post2": "#Hello\nworld"
}
But I don't seem to be able to get the markdown to work inside of the loop, I've read over the documentation and tried Googleing but don't seem to be able to find anything that doesn't require loading another library for markdown in the view when Jade already has it.
I did some more research on the issue and as far as I understand it it is because:
:markdown
Is compiled at a different time to evaluated scripts such as my != post
The fix was:
Since I could never get :markdown to compile after my post object, I injected the node-markdown module into my views like this.
var MarkDown = require('node-markdown').MarkDown;
res.render('blog', {
"title": name,
"md" : Markdown,
});
And in my view I used this
each post in posts
li!= md(post)
And it all appeared to work, I've left the title var out of my example because it wasn't really part of the fix, just asthetic.
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'm playing around with Node and Express and I'm using the Pug (formerly Jade) templating engine to render my html. Everything has been working fine up until I started trying to inject variables into the href of my anchor links. Whats odd is that if I change my Express app view engine to jade then things start working as expected.
Based upon other articles I've read the issue appears to be an interpolation issue, however I can't seem to find a resource or documentation that shows how to correctly fix this issue.
Ex.
I'm pulling in data from a rooms json array and then using a for loop to cycle through each array element and output the data for each room. Using jade the following works.
table.table.table-striped
thead
tr
th Name
th Id
tbody
each room in rooms
tr
td(style="width: 50px;")
a(href!="/admin/rooms/delete/#{room.id}") Delete
td #{allTitleCase(room.name)}
td #{room.id}
Using pug the above does NOT work correctly. Specifically the a(href='/admin/rooms/delete/#{room.id}') Delete link doesn't work correctly. Instead of injecting the room id into the link href, it literally outputs #{room.id} as the end part the href link.
Any ideas how to fix this in pug?
Note that I've tried all of the following using pug but none of these options have worked.
a(href="/admin/rooms/delete/#{room.id}") Delete
a(href!="/admin/rooms/delete/#{room.id}") Delete
UPDATE: Pug 2.0 introduced breaking changes to how interpolation is handled.
Based on the changelog, any of the following should work:
// to solve OP's problem, the following can be used:
a(href="/admin/rooms/delete/" + room.id) Delete
// Here are a few additional scenarios which use the new API
// for anyone stumbling across this answer in the future
- var href = "/admin/rooms/delete/" + room.id;
a(href=href)
a(href=`${href}`) // Node.js/io.js ≥ 1.0.0
a(href=href + '?foo=bar')
Hello,
I have been trying to learn Node with Express for about a week now. So far I got the basics of how to build MVC on top of it, and using JavaScript proved easier and cleaner than I would have ever gotten with another server language (except Python, maybe). But let's get into one of my first problems and one of a few I couldn't solve myself.
I'm using the Jade templating engine and I love it. I love how simple it is to input Markdown into the template. You just say :markdown and it's there!
But then I got into a problem. It's all easy to parse and print Markdown, however how am I supposed to display a blog post, for example, that's been stored as Markdown text in the database, on screen? I tried:
each entry in posts
h1 #{entry.title}
:markdown
#{entry.text}
div#post-footer
#{entry.date}
But the # gets parsed as a Markdown header, not a Jade directive. How do I make it so I can display Markdown properly?
var md = require('marked');
res.render('template', {md: md, markdownContent: markdownContent};
then inside the template use
div!= md(markdownContent);
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.