Koa.js 模板

Pug 是一个模板引擎。 模板引擎用于消除我们的服务器代码与 HTML 的混乱,将字符串连接到现有的 HTML 模板。 Pug 是一个非常强大的模板引擎,它具有多种功能,例如 filters, includes, inheritance, interpolation等。这方面的内容很多。

要将 Pug 与 Koa 一起使用,我们需要使用以下命令安装它。

$ npm install --save pug koa-pug

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

var koa = require('koa');
var router = require('koa-router');
var app = new koa();

var Pug = require('koa-pug');

var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //等价于 app.use(pug)
});

var _ = router(); // 实例化路由器

_.get('/hello', async (ctx,next) => { // 定义路由
   await ctx.render('first_view');
}); 


app.use(_.routes()); // 使用由 router 定义的路由
app.listen(3000);

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

doctype html
html
   head
      title Hello Pug
   body
      p.greetings#people Hello 迹忆客!

运行程序,显示结果如下

koa 模板第一个示例

Pug 所做的是,它将这个看起来非常简单的标记转换为 html。 我们不需要跟踪关闭我们的标签,不需要使用 class 和 id 关键字,而是使用 .# 来定义它们。 上面的代码首先被转换为

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>
    
   <body>
      <p class = "greetings" id = "people">Hello 迹忆客!</p>
   </body>
</html>

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 注释

此注释被转换为

<!--这是一个 Pug 注释-->

属性

为了定义属性,我们在括号中使用逗号分隔的属性列表。 类和 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 koa = require('koa');
var router = require('koa-router');
var app = new koa();

var Pug = require('koa-pug');

var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //等价于 app.use(pug)
});

var _ = router(); // 实例化路由器

_.get('/hello', async (ctx,next) => { // 定义路由
   await ctx.render('first_view');
}); 

_.get("/dynamic_view", async (ctx,next) => {
   await ctx.render('dynamic', {
      name: "迹忆客", 
            website: "jiyik.com"
      url:"https://www.jiyik.com"
   });

})

app.use(_.routes()); // 使用由 router 定义的路由
app.listen(3000);

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

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

在浏览器中打开 localhost:3000/dynamic ,以下是输出。

koa 动态模板

条件

我们也可以使用条件语句和循环结构。 考虑这个实际示例,如果用户已登录,我们希望显示“Hi, User”,如果没有,则我们希望向他显示“登录/注册”链接。 为此,我们可以定义一个简单的模板,例如

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

当我们使用我们的路由渲染它时,如果我们传递一个对象,像下面这样

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

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

Include 和 组件

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

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

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 = new koa();

var Pug = require('koa-pug');

var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //等价于 app.use(pug)
});

var _ = router(); // 实例化路由器

_.get('/hello', async (ctx,next) => { // 定义路由
   await ctx.render('first_view');
}); 

_.get("/dynamic_view", async (ctx,next) => {
   await ctx.render('dynamic', {
      name: "迹忆客", 
      url:"https://www.jiyik.com"
   });

})

_.get('/components', async (ctx,next) => {
   await ctx.render('content');

});

app.use(_.routes()); // 使用由 router 定义的路由
app.listen(3000);

访问 localhost:3000/components ,我们应该会看到如下输出内容。

koa 模板include

include 也可用于包含纯文本、CSS 和 JavaScript。

Pug 还有许多其他功能。 但是,这些超出了本教程的范围。 大家可以 点击这 进一步探索 Pug。

查看笔记

扫码一下
查看教程更方便