[求助]Nodejs Jade 的 extends 那里出错了, 正确的用法应该是什么?

Jade 的 extends 弄了半天不明白, 我出错的时候的目录结构是这样的:

➤➤ tree
.
├── app.coffee
├── html
├── lib
│   ├── content.coffee
│   ├── index.coffee
│   └── source.coffee
├── package.json
├── self
│   ├── coffee
│   │   └── h.coffee
│   ├── css
│   │   └── global.css
│   ├── jade
│   │   ├── layout.jade
│   │   └── page.jade

➤➤ cat self/jade/layout.jade 
!!!5
html
  head
    title #{title}
    meta(charset='utf-8')
    link(rel='stylesheet',href='/self/css/global.css')
    script(src='http://192.168.1.117:8072/doodle.js')
  body
    #box
      #side
        #banner
          for name in paths
            span.seperate /
            a.name(href="#{name.url}")= name.text
        #index
            for item in files
              .file
                a.filename(href='#{item.url}')= item.text
      block content
        #body this is a directory

➤➤ cat self/jade/page.jade 
extends layout.jade

block content
  #body= html

报错是这样的:

➤➤ coffee app.coffee 
Error: ./self/jade/layout.jade:1
  > 1| !!!5
    2| html
    3|   head
    4|     title #{title}

ENOENT, no such file or directory 'self/jade/layout.jade.jade'
    at Object.fs.openSync (fs.js:338:18)
    at Object.fs.readFileSync (fs.js:182:15)
    at Object.Parser.parseExtends (/opt/app/page-site/node_modules/jade/lib/parser.js:413:18)
    at Object.Parser.parseExpr (/opt/app/page-site/node_modules/jade/lib/parser.js:206:21)
    at Object.Parser.parse (/opt/app/page-site/node_modules/jade/lib/parser.js:130:25)
    at parse (/opt/app/page-site/node_modules/jade/lib/jade.js:100:62)
    at Object.exports.compile (/opt/app/page-site/node_modules/jade/lib/jade.js:163:9)
    at Object.<anonymous> (/opt/app/page-site/lib/content.coffee:32:20)
    at Object.<anonymous> (/opt/app/page-site/lib/content.coffee:95:4)
    at Module._compile (module.js:449:26)

代码在 lib/ 下面的文件夹里面:

page.path = '../self/jade/page.jade'
page.path = path.join __dirname, page.path
page.tmpl = fs.readFileSync page.path, 'utf8'
page.html = jade.compile page.tmpl,
  pretty: yes, filename: './self/jade/layout.jade'

我试过去掉后缀, 但那又提示文件找不到…

Error: ENOENT, no such file or directory ‘./self/jade/layout’

caililin 1楼•2 个月前

根据你提供的错误信息和目录结构，问题可能出在 Jade 模板文件路径的解析上。Jade 在处理 extends 和 include 语句时需要正确识别模板文件的路径。

以下是正确的使用方法和示例代码：

目录结构

.
├── app.coffee
├── html
├── lib
│   ├── content.coffee
│   ├── index.coffee
│   └── source.coffee
├── package.json
└── self
    ├── coffee
    │   └── h.coffee
    ├── css
    │   └── global.css
    └── jade
        ├── layout.jade
        └── page.jade

示例代码

`layout.jade`

!!!5
html
  head
    title #{title}
    meta(charset='utf-8')
    link(rel='stylesheet', href='/self/css/global.css')
    script(src='http://192.168.1.117:8072/doodle.js')
  body
    #box
      #side
        #banner
          for name in paths
            span.seperate /
            a.name(href="#{name.url}")= name.text
        #index
            for item in files
              .file
                a.filename(href='#{item.url}')= item.text
      block content
        #body this is a directory

`page.jade`

extends ../layout.jade

block content
  #body= html

解释

相对路径：在 page.jade 中，extends 语句使用了相对路径 ../layout.jade 来引用父级目录中的 layout.jade 文件。
确保路径正确：确保 layout.jade 和 page.jade 文件的实际位置与相对路径一致。
读取模板文件：在 content.coffee 中正确读取模板文件，并传递正确的路径给 Jade 编译器。

`content.coffee`

fs = require('fs')
jade = require('jade')

# 确保路径正确
pagePath = path.join(__dirname, '../self/jade/page.jade')
layoutPath = path.join(__dirname, '../self/jade/layout.jade')

# 读取模板文件
pageTmpl = fs.readFileSync(pagePath, 'utf8')

# 编译模板
pageHtml = jade.compile(pageTmpl, {
  pretty: true,
  filename: layoutPath
})

# 渲染模板
html = pageHtml({
  title: 'Your Title',
  paths: [{url: '/path1', text: 'Text1'}, {url: '/path2', text: 'Text2'}],
  files: [{url: '/file1', text: 'File1'}, {url: '/file2', text: 'File2'}],
  html: 'Your HTML Content'
})

console.log(html)

通过这种方式，可以确保 extends 语句正确引用到父级目录中的 layout.jade 文件，并且路径解析不会出现问题。

gougou168 2楼•2 个月前

网络课挂的, 数据结构数据库混过去的, 操作系统编译原理都没上过… 我… 总之比如遇到计算机系同学就死囧了. 以后标题不会再有这两个字了…

上面结尾写了的, 我去掉了的后缀会提示找不到文件

ionicwang 3楼•2 个月前

旁观

sinazl 4楼•2 个月前

在Jade（现在称为Pug）模板引擎中使用extends关键字时，需要注意文件路径和文件扩展名的正确性。根据你的描述，错误信息表明模板引擎无法找到指定的布局文件。这通常是因为文件路径不正确或者文件扩展名有问题。

正确的做法是在使用extends关键字时确保文件路径和扩展名是正确的。此外，建议使用相对路径来引用布局文件，并且确保布局文件存在并且可以被正确读取。

以下是一些修正后的代码示例：

修改 `page.jade` 文件

// self/jade/page.jade
extends layout

block content
  #body= html

注意：这里去掉了.jade扩展名，因为Jade引擎会自动添加该扩展名。

修改 Node.js 代码

确保你在读取模板文件时使用正确的路径。你可以使用Node.js的path模块来构建正确的路径。

const path = require('path');
const jade = require('jade');

const page = {};
page.path = path.join(__dirname, '../self/jade/page.jade');
page.tmpl = fs.readFileSync(page.path, 'utf8');
page.html = jade.compile(page.tmpl, {
  pretty: true,
  filename: path.join(__dirname, '../self/jade/layout.jade')
});

console.log(page.html({ title: 'My Page Title', html: '<p>Hello World!</p>' }));

在这个示例中，filename选项用于指定布局文件的路径。使用path.join来确保路径是正确的。

通过这些修改，你应该能够解决路径问题并成功使用extends关键字。

[求助]Nodejs Jade 的 extends 那里出错了, 正确的用法应该是什么?

目录结构

示例代码

layout.jade

page.jade

解释

content.coffee

修改 page.jade 文件

修改 Node.js 代码

`layout.jade`

`page.jade`

`content.coffee`

修改 `page.jade` 文件