如何使用 Jade / Pug 渲染内联 JavaScript？
[英]How can I render inline JavaScript with Jade / Pug?
问题描述
I'm trying to get JavaScript to render on my page using Jade (http://jade-lang.com/)
我正在尝试让 JavaScript 使用 Jade（http://jade-lang.com/）在我的页面上呈现
My project is in NodeJS with Express, eveything is working correctly until I want to write some inline JavaScript in the head.我的项目在带有 Express 的 NodeJS 中，一切工作正常，直到我想在头部编写一些内联 JavaScript。 Even taking the examples from the Jade docs I can't get it to work what am I missing?即使从 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?绝对是这里的一些东西有什么想法吗？
8 个解决方案
解决方案1
344 2011-07-27 01:59:41
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
解决方案2
100 2013-10-13 21:20:38
The :javascript filter was removed in version 7.0 :javascript过滤器在7.0 版中被移除
The docs says you should use a script tag now, followed by a .文档说您现在应该使用script标签，然后是. char and no preceding space. 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>
解决方案3
48 2014-04-05 11:48:57
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>
解决方案4
23 2017-01-21 07:29:39
No use script tag only.仅不使用脚本标签。
Solution with |解决方案| : ：
script
| if (10 == 10) {
| alert("working")
| }
Or with a .或带有. : ：
script.
if (10 == 10) {
alert("working")
}
解决方案5
3 2011-05-02 17:00:52
THIRD VERSION OF MY ANSWER:我的答案的第三个版本：
Here's a multiple line example of inline Jade Javascript.这是内联 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.这是我在部分中使用的 flash 消息示例。 Hope this helps!希望这可以帮助！
-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 - ;如果是这样，你不需要两件事：第一，你不需要声明它是 Javascript/a 脚本，你可以在输入-后开始编码； second, after you type -if you don't need to type the { or } either.其次，在你输入-if你也不需要输入{或}之后。 That's what makes Jade pretty sweet.这就是让 Jade 非常甜美的原因。
--------------ORIGINAL ANSWER BELOW --------------- --------------下面的原始答案---------------
Try prepending if with - :尝试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:也有大量翡翠的例子在：
https://github.com/visionmedia/jade/blob/master/examples/ https://github.com/visionmedia/jade/blob/master/examples/
解决方案6
1 2011-05-30 13:16:11
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 |
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.当我将该代码粘贴到玉模板中时，它会生成正确的 output 并在页面加载时提示我警报。
解决方案7
1 2011-08-23 14:01:43
I would check your white spaces.我会检查你的空白。
Also you can bring your JS file in as an include.你也可以把你的 JS 文件作为一个包含进来。 I know its not an answer to what is going wrong but you will find it easier to Debug your JS since any errors end up referring to a line number in a file that is real.我知道这不是问题的答案，但您会发现调试 JS 更容易，因为任何错误最终都会引用真实文件中的行号。
解决方案8
0 2013-05-26 10:54:38
Use the :javascript filter.使用:javascript过滤器。 This will generate a script tag and escape the script contents as CDATA:这将生成一个脚本标记并将脚本内容转义为 CDATA：
!!! 5
html(lang="en")
head
title "Test"
:javascript
if (10 == 10) {
alert("working")
}
body
解决方案9
0 2019-08-22 00:15:04
script(nonce="some-nonce").
console.log("test");
//- Workaround
<script nonce="some-nonce">console.log("test");</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.