Nodejs模板引擎pug的使用

Nodejs模板引擎pug的使用
Pug（以前称为Jade）是一种简洁、干净的模板引擎，它广泛用于Node.js项目中。以下是Pug的基本使用方法和一些示例。

安装

首先，你需要安装pug包。你可以通过npm来安装：

npm install pug --save

基本语法

Pug的语法非常简洁，它通过缩进来表示HTML标签的嵌套关系，不需要闭合标签。例如，下面是一个简单的HTML文档在Pug中的写法：

doctype html
html(lang="en")
  head
    title= pageTitle
  body
    h1 My Site
    #container.col-6
      p Welcome to my site.

上面的代码会被编译成如下HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>My Site</h1>
    <div id="container" class="col-6">
      <p>Welcome to my site.</p>
    </div>
  </body>
</html>

变量和表达式

你可以在Pug中定义变量并使用它们。例如：

- var title = 'Welcome'
h1= title

这将输出：

<h1>Welcome</h1>

条件语句

Pug支持条件判断，如if、else if、else等：

- var user = { name: 'Alice', role: 'admin' }
if user.role === 'admin'
  p You are an admin
else
  p Welcome, #{user.name}

循环

Pug也支持循环，比如for循环：

ul
  each val in ['item1', 'item2', 'item3']
    li= val

这会生成一个包含三个列表项的无序列表。

模块化

为了保持代码的整洁和可维护性，你可以将Pug文件分解为多个部分，并使用include和extends指令进行组合。例如，你可以创建一个基础布局文件layout.pug：

doctype html
html
  head
    title My Site
  body
    block content

然后在另一个文件中扩展这个布局：

extends layout

block content
  h1 Hello, World!

这样，当你渲染这个子文件时，它会继承layout.pug的内容，并替换其中的content块。

渲染Pug模板

最后，你需要在Node.js应用中使用这些模板。以下是一个简单的例子：

const pug = require('pug');

// 编译并渲染模板
const compiledFunction = pug.compileFile('path/to/template.pug');
const html = compiledFunction({ pageTitle: 'My Page Title' });

console.log(html);

以上就是Pug的基本使用方法。希望对你有所帮助！


3 回复

Pug，曾经叫做Jade，是一种简洁的HTML模板引擎。使用Pug可以让你的HTML代码变得更简洁、更易于维护。

首先，你需要安装Pug库。可以通过npm来安装：

npm install pug --save

然后，在你的Node.js项目中，你可以这样使用Pug：

var pug = require('pug');

// 编译并运行函数
var fn = pug.compile("h1 Hello, Pug!");
console.log(fn());

// 或者直接渲染一个字符串
console.log(pug.render('h1 Hello, Pug!'));

// 也可以渲染一个文件
console.log(pug.renderFile('path/to/file.pug', { locals: { title: 'Hello Pug' } }));

在你的.pug文件里，你可以这样写：

doctype html
html(lang="en")
  head
    title= title
  body
    h1 Welcome to Pug

这就是Pug的基本用法，是不是感觉比写HTML要清爽多了呢？


Pug（以前称为Jade）是一种高级的、简洁的模板引擎，非常适合用于Node.js应用程序中。它使得HTML模板的编写变得非常简单和直观。下面将介绍如何在Node.js项目中设置并使用Pug。

1. 安装Pug

首先，你需要安装Pug到你的Node.js项目中。你可以通过npm来安装：

npm install pug --save

2. 设置Pug作为视图引擎

如果你正在使用Express框架，可以很方便地设置Pug作为视图引擎。你需要在应用初始化时添加如下代码：

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

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

// 指定views文件夹位置
app.set('views', './views');

app.get('/', (req, res) => {
    res.render('index', { title: '首页', message: '欢迎访问!' });
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

这段代码做了两件事：设置了pug为视图引擎，并指定了视图文件的路径。接下来我们创建一个简单的Pug模板。

3. 创建Pug模板

在上述代码中，我们告诉Express去寻找名为views/index.pug的文件。让我们创建这个文件，包含一些基本的HTML结构和动态内容。

doctype html
html(lang='en')
  head
    title= title
  body
    h1= message
    p 欢迎来到 #{title}!

4. 动态渲染

在上面的Express路由处理程序中，我们传递了title和message两个变量给Pug模板。这些变量可以在模板中通过= variableName的方式访问。

5. 运行应用

现在，当你启动你的Express应用并访问http://localhost:3000时，你应该能看到动态生成的HTML页面。

以上就是如何在Node.js中使用Pug的基本步骤。Pug提供了丰富的语法糖，包括但不限于循环、条件判断等，使你能够写出更简洁、可读性更高的模板代码。

Pug是一种简洁的JavaScript模板引擎，用于生成HTML。首先安装Pug库：npm install pug。然后在你的Node.js文件中引入Pug：

const pug = require('pug');

接着你可以编写Pug模板字符串或从文件加载模板，例如：

const html = pug.compile(`h1 Hello, Pug!`)();
console.log(html);

或者从文件渲染：

const template = pug.compileFile('./view.pug');
const html = template({ name: 'World' });

在Pug文件中，你可以使用变量、条件语句和循环等。

回到顶部