pug哈巴狗入门


备注

Pug是一款高性能,强大,优雅,功能丰富的模板引擎。它受到了Haml的影响,并使用JavaScript实现了Node.js和浏览器。 Laravel,PHP Scala,Ruby,Python和Java都有实现。

它的特点是:

Pug以前以翡翠名称而闻名,但由于注册商标案例而被重命名。

这个备注部分还应该提到哈巴狗中的任何大型主题,并链接到相关主题。由于pug文档是新的,您可能需要创建这些相关主题的初始版本。

版本

发布日期
2.0.0-beta11 2017年2月4日
2.0.0-beta10 2017年1月29日
2.0.0 beta9 2017年1月25日
2.0.0-β1 2016年6月3日
1.11.0 2015年6月11日

你好世界的例子

首先,让我们创建一个要渲染的模板!

p Hello World, #{name}!
 

将其保存在以.pug 扩展名结尾的文件中(您可以将其称为任何您喜欢的文件,但我们将使用以下代码中的view.pug 进行编译)。

现在剩下要做的就是编译该模板了!创建一个JS脚本文件(我们称之为我们的main.js ),并添加以下内容:

// Import the pug module
const pug = require('pug');

// Compile the template (with the data not yet inserted)
const templateCompiler = pug.compileFile('view.pug');

// Insert your data into the template file
console.log(templateCompiler({ name: 'John' });
 

使用npm main.js 运行此文件时,应在控制台中输出以下HTML代码:

<p>Hello World, John!</p>
 

恭喜,您刚刚创建并编译了第一个模板!关于更高级的东西,例如ConditionalIteration等等!

安装

要安装Pug模板渲染系统,请按照下列步骤操作:

  1. 在您的计算机上安装了Node.js环境
  2. 运行npm install pug --savepug 模块安装到当前项目中。

您现在可以通过标准require 机制在项目中使用pug

const pug = require("pug");
 

如果您在应用程序中使用Express,则无需require("pug") 。但是,您必须将Express应用程序的view engine 属性设置为pug

app.set("view engine", "pug");
 

此外,您必须设置应用程序的视图目录,以便Express知道在哪里查找您的Pug文件(用于编译)。

app.set("views", "path/to/views");
 

在Express路线中,您可以通过使用文件路径调用res.render 函数来呈现您的Pug文件(从app.set("views") 选项设置的目录开始)。

app.get("/", function (req, res, next) {
    // Your route code
    var locals = {
        title: "Home",
    };
    res.render("index", locals);
});
 

在上面, index 指向位于views/index.pug 的文件, locals 表示暴露给您的文件的变量的对象。正如后面部分将要解释的那样,Pug可以访问传递给它的变量并执行各种操作(条件,插值,迭代等)。