pug | 易学教程

Jade template with variables (nodejs server side)

阅读更多关于 Jade template with variables (nodejs server side)

So i want to show a contacts list and for that I have transformed each contact div into jade code, but I still have to populate the relevant fields. Can I do that on the server side? I'm using nodejs for server code. The jade template of a contact is: // img-cont .img-cont // img-cont .left-img // left-img .img-box img(src='assets/img/img.jpg', alt='') .name h6 span John Doe img(src='assets/img/star-b.png', alt='') p strong Phone number: | +1 234 567890 p strong Email address: a(href='mailto:mail@company.com') mail@company.com // left-img ul.share-ul li a.edit(href='#') Edit li a.share(href='#

How do I put a html tag conditional in jade?

阅读更多关于 How do I put a html tag conditional in jade?

In jade , I want to put in a html tag conditional as per this method , which puts in      <html class="">  at the top of a html file. I tried //[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif] //[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif] //[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif] //[if gt IE 8]><!--> <html

Jade indentation errors

阅读更多关于 Jade indentation errors

So for my Express site, I'm using jade. So I decided to try modifying my layout file so I can start designing my site. I modified the original layout code (which worked), but I started getting indentation errors in any file that extends layout like this: 500 Error: /home/kevin/Blue/views/layout.jade:6 4| p Hello World Invalid indentation, you can use tabs or spaces but not both 4| p Hello World Invalid indentation, you can use tabs or spaces but not both at Object.Lexer.indent (/home/kevin/Blue/node_modules/jade/lib/lexer.js:679:15) at Object.Lexer.next (/home/kevin/Blue/node_modules/jade/lib

CSS how to make scrollable list

阅读更多关于 CSS how to make scrollable list

I am trying to create a webpage which is made up of a header and bellow the header a list of items. I want the list of items to be vertically scrollable. I also would like the webpage to take up the entire window but not be bigger. Currently my problem is the list of items is not scrollable and instead extends far below the bottom of the window and this is causing the window to be scrollable. What should the CSS properties be on the html , body , header and list items ? doctype html html head link(href="css/style.css" rel="stylesheet") body div#wrapper h1 Interactive Contact Directory div

Express.js - Image only renders on one page

阅读更多关于 Express.js - Image only renders on one page

问题 I'm trying to make an image appear on multiple pages using Pug and Express. But I've been running into some trouble. The image should be rendered on the page on the routes '/', 'data', 'update'. It is successfully rendered on the root '/', but afterwards, disappears from the Sources folder. In app.js I have this middleware about all my route-handlers: app.use(express.static(path.join(__dirname, '/public'))); In the public folder I also have the file styles.css which renders fine on the other

How to use the style tag with jade templates?

阅读更多关于 How to use the style tag with jade templates?

This style code worked for me a few months back. I have updated to the latest Jade NPM package and now it is not working. Can some please assist me with the proper way to inline a style in a Jade template? doctype 5 html(lang="en") head style(type='text/css') .ui-title { margin: 0.6em 10% 0.8em !important; } I get this error on the closing } unexpected text } There are three ways of putting text inside your tags in Jade 1. Put text just after the tag e.g. h1 Some header text And the output will be: <h1>Some header text</h1> 2. Put indented text below the tag with | e.g. p | Some text goes |

Jade Inline Conditional

阅读更多关于 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 (i != 0) 'offset3' }") ... a tonne of subsequent stuff I know I could wrap the code as below, but as far as I understand Jade's nesting rules to work, I'd have to duplicate the code or extract it to a Mixin or something. - each sense, i in entry.senses - if (i == 0) .span13 ... a tonne of subsequent stuff - else .span13.offset3 ... identical subsequent

Nodejs shows Error “Cannot GET /test”

阅读更多关于 Nodejs shows Error “Cannot GET /test”

问题 I am trying to retrieve output on other url / directory in nodejs but it's Display Error ("Cannot GET /test"). Please Suggest me what i have to do to get my output on ("http://localhost:8080/test"). var express = require('express'); var app = express(); var bodyParser = require('body-parser'); var multer = require('multer'); var upload = multer(); var session = require('express-session'); var cookieParser = require('cookie-parser'); app.set('view engine', 'pug'); app.set('views','./views');

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

阅读更多关于 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? You can use moment.js First, add moment to your express application locals express = require('express'); ... app = express(); app.locals.moment = require('moment'); Then you can use moment within a jade template like this: p #{moment(Date.now()).format('MM/DD/YYYY')} Moment takes Date.now() by default, so yo can also write: p #{moment().format('MM/DD/YYYY')} Sources: Making use of utility libraries in server-side Jade templates Moment.js Or you could use

node.js + jade + express: How can I create a navigation that will set class active if the path matches

阅读更多关于 node.js + jade + express: How can I create a navigation that will set class active if the path matches

I have come up with the following code but the problem is, there will be duplication of the anchor tag for each menu item.Is there a better way to do this? ul.nav - if(menu="Home") li.active a(href="#") Dashboard else li a(href="#") Dashboard li a(href="#") About li a(href="#") Contact This has a little less duplication. ul.nav each name in ["Dashboard", "About", "Contact"] if (menu=="Home") li.active a(href="#")= name else li a(href="#")= name Adding the active class might be better just done in javascript or perhaps you can get the presentation you need with the straight CSS a:active