Pug是Express的模板引擎,Pug是一个非常强大的模板引擎,具有多种函数,包括filter,includes,inheritance,interpolation等。要将Pug与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!的输出,上面的代码首先被转换为-
<!DOCTYPE html> <html> <head> <title>Hello Pug</title> </head> <body> <p class="greetings" id="people">Hello World!</p> </body> </html>
Pug除了简化HTML标签外,还可以做更多的事情。
现在一起探索Pug的一些重要函数。
简单标签
标签根据其缩进进行嵌套。 像上面的示例一样,<title>在<head>标签内缩进,因此位于其中。 但是<body>标签在同一缩进上,因此它是<head>标签的同级。不需要关闭标签,只要Pug在相同或外部缩进级别遇到下一个标签,它就会为无涯教程关闭标签。
要将文本放在标签内有3种方法-
Space seperated
h1 Welcome to Pug
Piped text
div | To insert multiline text, | You can use the pipe operator.
Block of text
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标签定义属性,class和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: "LearnFk", url:"http://www.learnfk.com" }); }); app.listen(3000);
然后使用以下代码在views目录中创建一个名为 dynamic.pug 的新视图文件-
html head title=name body h1=name a(href=url) URL
在浏览器中打开localhost:3000/dynamic_view;您应该获得以下输出-
还可以在文本中使用这些传递的变量。为了在标签的文本之间插入传递的变量,使用#{variableName} 语法。如在上面的示例中,如果想放置LearnFk中的Greetings,则可以执行以下操作。
html head title=name body h1 Greetings from #{name} a(href=url) URL
这种使用值的方法称为插值。上面的代码将显示以下输出。 -
条件语句
无涯教程也可以使用条件语句和循环结构。
如果用户已登录,则页面应显示"Hi User" ,否则,将显示"Login/Sign up" 链接。为此可以定义一个简单的模板,如-
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"} });
您会收到一条消息-Hi,Ayush 。
Include & Components
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。
参考链接
https://www.learnfk.com/expressjs/expressjs-templating.html
标签:pug,Templating,标签,app,Pug,无涯,ExpressJS,html,name From: https://blog.51cto.com/u_14033984/9483529