Nodejs 如果jade layout 不在同一个目录下，该怎么办？

Nodejs 如果jade layout 不在同一个目录下，该怎么办？

extends …/layout


block content
h1 My Tasks
p
a(href=’/tasks/new’, class=‘btn primary’) Add a Task
-if(docs.length)
table
tr
th Task
each task in docs
tr
td #{task.task}
-else
p You don’t have any Tasks

我加了 …/layout 但是，加上去以后 body的内容就没有了 这是为什么？


4 回复

当使用Jade（现在称为Pug）模板引擎时，如果你的布局文件（例如layout.pug）不在与当前模板相同的目录中，你需要正确地引用它。如果引用不正确，可能会导致布局文件无法正确加载，从而影响页面的渲染。

解决方案

假设你的项目结构如下：

/project-root
  /views
    -index.pug
    /layouts
      -layout.pug

在index.pug中，你需要正确地引用位于layouts目录下的layout.pug文件。正确的引用方式是使用相对路径，并且确保路径正确指向布局文件。

示例代码

index.pug

extends ../layouts/layout

block content
  h1 My Tasks
  p
    a(href='/tasks/new', class='btn primary') Add a Task
  
  if(docs.length)
    table
      tr
        th Task
        each task in docs
          tr
            td #{task.task}
  else
    p You don't have any Tasks

在这个例子中，extends ../layouts/layout 表示布局文件位于当前文件的上一级目录下的layouts目录中。

关于block content

在Jade/Pug中，block content 是一个占位符，用于插入当前模板中的具体内容。当你在子模板中定义block content时，它会替换掉布局文件中相应的block content部分。如果这部分内容没有被正确插入，可能是因为路径错误或者布局文件中没有定义block content块。

检查布局文件

确保你的layout.pug文件中有block content定义：

layouts/layout.pug

doctype
html
  head
    title My Site
  body
    block content

这样，当你在index.pug中使用extends并定义block content时，它会被正确地插入到布局文件中的相应位置。

通过以上步骤，你应该能够正确地引用不在同一目录下的布局文件，并确保所有内容都能正确渲染。


jade extends应该是支持相对路径，绝对路径（指option的basedir） 如果用extends layout是否可以？ 把你的layout内容贴出来。

我已经查出来了，是因为我block下面没有缩进

当在 Node.js 中使用 Jade（现在称为 Pug）模板引擎时，如果布局文件不在同一个目录下，你需要确保路径正确，并且在子模板中正确地扩展布局。你的问题可能是因为路径或继承方式不正确导致的。

解决方案

  1. 确认路径正确：确保 ../layout 路径指向正确的布局文件。
  2. 使用绝对路径：可以考虑使用绝对路径来引用布局文件，这样更清晰和可靠。
  3. 确保继承和块正确：确保在子模板中正确地扩展了布局，并且块（如 content 块）被正确地定义和填充。

示例代码

假设你的项目结构如下：

/project-root
  /views
    - index.pug (你的子模板)
    - layout.pug (布局文件)
  /routes
    - index.js

布局文件 (layout.pug)

doctype
html
  head
    title= title
  body
    block content

子模板 (index.pug)

extends ./views/layout.pug

block content
  h1 My Tasks
  p
    a(href='/tasks/new', class='btn primary') Add a Task
  if(docs.length)
    table
      tr
        th Task
      each task in docs
        tr
          td #{task.task}
  else
    p You don't have any Tasks

关键点

  1. 路径：在 index.pug 中，使用相对路径 ./views/layout.pug 来引用布局文件。根据实际情况调整路径。
  2. 块定义：确保 block content 在布局文件中定义，并在子模板中正确地扩展和填充该块。
  3. 代码缩进：Pug 对缩进非常敏感，确保代码缩进正确。

通过以上步骤，你应该能够解决布局文件不在同一目录下的问题。如果仍然遇到问题，请检查路径是否正确，以及是否有其他语法错误。

回到顶部