我如何用Jade / Pug渲染内联JavaScript ?

我试图让JavaScript渲染在我的页面上使用Jade (http://jade-lang.com/)

我的项目是在NodeJS与Express，一切都是正常工作，直到我想在头部写一些内联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>

这里肯定遗漏了一些东西有什么想法吗?

当前回答

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

标记，只接受文本，如脚本、样式和文本区域没有需要开头的|字符

话虽如此，我无法重现你遇到的问题。当我在jade模板中粘贴该代码时，它会产生正确的输出，并在页面加载时提示我一个警报。

2011-05-30 13:16:11

其他回答

简单地使用“script”标签后加一个点。

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

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

2011-07-27 01:59:41

script(nonce="some-nonce").
  console.log("test");

//- Workaround
<script nonce="some-nonce">console.log("test");</script>

2019-08-22 00:15:04

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

标记，只接受文本，如脚本、样式和文本区域没有需要开头的|字符

话虽如此，我无法重现你遇到的问题。当我在jade模板中粘贴该代码时，它会产生正确的输出，并在页面加载时提示我一个警报。

2011-05-30 13:16:11

不使用脚本标记。

|解决方案:

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

或者用。

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

2017-01-21 07:29:39

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

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

2013-05-26 10:54:38

我如何用Jade / Pug渲染内联JavaScript ?

推荐文章

最新文章

标签