node.js 如何使用 Jade / Pug 呈现内联 JavaScript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5858218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I render inline JavaScript with Jade / Pug?
提问by JMWhittaker
I'm trying to get JavaScript to render on my page using Jade (http://jade-lang.com/)
我正在尝试使用 Jade (http://jade-lang.com/) 在我的页面上呈现 JavaScript
My project is in NodeJS with Express, eveything is working correctly until I want to write some inline JavaScript in the head. Even taking the examples from the Jade docs I can't get it to work what am I missing?
我的项目在 NodeJS 和 Express 中，一切正常，直到我想在头中编写一些内联 JavaScript。即使采用 Jade 文档中的示例，我也无法使其正常工作，我缺少什么？
Jade template
玉石模板
!!! 5
html(lang="en")
head
title "Test"
script(type='text/javascript')
if (10 == 10) {
alert("working")
}
body
Resulting rendered HTML in browser
结果在浏览器中呈现的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>"Test"</title>
<script type="text/javascript">
<if>(10 == 10) {<alert working></alert></if>}
</script>
</head>
<body>
</body>
</html>
Somethings definitely a miss here any ideas?
有什么想法肯定会错过吗？
回答by liangzan
simply use a 'script' tag with a dot after.
只需使用后跟一个点的“脚本”标签即可。
script.
var users = !{JSON.stringify(users).replace(/<\//g, "<\/")}
https://github.com/pugjs/pug/blob/master/examples/dynamicscript.pug
https://github.com/pugjs/pug/blob/master/examples/dynamicscript.pug
回答by Felipe Sabino
The :javascriptfilter was removed in version 7.0
将:javascript在移除过滤器7.0版本
The docs saysyou should use a scripttag now, followed by a .char and no preceding space.
该文件说，你应该用script现在的标签，随后.char和前面没有空间。
Example:
例子：
script.
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
will be compiled to
将被编译为
<script>
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
</script>
回答by Stefan Jarina
Use script tag with the type specified, simply include it before the dot:
使用指定类型的脚本标签，只需将其包含在点之前：
script(type="text/javascript").
if (10 == 10) {
alert("working");
}
This will compile to:
这将编译为：
<script type="text/javascript">
if (10 == 10) {
alert("working");
}
</script>
回答by Olivier C
No use script tag only.
仅不使用脚本标记。
Solution with |:
解决方案|：
script
| if (10 == 10) {
| alert("working")
| }
Or with a .:
或者用一个.：
script.
if (10 == 10) {
alert("working")
}
回答by JohnAllen
THIRD VERSION OF MY ANSWER:
我的答案的第三个版本：
Here's a multiple line example of inline Jade Javascript. I don't think you can write it without using a -. This is a flash message example that I use in a partial. Hope this helps!
这是内联 Jade Javascript 的多行示例。我认为不使用-. 这是我在部分中使用的一个 flash 消息示例。希望这可以帮助！
-if(typeof(info) !== 'undefined')
-if (info)
- if(info.length){
ul
-info.forEach(function(info){
li= info
-})
-}
Is the code you're trying to get to compile the code in your question?
是您试图编译问题中的代码的代码吗？
If so, you don't need two things: first, you don't need to declare that it's Javascript/a script, you can just started coding after typing -; second, after you type -ifyou don't need to type the {or }either. That's what makes Jade pretty sweet.
如果是这样，你不需要两件事：第一，你不需要声明它是 Javascript/一个脚本，你可以在输入后开始编码-；其次，在您键入之后，您-if不需要键入{或 }。这就是让 Jade 非常甜蜜的原因。
--------------ORIGINAL ANSWER BELOW ---------------
--------------以下原答案 ---------------
Try prepending ifwith -:
尝试在前面if加上-：
-if(10 == 10)
//do whatever you want here as long as it's indented two spaces from
the `-` above
There are also tons of Jade examples at:
还有大量的 Jade 示例：
回答by JPanneel
For multi-line content jade normally uses a "|", however:
对于多行内容，jade 通常使用“|”，但是：
Tags that accept only text such as script, style, and textarea do not need the leading | character
只接受脚本、样式和文本区域等文本的标签不需要前导 | 特点
This said, i cannot reproduce the problem you are having. When i paste that code in a jade template, it produces the right output and prompts me with an alert on page-load.
这就是说，我无法重现您遇到的问题。当我将该代码粘贴到 Jade 模板中时，它会生成正确的输出并在页面加载时提示我。
回答by Chris B
Use the :javascriptfilter. This will generate a script tag and escape the script contents as CDATA:
使用:javascript过滤器。这将生成一个脚本标记并将脚本内容转义为 CDATA：
!!! 5
html(lang="en")
head
title "Test"
:javascript
if (10 == 10) {
alert("working")
}
body
回答by Ransomware0
script(nonce="some-nonce").
console.log("test");
//- Workaround
<script nonce="some-nonce">console.log("test");</script>
