Nodejs jade 模版里面试用include， 子模板首行必须要留一个空行？

Nodejs jade 模版里面试用include， 子模板首行必须要留一个空行？

node -v v0.10.5

.navbar-wrapper // Wrap the .navbar in .container

如果不留这个空行，我的页面就会报语法错误 如果留这个空行，就会影响我的页面输出，多出一个空行

难道，我必须要留这个空行？可是看官方的example也没留啊，这是为什么？！

5 回复

Node.js Jade 模板中使用 include，子模板首行必须要留一个空行？

背景

在使用 Node.js 和 Jade 模板引擎时，有时会遇到一些令人困惑的行为。比如，在某些情况下，如果你的子模板文件的第一行没有留空行，可能会导致渲染错误。

示例

假设你有一个主模板 index.jade 和一个子模板 header.jade。

header.jade

.navbar-wrapper
  // Wrap the .navbar in .container
  .navbar
    ul
      li= 'Home'
      li= 'About'
      li= 'Contact'

index.jade

doctype html
html
  head
    title My Page
  body
    include ./header.jade
    p This is my main content.

问题描述

当你运行这个模板，如果你的 header.jade 文件的第一行没有留空行，你可能会看到类似这样的错误：

Error: Unexpected token ILLEGAL

解释

Jade 模板引擎对缩进非常敏感。在某些情况下，如果你的子模板文件的第一行没有留空行，Jade 可能会误解析你的模板内容，从而导致语法错误。这并不是 Jade 的官方文档中明确说明的要求，但可能是由于 Jade 在处理嵌套内容时的内部机制所导致的。

解决方案

为了确保你的模板能够正确渲染，最好在子模板文件的第一行留一个空行。这样可以避免潜在的语法错误。

修改后的 header.jade

.navbar-wrapper
  // Wrap the .navbar in .container
  .navbar
    ul
      li= 'Home'
      li= 'About'
      li= 'Contact'

结论

虽然在官方文档中没有明确提到这一点，但在实际开发过程中，为了解决潜在的解析问题，建议在子模板文件的第一行留一个空行。这不仅可以避免语法错误，还能确保你的页面内容按预期显示。

希望这个解释对你有所帮助！


.navbar-wrapper上面有个空行

请附上主模板include一句的上下几行内容和语法错误的报错，在你眼中或许不值一提的报错信息，很大的几率实际上已经指出问题所在。

感谢回复。

报错信息：‘Unexpected intend’

已解决：因为我是在windows下编程，所以默认的文件是GBK,后来转成UTF-8后是包含BOM的，用工具移除BOM后，一切正常。另外语法里面!!!也可以解决

中文的相关讨论还是太少了，查出这个原因花了不少时间

在使用 Jade（Pug）模板引擎时，子模板通过 include 引入的内容可能会遇到一些格式问题。特别是，子模板的首行必须留一个空行，这通常是因为 Jade 对于空行非常敏感。

示例代码

假设我们有两个文件：

layout.jade

doctype html
html
  head
    title= title
  body
    include navbar

navbar.jade

.navbar-wrapper
  // Wrap the .navbar in .container
  .navbar
    ul.nav
      li= menuName

在这个例子中，navbar.jade 的首行前面有一个空行。如果你删除这个空行，Jade 可能会解析出错。

解释

Jade/Pug 模板引擎对缩进非常敏感。子模板 navbar.jade 首行之前的空行可能被解释为文本内容的一部分。如果你不保留这个空行，Jade 可能无法正确解析模板结构，导致语法错误。

然而，如果你不希望子模板中出现额外的空行，可以尝试以下方法：

  1. 使用条件判断：如果你不想在最终生成的 HTML 中包含多余的空行，可以在父模板中进行条件判断。

  2. 修改子模板内容：确保子模板内容的格式正确，并且没有不必要的空白行。

  3. 升级 Jade 版本：如果你使用的是较旧版本的 Jade，考虑升级到最新版本。新版本可能已经修复了这些敏感性问题。

希望这能帮助你解决 Jade 模板中的问题。

回到顶部