使用jade导入jQuery（使用node.js + express）答案

【问题标题】：importing jQuery with jade(with node.js + express)使用jade导入jQuery（使用node.js + express）
【发布时间】：2015-12-16 13:41:10
【问题描述】：

我有关于玉的问题。我像跟随一样导入，但它似乎被忽略了。（当我用 Chrome 检查源时，找不到那些资源：

扩展布局

head block append
  link(rel='stylesheet', href='/stylesheets/chat.css')
  script(src="/socket.io/socket.io.js")
  script(src="/javascripts/jquery-2.1.4.min.js")
  script(src="/javascripts/chat.js")

如何导入这些脚本？

谢谢！

//================ 这是我在 Chrome 浏览器的“页面源”功能时得到的。

<!DOCTYPE html>
<html>
<head>
    <title>Chat Sample</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    <h1>Chat</h1>
    <label for="userName">User name: (Hit Enter)</label>
    <input id="userName" type="text" size="30">
    <span id="feedBack"></span>
    <p> </p>
    <div id="msgWindow" class="shadow">
    </div>
    <p> </p>
    <div>
        <br>
        <table>
            <tr>
                <td>
                    <select id="users" style="width: 100px"></select>
                </td>
                <td>
                    <input id="msg" type="text" style="width: 600px" disabled="true">
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

但是，css 文件也不适用于页面。当我使用http://localhost:3000/javascripts/jquery-2.1.4.min.js 之类的网址接近时，我可以获得文件的全部内容。

我已经更改了 jquery 版本//

//===========编辑

以下是错误。我不明白为什么head 出乎意料//

Warning: Unexpected block "head"  on line 3 of /Users/juneyoungoh/Documents/Nodejs/ChatSample/views/chat.jade. This block is never used. This warning will be an error in v2.0.0

仅供参考，这是layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

【问题讨论】：

正确的语法，检查你的服务静态逻辑
@trquoccuong 我正在关注这个网站。 vijayannadi.wordpress.com/tutorials/… 我已经仔细检查了所描述的内容。这个问题有什么提示吗？
app.use(express.static(path.join(__dirname, 'public')));你有像 /javascripts/jquery/jquery-1.7.2.min.js 这样的文件夹吗
@trquoccuong 当我输入localhost:3000/javascripts/jquery/jquery-1.7.2.min.js 或chat.css 时，我可以看到'jquery-1.7.2.min.js' 的全部内容。但是，根据 chrome 检查器，该页面仍然不包含 js 元文件。

标签： javascript node.js express pug

【解决方案1】：

从未附加块，但jade-lang.com 提到了以下语法：

extends layout

block append head
  link(rel='stylesheet', href='/stylesheets/chat.css')
  script(src="/socket.io/socket.io.js")
  script(src="/javascripts/jquery/jquery-1.7.2.min.js")
  script(src="/javascripts/chat.js")

http://jade-lang.com/reference/inheritance/

【讨论】：

感谢您的参考。但我仍然无法导入这些文件。我编辑了帖子。
出错了！谢谢！ :D bbbbb
我的案例的解决方案摘要添加为下面的评论
很高兴听到您能够解决问题。随意将您自己的帖子标记为解决方案，因为它与可能阅读此问题的其他人更相关。
我无法评论你的答案，因为我需要 50 个声誉，所以我在这里写：我测试了它，你的解决方案与 head-Tag 配合得很好，但请注意，块通常不会转换它们名称到 html 标签。所以通常你应该在head-Element 中定义block head

【解决方案2】：

我从 Jannik 的评论中得到了暗示。可能是版本问题。总之，我编辑了layout.jade。

来自

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

到

doctype html
html
  block head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

我添加了block关键字。

仅供参考，我正在使用

npm ver.2.12.1
节点版本.0.10.23
express ver.3.4.7

和 package.json 一样

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.7",
    "jade": "*"
  }
}

感谢您的帮助！ :D

【讨论】：