Koa.js - 模板

Koa.js Templating - 从基本概念到高级概念，从简单和简单的步骤学习Koa.js，其中包括概述，环境，Hello World，生成器，路由，URL构建，HTTP方法，请求对象，响应对象，重定向，错误处理，级联，表单数据，文件上传，模板，静态文件，Cookie，会话，身份验证，压缩，缓存，数据库，RESTful API，日志记录，脚手架，资源。

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

要使用Pug和Koa，我们需要使用以下命令安装它.

$ npm install --save pug koa-pug

安装pug后，将其设置为应用的模板引擎.将以下代码添加到app.js文件中.

var koa = require('koa');var router = require('koa-router');var app = koa();var Pug = require('koa-pug');var pug = new Pug({   viewPath: './views',   basedir: './views',   app: app //Equivalent to app.use(pug)});var _ = router(); //Instantiate the routerapp.use(_.routes()); //Use the routes defined using the routerapp.listen(3000);

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

doctype htmlhtml   head      title = "Hello Pug"   body      p.greetings#people Hello Views!

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

_.get('/hello', getMessage); // Define routesfunction *getMessage(){   this.render('first_view');};

您将收到输出 :

Hello Views

Pug的作用是什么，它将这个非常简单的标记转换为html.我们不需要跟踪关闭我们的标签，也不需要使用class和id关键字，而是使用'.'和'＃'来定义它们.以上代码首先转换为

         Hello Pug                Hello Views!

Pug能够做的不仅仅是简化HTML标记.让我们来探索Pug的一些功能.

简单标签

标签根据它们的缩进嵌套.与上面的示例一样，< title> 在< head> 标记内缩进，因此它位于其中.但是，< body> 标记位于相同的缩进处，因此它是< head> 标记的兄弟.

我们不需要关闭标签.一旦Pug在相同或外部缩进级别遇到下一个标记，它就会为我们关闭标记.

有三种方法可以将文本放在标记内并减去;

空格分开 :

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 - >).例如，

//这是一个Pug评论

这个评论转换为 :

属性

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

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

这行代码转换为 :

将值传递给模板

当我们渲染Pug模板时，我们实际上可以从路径中传递一个值处理程序，然后我们可以在我们的模板中使用使用以下代码创建一个新的路由处理程序.

var koa = require('koa');var router = require('koa-router');var app = koa();var Pug = require('koa-pug');var pug = new Pug({   viewPath: './views',   basedir: './views',   app: app // equals to pug.use(app) and app.use(pug.middleware)});var _ = router(); //Instantiate the router_.get('//dynamic_view', dynamicMessage); // Define routesfunction *dynamicMessage(){   this.render('dynamic', {      name: "TutorialsPoint",       url:"https://www.it1352.com"   });};app.use(_.routes()); //Use the routes defined using the routerapp.listen(3000);

然后，使用以下代码在views目录中创建一个名为dynamic.pug的新视图文件.

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

在浏览器中打开 localhost:3000/dynamic ，以下应该是输出. :

模板变量

我们也可以使用这些传递的变量文本.要在标记文本之间插入传递的变量，我们使用＃{variableName}语法.例如，在上面的示例中，如果我们要从TutorialsPoint插入Greetings，那么我们必须使用以下代码.

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

这种使用值的方法称为插值.

条件

我们也可以使用条件语句和循环结构.考虑这个实际示例，如果用户已登录，我们希望显示"Hi，User"，如果没有，那么我们希望向他显示"登录/注册"链接.为实现这一目标，我们可以定义一个简单的模板，例如 :

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

当我们使用我们的路线渲染时，如果我们传递像 : 这样的对象;

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

它会显示一条消息，显示嗨，Ayush.但是，如果我们没有传递任何对象或传递没有用户密钥的对象，那么我们将获得一个注册链接.

包含和组件

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

使用以下代码创建三个视图 :

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 koa = require('koa');var router = require('koa-router');var app = koa();var Pug = require('koa-pug');var pug = new Pug({   viewPath: './views',   basedir: './views',   app: app //Equivalent to app.use(pug)});var _ = router(); //Instantiate the router_.get('/components', getComponents);function *getComponents(){   this.render('content.pug');}app.use(_.routes()); //Use the routes defined using the routerapp.listen(3000);

转到 localhost:3000/components ，你应该得到以下输出.

Templating Components

include 也可用于包括明文，CSS和JavaScript.

Pug还有许多其他功能.但是，这些不在本教程的范围内.您可以通过 Pug 进一步探索帕格.