Questions tagged [pug]

Pug (formerly known as Jade) is a robust, elegant and feature-rich template engine for Node.js.

Pug (formerly Jade) is a clean, whitespace-sensitive syntax for writing HTML. Here is a simple example:

doctype html
html(lang="en")
  head
    title= pageTitle
    - if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Produces following output as HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

Links

6377 questions
41
votes
7 answers

How do I display todays date in Node.js Jade?

I am new to Node.js and Jade and I have tried to use #{Date.now()} and it's giving me numbers. How do I display the date in mm/dd/yy format?
Vartan Arabyan
  • 2,925
  • 7
  • 25
  • 35
41
votes
5 answers

Jade templating in Meteor

In the Meteor FAQs http://meteor.com/faq/how-do-i-package-a-new-templating-system there is some information about adding a different (than the default Handlebars) templating system. Jade is the only other example explicitly called out elsewhere in…
Jed
  • 703
  • 6
  • 13
40
votes
4 answers

Jade (node.js) - more than one class on an element?

in jade one can write: div.container and it compiles into:
But what if you have several classes like:
I have written it like this: div(class="span 4") But I am thinking: Is there not a…
Piddien
  • 1,436
  • 4
  • 18
  • 38
40
votes
5 answers

pugjs(jade) template engine loading css file

I've been searching in the examples on the GitHub but I couldn't find how to load a simple css file into my layout. My first thought was doing something like this link(href="my.css") but it seems it's not working at all. The href points to a correct…
Masiar
  • 20,450
  • 31
  • 97
  • 140
40
votes
6 answers

Do I have to use   for space in Jade?

I am using Jade and everything is cool except that Jade "eats" my spaces. For example, in HTML: Hello World or Hello World Will have a space between "Hello" and "World". But when converting to Jade it'd be b Hello b…
AGamePlayer
  • 7,404
  • 19
  • 62
  • 119
40
votes
8 answers

Add a whitespace at the end of the line in Jade

I have this jade code: p | Avatar hosted by a(href='http://www.gravatar.com/', target='_blank') Gravatar The problem is, it's rendered to

Avatar hosted byGravatar

Which looks…
Lanbo
  • 15,118
  • 16
  • 70
  • 147
39
votes
3 answers

How to properly render partial views, and load JavaScript files in AJAX using Express/Jade?

Summary I am using Express + Jade for my web application, and I'm struggling with rendering partial views for my AJAX navigation. I kind of have two different questions, but they are totally linked, so I included them in the same post. I guess it…
Waldo Jeffers
  • 2,289
  • 1
  • 15
  • 19
39
votes
4 answers

How to make Jade stop HTML encoding element attributes, and produce a literal string value?

UPDATE Jade v0.24.0 fixes this with a != syntax for attributes. option(value!='<%= id %>') I'm trying to build an
Derick Bailey
  • 72,004
  • 22
  • 206
  • 219
38
votes
6 answers

Jade - missing space before text for line x of jade file

I'm making an Express based web application and everytime someone visits this jade file i get the following error: Warning: missing space before text for line 28 of jade file "C:\x\app\view s\login.jade" It also spits it out a few times for each…
novs12
  • 657
  • 2
  • 7
  • 15
38
votes
5 answers

variable in class name jade

I can't set a variable name in a class in jade: .flag_#{ session.locale } #{ session.locale } I have:
en
And I'd like to have
en
Thanks
user1860758
  • 405
  • 1
  • 4
  • 6
37
votes
4 answers

Jade template, how to pass concrete object to pages?

I have a jade template for my node.js project. I would like to send an object to the jade template and pass it to a function inside the page (to render something). I am sure I send the right stuff from the server like this res.render(__dirname +…
Masiar
  • 20,450
  • 31
  • 97
  • 140
37
votes
7 answers

Jade Inline Conditional

I'm trying to make everything apart from the first element in an array have a CSS class using the Jade templating engine. I was hoping I could do it like this, but no luck. Any suggestions? - each sense, i in entry.senses div(class="span13 #{ if…
benui
  • 6,440
  • 5
  • 34
  • 49
36
votes
3 answers

Is there a way to include html file or snippet directly in jade?

I have a set of html files, mostly static, I would like to move to my node.js/express/jade project. What's the right way to include html file or snippet directly in jade? I don't want to translate existing html file to jade?
jason chen
  • 872
  • 2
  • 8
  • 10
36
votes
2 answers

Jade to HTML converter

I have started writing an application using nodejs and jade, but after a while my team decided to switch to Django. I would still like to use the web pages written using jade, without having to re-write them by hand. Does anyone know of a tool that…
Clara
  • 2,935
  • 6
  • 34
  • 49
35
votes
4 answers

Jade and NodeJs, any good tutorials?

I have started working with NodeJs. First, I was just using it for providing simple REST api which has access to NOSQL databases. Now I also want to build html pages and use NodeJS to serve static files, as well as dynamic content using ExpressJs.…
Lalith
  • 19,396
  • 17
  • 44
  • 54