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

node.js Node.js

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>

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

第2741篇《如何使用Jade / Pug渲染内联JavaScript？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
宝儿村村 2020.03.23

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

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

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

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

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

Itachi 2020.03.23

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

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

这将编译为：

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
番长猴子 2020.03.23

仅不使用脚本标记。

解决方案|：

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

或搭配.：

script.
  if (10 == 10) {
    alert("working")
  }
十三路易 2020.03.23

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android