如何使用脚本.在JADE模板中

问题描述

我已经使用JADE模板使用express框架创建了一个简单的节点应用程序.

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

在学习过程中一切都很好，直到我开始尝试运行一些客户端js，但我不知道该怎么做.

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.

我是否需要在app/index.js中做一些事情来告诉节点有关它们的信息?任何帮助将不胜感激.

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

谢谢

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     

推荐答案

任何内联脚本都可以像这样运行

Any inline scripts can be run like so

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

来自文档.

任何外部JS文件都可以像这样加载:

Any external JS file can be loaded like so:

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

此外，您可能需要确保您确实在使用布局文件. Jade建议执行以下操作:

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

extends ./layout.jade

您有文件的路径并附加了扩展名.尽管扩展名是可选的，因为您在app.js中指定了玉器引擎.

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!

这篇关于如何使用脚本.在JADE模板中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！