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

Question

我使用Express框架和JADE模板创建了一个简单的Node应用程序。

在学习过程中一切都很顺利，直到我尝试运行一些客户端JS时，我无法弄清楚如何操作。

我需要在我的app/index.js文件中做什么才能让Node知道它们吗？非常感谢您的帮助。

谢谢

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     

- CatsLoveJazz

---

你想从内联JavaScript还是外部文件运行脚本？ - Brennan

我能够通过使用script（src =“ / path / to / script.js”）从外部文件运行js客户端，但无法使内联js工作。 - CatsLoveJazz

原来是因为我将脚本标签缩进了一级，这样内联的 JavaScript 才能正常工作。如果有人知道为什么会这样，请告诉我。 - CatsLoveJazz

Answer 1

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

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

来自文档。

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

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

此外，您可能需要确保实际使用了您的布局文件。Jade 建议采用以下方式：

extends ./layout.jade

当您拥有文件路径并附加扩展名时，可以使用它。尽管扩展名可能是可选的，因为您在app.js中指定了jade引擎。

让我知道这是否有帮助！

- Brennan

---

我的布局正在加载，虽然我会采用最佳实践，谢谢！我能够从外部文件运行JS客户端，但是内联仍然无法在使用if（usingJade）时工作。我不明白？！？ - CatsLoveJazz

这很奇怪！您在检查接收到的HTML时能看到脚本标签吗？控制台中是否有任何JS错误？ - Brennan

HTML中没有包含脚本标签。在节点控制台或浏览器中没有出现错误。 - CatsLoveJazz

我有我的脚本。标签缩进与“块内容”相同级别，将其向外移动一个制表符就解决了这个问题...不确定为什么？ - CatsLoveJazz

啊，我很高兴能够帮忙。我本来想回复说它在我的环境中运行良好，所以问题肯定出在其他地方！ - Brennan