Nodejs中关于jade引擎的一些页面显示问题

Nodejs中关于jade引擎的一些页面显示问题

今天做到显示页面了，先看看了自己的渲染引擎是jade，不开心了，书写有点别扭，没有书上的ejs方便。在社区找了一些例子，粘进去，试了下，可以显示，便开始学习了。关于加载js这段，我写在HTML标签script中的有一段window.onload = function(){…}显示却一直报错，为什么？不解

6 回复

Node.js 中关于 Jade 引擎的一些页面显示问题

背景

最近我在使用 Node.js 和 Jade 模板引擎时遇到了一些页面显示问题。我发现 Jade 的语法与我之前用过的 EJS 模板引擎相比有些不同，这让我感到有些不习惯。尽管如此，我还是通过社区找到了一些示例代码，并尝试将它们粘贴到我的项目中进行测试。然而，在处理 JavaScript 代码的嵌入时，遇到了一些问题。

具体问题

具体来说，我在 Jade 模板中尝试加载 JavaScript 代码时遇到了错误。例如，我在 HTML 标签 <script> 中写了一段 window.onload 代码：

script.
  window.onload = function() {
    console.log('页面已加载');
  }

然而，当我运行项目时，浏览器控制台总是显示错误信息。我对此感到困惑，不知道是什么原因导致的。

解决方案

实际上，Jade 的语法对于嵌入 JavaScript 代码有一些特定的要求。在 Jade 中，你需要确保 JavaScript 代码正确缩进，并且不需要额外的引号或分号。以下是一个修正后的示例：

doctype html
html
  head
    title 示例页面
  body
    h1 欢迎访问示例页面
    script.
      window.onload = function() {
        console.log('页面已加载');
      }

另外，如果你需要在 Jade 模板中包含外部的 JavaScript 文件，你可以直接使用标准的 HTML 标签来引用文件路径。例如：

doctype html
html
  head
    title 示例页面
    script(src='/path/to/your/script.js')
  body
    h1 欢迎访问示例页面

总结

虽然 Jade 模板引擎的语法可能与你习惯的其他模板引擎有所不同，但只要熟悉其规则并遵循正确的格式，它仍然可以很好地工作。如果遇到类似的问题，检查你的缩进和语法是否正确是非常重要的。希望这些示例能帮助你更好地理解和使用 Jade 模板引擎。


建议贴全，这个jade没用习惯之前确实狠炒蛋。

这话题好跳跃啊 = =…… 【LZ如果表示Jade不好用的话也可以选用EJS来渲染的~ “window.onload = function(){…}显示却一直报错”……？这个是什么没看懂……

这是.jade文件 html(style='color: green;') // this is a comment head title Mixed HTML Example body h1 Mixed HTML Example ul li a(href='/url', title="Link Title") Link 1 script window.onload = function(){ alert(1); } 上面是我举的一个例子，HTML的显示没有什么问题，问题在脚本上，如果直接写alert(1)的话，终端不报错，页面也可以正常弹出alert，但是如果我加上window.onload =function(){…}时，终端就出错了。就是这里不明白。

这是.jade文件 html(style=‘color: green;’) // this is a comment head title Mixed HTML Example body h1 Mixed HTML Example ul li a(href=’/url’, title=“Link Title”) Link 1 script window.onload = function(){ alert(1); } 上面是我举的一个例子，HTML的显示没有什么问题，问题在脚本上，如果直接写alert(1)的话，终端不报错，页面也可以正常弹出alert，但是如果我加上window.onload =function(){…}时，终端就出错了。就是这里不明白

在Node.js中使用Jade（现在称为Pug）作为模板引擎时，可能会遇到一些与JavaScript代码嵌入相关的显示问题。你在<script>标签里写的JavaScript代码可能会因为转义问题或语法错误而无法正常工作。

示例代码

假设你的HTML模板文件为index.pug，内容如下：

doctype html
html
  head
    title My Jade Page
  body
    h1 Welcome to My Site
    script.
      window.onload = function() {
        console.log('Page loaded');
      }

在这个例子中，我们使用了.script来确保内联JavaScript代码不会被当作字符串处理。

原因解析

  1. 字符串转义问题：

    • 如果你直接将JavaScript代码写在<script>标签里，可能会遇到字符串转义问题。例如，如果你使用了双引号(")来包裹字符串，那么它可能会被当作HTML转义字符处理。

  2. 正确使用Pug语法：

    • 使用script.而不是script，这样可以防止Pug对代码进行额外的转义处理。注意，Pug默认会对script标签内的内容进行HTML转义，以防止XSS攻击。使用.script可以告诉Pug不要转义这段代码。

  3. 语法错误：

    • 确保你的JavaScript代码本身没有语法错误，如缺少分号、括号不匹配等。

总结

使用script.标签可以避免Pug对内联JavaScript代码的转义处理，从而让你的代码能够正确执行。如果问题依然存在，请检查JavaScript代码本身的语法错误。

回到顶部