Nodejs express的jade模板只能在同一级目录下吗?

Nodejs express的jade模板只能在同一级目录下吗?

可以放在子目录的

6 回复

Nodejs Express 的 Jade 模板只能在同一级目录下吗?

答案是否定的。在使用 Node.js 和 Express 框架时，Jade 模板（现在称为 Pug）并不限于同一级目录。你可以将 Jade 模板文件放置在项目的任意目录中，并通过配置 Express 来正确引用这些模板。

示例

假设你的项目结构如下：

myapp/
├── app.js
├── views/
│   ├── index.pug
│   └── partials/
│       └── header.pug
└── public/
    └── stylesheets/
        └── style.css

在这个例子中，index.pug 文件在 views 目录中，而 header.pug 文件则在一个名为 partials 的子目录中。

配置 Express

你需要在 Express 应用程序中配置视图引擎，并指定视图文件所在的目录。以下是一个简单的示例代码：

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

const app = express();

// 设置视图引擎为 Pug
app.set('view engine', 'pug');

// 设置视图文件夹路径
app.set('views', path.join(__dirname, 'views'));

// 定义路由
app.get('/', (req, res) => {
  res.render('index', { title: '主页' });
});

// 启动服务器
app.listen(3000, () => {
  console.log('App is running on http://localhost:3000');
});

在这个配置中，app.set('views', path.join(__dirname, 'views')); 这一行指定了视图文件的根目录为 views。这意味着你可以在这个目录及其子目录中放置 .pug 文件。

使用子目录中的模板

在 index.pug 中，你可以包含 partials 目录下的 header.pug 文件，如下所示：

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    include ./partials/header
    h1 欢迎访问我的主页

在这个例子中，include ./partials/header 语句会包含 partials 子目录中的 header.pug 文件。

通过这种方式，你可以灵活地组织和引用不同目录下的模板文件。


看错误应该是extend的相对路径不对

├─public
│  ├─images
│  ├─javascripts
│  └─stylesheets
├─routes
└─views
    └─user

layout.jade是views目录下

\views\user\login.jade

中这样写 extends layout

应该怎么写 extends /views/layout ?

ejs怎么处理呢？

Node.js Express 中的 Jade 模板（现在称为 Pug）并不局限于同一级目录。你可以将模板文件放置在任意目录中，并通过配置指定相应的路径。

例如，假设你的项目结构如下：

my-app/
├── app.js
└── views/
    ├── index.pug
    └── subfolder/
        └── other.pug

在 app.js 中，你可以这样配置：

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

// 设置模板引擎为 pug，并指定 views 目录为视图模板根目录
app.set('views', path.join(__dirname, 'views'));

// 使用 pug 作为默认渲染引擎
app.set('view engine', 'pug');

// 渲染位于 views/index.pug 的模板
app.get('/', (req, res) => {
  res.render('index', { title: 'Home' });
});

// 渲染位于 views/subfolder/other.pug 的模板
app.get('/subpage', (req, res) => {
  res.render('subfolder/other', { title: 'Subpage' });
});

app.listen(3000);

在这个例子中，我们定义了两个路由：

  1. 访问根路径 / 时，会渲染 views/index.pug 文件。
  2. 访问 /subpage 时，会渲染 views/subfolder/other.pug 文件。

这样，你就可以将模板文件放在任意目录中，并通过指定路径进行访问。

回到顶部