如何使用 Jade / Pug 呈现内联 JavaScript？
Posted
技术标签:
【中文标题】如何使用 Jade / Pug 呈现内联 JavaScript？【英文标题】：How can I render inline JavaScript with Jade / Pug? 【发布时间】：2011-08-17 00:35:20 【问题描述】：我正在尝试使用 Jade (http://jade-lang.com/) 让 javascript 在我的页面上呈现
我的项目是在带有 Express 的 NodeJS 中，一切都正常工作，直到我想在头脑中编写一些内联 JavaScript。即使从 Jade 文档中获取示例，我也无法让它工作我错过了什么？
翡翠模板
!!! 5
html(lang="en")
head
title "Test"
script(type='text/javascript')
if (10 == 10)
alert("working")
body
在浏览器中渲染 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>
这里肯定有什么想法吗？
【问题讨论】：
您在(type='text/javascript') 之后缺少一个点.
!!! 5 已弃用，您必须使用 doctype html
【参考方案1】：
只需使用一个“脚本”标签，后面加一个点。
script.
var users = !JSON.stringify(users).replace(/<\//g, "<\\/")
https://github.com/pugjs/pug/blob/master/packages/pug/examples/dynamicscript.pug
【讨论】：
很好的解决方案，但它只会产生<script> 而不是<script type="text/javascript">。
type="text/javascript" 是<script> 标签上type 字段的默认值。你不需要设置它。
多行代码呢？以这种方式嵌入 Jade 时，有没有办法在我的 Javascript 中进行适当的代码缩进？
Jade 的策略已更改，内联脚本标签现在应该附加一个 .。所以script. 后面跟着缩进的 JS 块。
那个例子是脚本注入漏洞。见github.com/visionmedia/jade/issues/1474【参考方案2】：
script(nonce="some-nonce").
console.log("test");
//- Workaround
<script nonce="some-nonce">console.log("test");</script>
【讨论】：
【参考方案3】：使用指定类型的脚本标签，只需在点之前包含它：
script(type="text/javascript").
if (10 == 10)
alert("working");
这将编译为：
<script type="text/javascript">
if (10 == 10)
alert("working");
</script>
【讨论】：
只要script. 就可以了。【参考方案4】：
仅不使用脚本标签。
| 的解决方案：
script
| if (10 == 10)
| alert("working")
|
或者.:
script.
if (10 == 10)
alert("working")
【讨论】：
我推荐.。否则你必须在每一行写|。【参考方案5】：
:javascript 过滤器已在 version 7.0 中删除
您现在应该使用script 标记docs says，后跟. 字符且前面没有空格。
例子：
script.
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
将被编译为
<script>
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
</script>
【讨论】：
标签脚本后面有一个点，在所有 javascript 块中是否有任何方法可以在没有换行符的情况下呈现它？ @Joaquinglez 我不知道【参考方案6】：使用:javascript 过滤器。这将生成一个脚本标记并将脚本内容转义为 CDATA：
!!! 5
html(lang="en")
head
title "Test"
:javascript
if (10 == 10)
alert("working")
body
【讨论】：
@aaaidan 你是对的。 Scalate 支持它（我在这里毫无问题地使用它：github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/…）但看起来纯 Jade 不支持它，因为它没有在此处列出：github.com/visionmedia/jade#features。太可惜了！ 是的，会很好。正如最佳答案所说，script. 工作正常，并且是合法的!!! 5【参考方案7】：
对于多行内容，jade 通常使用“|”，但是：
只接受文本的标签，例如 脚本、样式和文本区域不 需要领先|人物
这就是说，我无法重现您遇到的问题。当我将该代码粘贴到玉模板中时，它会产生正确的输出并在页面加载时提示我一个警报。
【讨论】：
【参考方案8】：我的答案的第三个版本：
这是一个内联 Jade Javascript 的多行示例。我认为不使用- 就无法编写它。这是我在部分中使用的 Flash 消息示例。希望这会有所帮助！
-if(typeof(info) !== 'undefined')
-if (info)
- if(info.length)
ul
-info.forEach(function(info)
li= info
-)
-
您尝试获取的代码是否用于编译您的问题中的代码？
如果是这样，你不需要两件事：第一，你不需要声明它是Javascript/a脚本，你可以在输入-后开始编码；其次，输入-if 后，您也不需要输入 或。这就是让 Jade 非常可爱的原因。
-------------下面的原始答案---------------
尝试在if 前面加上-：
-if(10 == 10)
//do whatever you want here as long as it's indented two spaces from
the `-` above
还有很多翡翠的例子：
https://github.com/visionmedia/jade/blob/master/examples/
【讨论】：
感谢约翰将其用于奇数的单行，但是我无论如何都看不到在不加“-”的情况下执行多行。 Jade 主页（link 甚至有一个我正在尝试做的示例，但它不会编译。我也在使用最新版本。 所以你问的是如何让多行 Javascript 代码低于一行？ @Bluey 同样在这里，我从来没有得到这个工作。你应该在 github 问题上提问。 马克，现在已经开始使用 Sam Stephenson 的 Eco 而不是 Jade。我只是将jade用作测试的快速UI。 Jade 0.12.4 允许我在没有在 JS 下方添加 - 的情况下编写脚本（）。以上是关于如何使用 Jade / Pug 呈现内联 JavaScript？的主要内容，如果未能解决你的问题，请参考以下文章