ExpressJS模板


帕格是Express的模板引擎。模板引擎用于通过HTML消除我们的服务器代码的混乱,将字符串与现有的HTML模板串联起来。帕格是一个非常强大的模板引擎,它具有各种功能,包括 滤波器,包括,继承,插值 等。有很多理由可以覆盖。

要使用Pug with Express,我们需要安装它,

npm install --save pug

现在安装了Pug,将其设置为应用程序的模板引擎。你 并不 需要“需要”吧。将以下代码添加到 index.js 文件中。

app.set('view engine', 'pug');
app.set('views','./views');

现在创建一个名为views的新目录。在里面创建一个名为 first_view.pug 的文件,并在其中输入以下数据。

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello World!

要运行此页面,请将以下路由添加到您的应用程序

app.get('/first_template', function(req, res){
   res.render('first_view');
});

您将获得输出 - Hello World! 帕格将这个非常简单的标记转换为html。我们不需要跟踪关闭我们的标签,也不需要使用classid关键字,而是使用 '.''#' 来定义它们。上面的代码首先被转换为

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>

   <body>
      <p class = "greetings" id = "people">Hello World!</p>
   </body>
</html>

Pug能够做的不仅仅是简化HTML标记。

Pug的重要特征

现在让我们探讨一下Pug的一些重要特征。

简单标签

标签根据其缩进嵌套。与上面的示例一样, <title><head> 标记内缩进,因此它位于其中。但是 <body> 标签是在同一个缩进上,所以它是 <head> 标签的兄弟。

我们不需要关闭标签,只要Pug遇到相同或外部缩进级别的下一个标签,它就会为我们关闭标签。

要将文本放在标记内,我们有3种方法

  • 空间分开
h1 Welcome to Pug
  • 管道文本
div
   | To insert multiline text,
   | You can use the pipe operator.
  • 文本块
div.
   But that gets tedious if you have a lot of text.
   You can use "." at the end of tag to denote block of text.
   To put tags inside this block, simply enter tag in a new line and
   indent it accordingly.

注释

Pug使用与 JavaScript(//) 相同的语法来创建注释。这些注释将转换为html注释(<! - comment - >)。例如,

//This is a Pug comment

此评论将转换为以下内容。

<!--This is a Pug comment-->

属性

为了定义属性,我们在括号中使用逗号分隔的属性列表。类和ID属性具有特殊表示。以下代码行包括定义给定html标记的属性,类和ID。

div.container.column.main#division(width = "100", height = "100")

这行代码转换为以下内容。 -

<div class = "container column main" id = "division" width = "100" height = "100"></div>

将值传递给模板

当我们渲染Pug模板时,我们实际上可以从路由处理程序中传递一个值,然后我们可以在模板中使用它。使用以下内容创建新的路由处理程序。

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

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "CodingDict",
      url:"http://www.codingdict.com"
   });
});

app.listen(3000);

并在views目录中创建一个名为 dynamic.pug 的新视图文件,其代码如下

html
   head
      title=name
   body
      h1=name
      a(href = url) URL

在浏览器中打开localhost:3000/dynamic_view; 你应该得到以下输出

模板中的变量

我们也可以在文本中使用这些传递的变量。要在标记文本之间插入传递的变量,我们使用 #{variableName} 语法。例如,在上面的示例中,如果我们想要从CodingDict中提出问候语,那么我们可以完成以下操作。

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

这种使用值的方法称为 插值 。上面的代码将显示以下输出。-

模板国际

条件语句

我们也可以使用条件语句和循环结构。

考虑以下

如果用户已登录,则页面应显示 “嗨,用户” ,如果没有,则显示 “登录/注册” 链接。为此,我们可以定义一个简单的模板,如

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

当我们使用我们的路线渲染时,我们可以传递一个对象,如下面的程序

res.render('/dynamic',{
   user: {name: "Ayush", age: "20"}
});

你会收到一条消息 - 嗨,Ayush 。但是如果我们没有传递任何对象或传递没有用户密钥的对象,那么我们将获得一个注册链接。

包含和组件

Pug提供了一种非常直观的方式来为网页创建组件。例如,如果您看到新闻网站,则标识和类别的标题始终是固定的。我们可以使用 include 功能,而不是将其复制到我们创建的每个视图。以下示例显示了我们如何使用此功能

使用以下代码创建3个视图

HEADER.PUG

div.header.
   I'm the header for this website.

CONTENT.PUG

html
   head
      title Simple template
   body
      include ./header.pug
      h3 I'm the main content
      include ./footer.pug

FOOTER.PUG

div.footer.
   I'm the footer for this website.

为此创建一个路由如下

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

app.get('/components', function(req, res){
    res.render('content');
});

app.listen(3000);

转到localhost:3000 / components,您将收到以下输出 -

模板组件

include 也可以用于包括明文,CSS和JavaScript。

Pug还有很多其他功能。但这些超出了本教程的范围。您可以在 http://jade-lang.com/ 进一步探索Pug。