Nodejs中jade模版能不能进行嵌套？

Nodejs中jade模版能不能进行嵌套？

#{foo}  //在jade中输出 :“abc”
#{obj.abc}  //输入结果：“result”

有没有这种写法：

 #{obj[#{foo}]}

这种写法，写程序的时候遇到这个问题，不知道类似的写法怎么实现，大家给个思路吧。。。

谢谢各位

4 回复

Node.js 中 Jade 模板能否进行嵌套？

在 Node.js 中，Jade（现在称为 Pug）模板引擎支持嵌套。这意味着你可以在一个模板文件中引入另一个模板文件，从而提高代码的复用性和可维护性。

示例

假设我们有两个模板文件：header.pug 和 index.pug。

header.pug

doctype
html
  head
    title= title
  body
    h1= message

index.pug

extends header.pug

block content
  p Welcome to the Jade template engine in Node.js!

在这个例子中，index.pug 继承了 header.pug，并使用了 block 关键字定义了一个内容区域。header.pug 中的 h1 元素会被 index.pug 中定义的内容替换。

使用 include 进行部分嵌入

除了继承外，你还可以使用 include 关键字来嵌入部分模板。例如：

footer.pug

footer
  p Copyright © 2023

index.pug

extends header.pug

block content
  p Welcome to the Jade template engine in Node.js!

include footer.pug

在这个例子中，footer.pug 的内容会被直接插入到 index.pug 中的 include 语句位置。

动态数据传递

关于您提到的 #{obj[#{foo}]} 的写法，实际上在 Pug 中，你可以通过 JavaScript 表达式来动态访问对象属性。例如：

- var foo = 'abc'
- var obj = { abc: 'result' }
p= obj[foo]

这会输出 "result"，因为 obj[foo] 等于 obj['abc']。

总结

  • 继承 (extends) 可以让你在一个模板中扩展另一个模板。
  • 包含 (include) 可以让你将一个模板的部分内容插入到另一个模板中。
  • 动态数据可以通过 JavaScript 表达式来处理，如 obj[foo]。

希望这些信息能帮助你更好地理解和使用 Pug 模板引擎。


#{ .. } 大括号之间的语法就是javascript的表达式语法，甚至可以在里面调用函数

var jade = require('jade'),
    tmpl="h1 obj.foo = #{obj[foo]} , Math.pow(2,3) = #{pow(2,3)}",
    fn = jade.compile(tmpl, {pretty: true });

console.log(fn({ foo: ‘abc’,obj:{abc:‘result’},pow:Math.pow }));

谢谢您。。回复的有点晚，学习了。。已经能够成功输出了。

在Node.js中使用Jade模板（现在称为Pug）时，确实可以进行模板嵌套。嵌套模板是一种常见的实践，用于提高代码复用性并保持HTML结构的整洁。

示例

假设我们有两个模板文件：header.pug 和 page.pug。

header.pug

doctype html
html
  head
    title My Page
  body
    h1 Welcome to my page!

page.pug

extends header.pug

block content
  p This is the main content of the page.

在这个例子中，page.pug 文件扩展了 header.pug 模板，并且使用了块 content 来插入页面的主要内容。这种方式使得头部分离，可重用。

如何在Express中使用这些模板

在Express应用中，你需要设置视图引擎来解析这些模板。例如：

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

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

app.get('/', (req, res) => {
  res.render('page', { foo: 'abc', obj: { abc: 'result' } });
});

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

关于您的问题

关于您提到的 ${obj[#{foo}]} 的写法，这是不正确的。在Pug中，你应该直接使用变量名或属性路径。如果你需要动态地访问对象属性，可以这样写：

p= obj[foo]

这会输出 obj 对象中 foo 属性的值。

总结来说，Jade（Pug）支持模板嵌套，并且可以通过这种方式来更好地组织和重用代码。

回到顶部