无法使用 Jade 模板包含相对路径文件

Question

我在尝试将文件包含在同一文件夹中时收到以下错误消息：

the "filename" option is required to use "include" with "relative" paths

有两个文件：

index.jade

list_of_items.jade

.content-container
  .row
    .col-lg-10.col-lg-offset-1.col-xs-12
      .row
        .col-xs-3
          include list_of_items
        .col-xs-9
          include content

我尝试使用基本路径，但随后收到以下错误：

the "basedir" option is required to use "include" with "absolute" paths

基本路径的代码如下：

.content-container
  .row
    .col-lg-10.col-lg-offset-1.col-xs-12
      .row
        .col-xs-3
          include /User/project/list_of_items
        .col-xs-9
          include content

我完全不知所措。我在某处缺少其他设置吗？感觉这应该是一件超级简单的事情。我错过了什么？

Answer 1

您正在使用 jade.compile()，对吗？如错误消息所述，您没有传递 filename 选项。因为你只是给了一个字符串来编译成 Jade，所以它不知道去哪里寻找包含的文件。

脚本和jade 文件在同一文件夹中的示例。 index.jade 文件包含另一个使用 include foo:

的文件

var jade = require('jade'),
    fs   = require('fs'),
    path = require('path');

var fn = jade.compile(fs.readFileSync('index.jade', 'utf-8'), {
  filename: path.join(__dirname, 'index.jade'),
  pretty:   true
});

console.log(fn());

或者使用 "absolute paths" 在 Jade 中相对于给定的 basedir 是绝对的，您将执行以下操作。 index.jade 文件现在包含相同的文件，但使用绝对路径，即。 include /foo:

var jade = require('jade'),
    fs   = require('fs');

var fn = jade.compile(fs.readFileSync('index.jade', 'utf-8'), {
  basedir: __dirname,
  pretty:  true
});

console.log(fn());

对于所有选项，请参阅 API docs。

Answer 2

您可以在语言环境中使用函数呈现动态模板。此方法也支持过滤器。

玉档

+render('contents/index.md', {filter:'marked'});

Gulp管道

.pipe(jade({
  locals: {
    render: function (filePath, options) {
      return jade.render(`include${options.filter ? (':' + options.filter) : ''} ${filePath}`, {
        filename: pathToJadeFileDir + '/something-not_important'
      });
    }
  }
}))

无法使用 Jade 模板包含相对路径文件

Unable to include relative path file using Jade Template

javascript

node.js

pug