Express.js模板

本文概要

  • 什么是模板引擎
  • 使用模板引擎与Express
  • Pug模板引擎
  • 安装Pug
什么是模板引擎模板引擎方便你在你的应用程序中使用静态模板文件。在运行时,它将替换与实际值的模板文件中的变量,并转换成模板发送到客户端的HTML文件。因此,这是更可取的可以轻松地设计HTML页面。
以下是一些常用的模板引擎与Express.js工作的列表:
  • Pug (formerly known as jade)
  • mustache
  • dust
  • atpl
  • eco
  • ect
  • ejs
  • haml
  • haml-coffee
  • handlebars
  • hogan
  • jazz
  • jqtpl
  • JUST
  • liquor
  • QEJS
  • swig
  • templayed
  • toffee
  • underscore
  • walrus
  • whiskers
在上面的模板引擎,pug(原名jade)和mustache似乎是最流行的选择。pug类似于Haml的,它使用的空白。按照模板的基准,pug比Handlebars,EJS,Underscore慢2倍。 ECT似乎是最快的。许多程序员喜欢mustache的模板引擎,主要是因为它是最简单和通用的模板引擎之一。
使用模板引擎与快递模板引擎让你可以在你的应用程序中使用静态模板文件。为了使模板文件,你必须设置以下应用程序设置属性:
  • Views:它指定模板文件所在的目录。
  • 视图引擎:它指定了你使用模板引擎。例如,要使用 pug 模板引擎:app.set(“视图引擎”,“pug”)。
让我们一个模板引擎pug(原名jade)。
pug模板引擎让我们来学习如何使用Express.js使用pug模板引擎的Node.js应用。pug是Node.js的模板引擎,pug使用空格和缩进作为语法的一部分。其语法是aesy学习。
安装pug执行以下命令来安装pug模板引擎:
npm install pug --save

Express.js模板

文章图片
pug模板必须.pug文件中写入所有.pug文件必须放在内部意见的Node.js应用程序的根目录文件夹中。
【Express.js模板】注意:默认情况下Express.js搜索在视图中的所有意见的根文件夹下的文件夹中。你还可以设置到另一个文件夹中明确使用视图属性。例如:app.set( ‘ 视图’ , ‘ MyViews’ )。
pug模板引擎需要以简单的方式输入和产生输出的HTML。看看它是如何渲染HTML:
简单的输入:
doctype html html head title A simple pug example body h1 This page is produced by pug template engine p some paragraph here..

通过pug模板产生输出:
< !DOCTYPE html> < html> < head> < title>A simple pug example< /title> < /head> < body> < h1>This page is produced by pug template engine< /h1> < p>some paragraph here..< /p> < /body> < /html>

Express.js可以与任何模板引擎使用。让我们举个例子来部署pug模板如何动态生成HTML页面。
见下面的例子:
创建一个文件名为index.pug文件内部意见文件夹,并写了以下pug模板:
doctype html html head title A simple pug example body h1 This page is produced by pug template engine p some paragraph here..

文件:server.js
var express = require('express'); var app = express(); //set view engine app.set("view engine","pug") app.get('/',function (req,res) { res.render('view.pug',index); res.render('index'); }); var server = app.listen(5000,function () { console.log('Node server is running..'); });

    推荐阅读