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

发布于 2024-11-05 01:55:24 字数 711 浏览 0 评论 0原文

我正在尝试使用 Jade (http://jade-lang.com/) 在我的页面上呈现 JavaScript，

我的项目是在带有 Express 的 NodeJS 中，一切都正常工作，直到我想在头部编写一些内联 JavaScript。即使采用 Jade 文档中的示例，我也无法让它工作，我错过了什么？

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>

肯定有什么想法在这里错过了？

原文

I'm trying to get JavaScript to render on my page using 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. Even taking the examples from the Jade docs I can't get it to work what am I missing?

Jade template

!!! 5
html(lang="en")
  head
    title "Test"
    script(type='text/javascript')
      if (10 == 10) {
        alert("working")
      }
  body

Resulting rendered HTML in browser

<!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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花间憩 2024-11-12 01:55:24

只需使用“script”标签并在其后加一个点即可。

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

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

simply use a 'script' tag with a dot after.

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

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

回复收藏 0 原文

木落 2024-11-12 01:55:24

:javascript 过滤器已在版本 7.0

文档说你现在应该使用 script 标签，后跟 < code>. char 并且前面没有空格。

示例：

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>

The :javascript filter was removed in version 7.0

The docs says you should use a script tag now, followed by a . char and no preceding space.

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>

回复收藏 0 原文

情感失落者 2024-11-12 01:55:24

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

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

这将编译为：

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

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>

回复收藏 0 原文

小霸王臭丫头 2024-11-12 01:55:24

仅不使用脚本标签。

使用 | 的解决方案：

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

或使用 .：

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

No use script tag only.

Solution with |:

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

Or with a .:

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

回复收藏 0 原文

近箐 2024-11-12 01:55:24

我的答案的第三个版本：

这是内联 Jade Javascript 的多行示例。我认为不使用 - 就无法编写它。这是我在部分中使用的闪存消息示例。希望这有帮助！

-if(typeof(info) !== 'undefined')
  -if (info)
    - if(info.length){
      ul
        -info.forEach(function(info){
          li= info
      -})
  -}

您正在尝试获取编译问题中的代码的代码吗？

如果是这样，你不需要两件事：第一，你不需要声明它是Javascript/脚本，你可以在输入 - 后开始编码；其次，在输入 -if 后，您不需要输入 { 或 } 。这就是 Jade 非常甜美的原因。

--------------原始答案如下 ---------------

尝试在 if 前面添加 -：

-if(10 == 10)
  //do whatever you want here as long as it's indented two spaces from
   the `-` above

还有大量 Jade 示例：

https://github.com/visionmedia /jade/blob/master/examples/

THIRD VERSION OF MY ANSWER:

Here's a multiple line example of inline 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. 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 -; second, after you type -if you don't need to type the { or } either. That's what makes Jade pretty sweet.

--------------ORIGINAL ANSWER BELOW ---------------

Try prepending if with -:

-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/

回复收藏 0 原文

花海 2024-11-12 01:55:24

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

仅接受文本的标签，例如
脚本、样式和文本区域不
需要领先|字符

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

回复收藏 0 原文

思念满溢 2024-11-12 01:55:24

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

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

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

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

回复收藏 0 原文

晨曦÷微暖 2024-11-12 01:55:24

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

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

Use the :javascript filter. This will generate a script tag and escape the script contents as CDATA:

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

回复收藏 0 原文

柠檬色的秋千 2024-11-12 01:55:24

在脚本关键字后使用点 (.)

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

这将按预期工作

use a dot (.) after script keyword

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

This will work as expected

回复收藏 0 原文

~没有更多了~

关于作者

四叶草在未来唯美盛开

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

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

Jade 模板

在浏览器中生成呈现的 HTML

Jade template

Resulting rendered HTML in browser

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

遂心如意

5513090242

巷雨优美回忆

junpengz2000

13郎

qq_xU4RDg

友情链接

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

Jade 模板

在浏览器中生成呈现的 HTML

Jade template

Resulting rendered HTML in browser

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

遂心如意

5513090242

巷雨优美回忆

junpengz2000

13郎

qq_xU4RDg

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。