首页 > 其他分享 >无涯教程-ExpressJS - 模板(Templating)

无涯教程-ExpressJS - 模板(Templating)

时间:2024-01-30 13:32:29浏览次数:42  
标签:pug Templating 标签 app Pug 无涯 ExpressJS html name

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;您应该获得以下输出-

Variables in template

还可以在文本中使用这些传递的变量。为了在标签的文本之间插入传递的变量,使用#{variableName} 语法。如在上面的示例中,如果想放置LearnFk中的Greetings,则可以执行以下操作。

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

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

Templating Inter

条件语句

无涯教程也可以使用条件语句和循环结构。

如果用户已登录,则页面应显示"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,您将收到以下输出-

templating 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

相关文章

  • 无涯教程-ExpressJS - 中间件(Middleware)
    中间件(Middleware)函数是可以访问请求对象(requestobject),响应对象(responseobject)以及应用程序的请求(request)-响应(response)中的下一个中间件函数。这些函数用于修改req和res对象,以执行诸如解析请求正文(responstbodies),添加响应标头(responseheaders)等任务。这......
  • 无涯教程-ExpressJS - HTTP方法
    请求中提供了HTTP方法,该方法指定了客户端已请求的操作。下表列出了最常用的HTTP方法-S.No.Method&Remark1GETGET方法用于获取数据2POSTPOST方法用于提交数据3PUTPUT方法用于修改数据4DELETEDELETE方法用于删除数据GETMethodGET请求通过在请求的URL部......
  • 无涯教程-ExpressJS - 路由(Routing)
    Web框架在不同的路径上提供HTMLpage,script,images等资源,以下函数用于在Express应用程序中定义routes路由-app.method该方法可以应用于任何HTTP请求方法–get,set,put,delete,处理程序是一个回调函数,当在相关routes上找到匹配的请求类型时执行。如,varexpress=require('express'......
  • 无涯教程-Django - Apache配置
    到目前为止,在无涯教程的示例中,已经使用了DjangodevWeb服务器,但是此服务器仅用于测试,不适合生产环境。一旦投入生产,您就需要一个真实的服务器,如Apache,Nginx等,在本章中讨论Apache。通过Apache为Django应用提供服务是通过使用mod_wsgi完成的。因此,第一件事是确保您已安装Apache和......
  • 无涯教程-Swift - 修饰符
    协议中的常量,变量和函数受到限制,并允许通过访问控制以全局和局部方式进行访问。Swift4语言提供了三种不同的访问级别。它们是公共,内部和私有访问权限。S.NoAccessLevels&Definition1Public使实体可以在其定义模块的任何源文件中进行处理,而在导入定义模块的另一个模块......
  • 无涯教程-Swift - Generics(泛型)
    Swift4语言提供"Generic"函数来编写灵活且可重用的函数和类型,泛型用于避免重复并提供抽象,Swift4标准库是使用泛型代码构建的。Swift4s的"Arrays"和"Dictionary"类型属于Generic集合。funcexchange(a:inoutInt,b:inoutInt){lettemp=aa=bb=temp}varn......
  • 无涯教程-Swift - 类型转换
    为了验证的类型,"TypeCasting"以Swift4语言开始发挥作用,它用于检查类型是属于特定的超类还是子类,或者是否在其自己的层次结构中定义。Swift4类型转换提供两个运算符"is"来检查值的类型和"as",并将类型值转换为其他类型,类型转换还检查类型是否遵循特定的协议一致性标准。类层......
  • 无涯教程-Swift - 引用计数
    内存管理函数及其用法通过自动引用计数(ARC)以Swift4语言处理。ARC用于初始化和取消初始化系统资源,从而在不再需要时释放类使用的内存空间。ARC跟踪有关我们的代码之间的关系的信息,以有效地管理内存资源。ARC函数每次通过init()创建新的类时,ARC每次都会分配一块内存来存储信......
  • 无涯教程-Swift - 解析构造
    在需要释放一个类实例之前,必须调用"deinitializer"来释放内存空间,关键字"deinit"用于取消分配系统资源占用的内存空间。释放内存空间当不再需要实例时,Swift4会自动释放其实例,以释放资源。Swift4通过自动引用计数(ARC)处理实例的内存管理,如自动引用计数中所述。通常,在实例......
  • 无涯教程-Swift - 继承
    通常,一个类可以从另一个类继承方法,属性和函数。类可以进一步分类为子类和父类。子类  - 当一个类从另一个类继承属性,方法和函数时,称为子类父类  - 包含从其自身继承其他类的属性,方法和函数的类称为超类Swift4类包含调用和访问方法,属性,函数和覆盖方法的父类,此外,......