Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use script. in JADE templates

Tags:

express

pug

I have created a simple node app using the express framework using JADE templating.

All was well in the learning process until I came to try and run some client-side js which I cannot figure out how to do.

Is there something I need to do in my app/index.js to tell node about them? Any help would be much appreciated.

Thanks

index.jade

 extends layout

 block content

 h1 Title

 script.
   console.log("I am running on the client");

app.js

 var http = require("http")
 var express = require("express")
 var path = require('path');
 var routes = require('./routes/index');

 var app = express()
 var port = process.env.PORT || 5000

 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'jade');

 app.use(express.static(path.join(__dirname, 'public')));
 app.use('/', routes);

 var server = http.createServer(app)
 server.listen(port)

 console.log("http server listening on %d", port)

 module.exports = app;

layout.jade

 doctype html
 html
   head
     title= title
     link(rel='stylesheet', href='/stylesheets/style.css')
     link(rel='stylesheet', href='/stylesheets/bootstrap.css')
     link(rel='stylesheet', href='/stylesheets/style.css')
     script(src='/javascripts/jquery-2.1.3.js') 
     script(src='/javascripts/bootstrap.js') 

   body
     div(class="navbar navbar-inverse navbar-fixed-top")
       .container
         .navbar-header
           button.navbar-toggle(type="button", data-toggle="collapse", data-target=".navbar-collapse")
             span.icon-bar
             span.icon-bar
             span.icon-bar
           a.navbar-brand(href="/") Twitter
         div(class="collapse navbar-collapse")
           ul(class="nav navbar-nav")
             li.active
               a(href="#") Home
             li
               a(href="#about") About
             li
               a(href="#contact") Contact
     block content     
like image 219
CatsLoveJazz Avatar asked Feb 10 '23 06:02

CatsLoveJazz


1 Answers

Any inline scripts can be run like so

script.
  if (usingJade)
   console.log('you are awesome')
 else
   console.log('use jade')

from Docs.

Any external JS file can be loaded like so:

script(src="/path/to/script.js")

Also, you may want to be sure that you're actually using your layout file. Jade recommends doing something like this:

extends ./layout.jade

Where you have a path to the file and have the extension attached. Though the extension may be optional because you specify the jade engine in app.js.

Let me know this helps!

like image 189
Brennan Avatar answered Feb 16 '23 11:02

Brennan