Nodejs中关于jade里面的extend layout的问题。

Nodejs中关于jade里面的extend layout的问题。

弄了一下午了都，真心求大家帮忙。

我知道extend后面跟的是路径，而且是当前目录的。

extend layout 应该是指 ./layout.jade

因为我的文件放在不同的目录里面，文件嵌套的很深，如果要写的话，每个都要写成：

extend ../../../..(etc)../../layout.jade

这样。

有没有办法统一设定layout，又或者让 extend layout 是从根目录开始查找 /layout.jade。


3 回复

当然可以。在 Node.js 中使用 Jade（现在称为 Pug）模板引擎时，处理 extend 和 layout 的问题确实会遇到一些挑战，特别是在文件结构复杂的情况下。以下是一些解决方案和示例代码来帮助你解决这个问题。

解决方案

  1. 设置基础路径：你可以通过配置 Jade 引擎的基础路径来简化 extend 的路径。

  2. 使用相对路径：虽然这可能会变得冗长，但你可以继续使用相对路径，但可以通过引入一些工具来简化这个过程。

  3. 使用绝对路径：如果你希望从根目录开始查找 layout.jade 文件，可以设置一个绝对路径。

示例代码

假设你的项目结构如下：

project-root/
├── app.js
├── views/
│   ├── layouts/
│   │   └── default.pug
│   ├── pages/
│   │   ├── home.pug
│   │   └── about.pug

设置基础路径

你可以在你的应用初始化代码中设置 Jade 引擎的基础路径：

const express = require('express');
const app = express();
const pug = require('pug');

app.set('views', './views'); // 设置视图目录
app.set('view engine', 'pug');

// 设置基础路径
app.engine('pug', pug.__express);

app.get('/', (req, res) => {
    res.render('pages/home', { title: 'Home' });
});

app.listen(3000, () => {
    console.log('App is running on port 3000');
});

使用相对路径

在 home.pug 文件中，你可以使用相对路径来引用布局文件：

// views/pages/home.pug
extends ../layouts/default

block content
    h1 Home Page

使用绝对路径

如果你想从根目录开始查找 layout.jade 文件，可以在 Jade 引擎中设置绝对路径：

app.set('views', path.join(__dirname, 'views'));

然后在 home.pug 文件中使用绝对路径：

// views/pages/home.pug
extends /views/layouts/default

block content
    h1 Home Page

总结

通过上述方法，你可以更方便地管理复杂的文件结构，并且避免冗长的相对路径。选择适合你项目结构的方法，可以大大提高开发效率。


没人知道吗？ 之后我又试了一下ejs，貌似它的include没法传值。有人知道这个怎么弄吗？

在Node.js中使用Jade（现在称为Pug）模板引擎时，如果你想避免在每个子视图中重复书写冗长的extends路径，可以通过配置来简化这个过程。

解决方案

你可以设置一个基础路径或使用相对路径的简化方法。以下是两种解决方案：

1. 使用app.set('views', path) 设置视图路径

在你的Express应用中，可以设置视图解析的基础路径，这样所有视图文件的路径都可以相对于这个基础路径解析。

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

const app = express();
app.set('views', path.join(__dirname, 'views')); // 设置视图文件的基础路径

然后在每个Jade模板文件中使用相对路径：

// 在任何子文件中
extends ../layout

2. 统一的布局文件引用

如果你希望在多个子视图中统一使用相同的布局文件，但不想每次都指定复杂的路径，可以考虑将布局文件放在一个固定的位置，并且通过配置将这个位置设置为视图解析的基础路径。

示例代码

假设你的项目结构如下：

/project-root
  /views
    /pages
      index.pug
    layout.pug
  app.js

在app.js中设置视图路径：

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

const app = express();
app.set('views', path.join(__dirname, 'views')); // 设置视图基础路径
app.set('view engine', 'pug'); // 设置Pug作为模板引擎

// 配置路由
app.get('/', (req, res) => {
  res.render('pages/index', { title: 'Home Page' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

在/views/layout.pug中定义布局：

doctype
html
  head
    title= title
  body
    block content

在/views/pages/index.pug中继承布局并扩展内容：

extends ../layout

block content
  h1 Welcome to the Home Page

通过这种方式，你只需要一次设置视图的基础路径，然后在每个子视图中只需使用简单的相对路径来继承布局文件。

回到顶部