如何使用Jade / Pug渲染内联JavaScript？

LEY老丝樱2020-03-23

我正在尝试使用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>

这里肯定有什么想念的想法吗？

宝儿村村2020/03/23 11:42:12

使用:javascript过滤器。这将生成一个脚本标记，并将脚本内容转义为CDATA：

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body

宝儿2020/03/23 11:42:12

对于多行内容，玉通常使用“ |”，但是：

仅接受文本（例如脚本，样式和文本区域）的标签不需要前导| 字符

这就是说，我无法重现您遇到的问题。当我将该代码粘贴到Jade模板中时，它会产生正确的输出，并在页面加载时提示我。

Itachi2020/03/23 11:42:12

使用指定类型的脚本标记，只需将其包括在点号之前：

script(type="text/javascript").
  if (10 == 10) {
    alert("working");
  }

这将编译为：

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>

番长猴子2020/03/23 11:42:12

仅不使用脚本标记。

解决方案|：

script
  | if (10 == 10) {
  |   alert("working")
  | }

或搭配.：

script.
  if (10 == 10) {
    alert("working")
  }

十三路易2020/03/23 11:42:12

只需在后面加上点号即可使用“脚本”标签。

script.
  var users = !{JSON.stringify(users).replace(/<\//g, "<\\/")}

https://github.com/pugjs/pug/blob/master/examples/dynamicscript.pug

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer