上一节:
下一节:

  KoaJS 模板

  • 定义和使用

    Pug 是一个模板引擎。模板引擎用于消除服务器代码与 HTML 的混乱，将字符串大量连接到现有的 HTML 模板上。Pug 是一个非常强大的模板引擎，它具有过滤、包含、继承、插值等多种功能，在这方面还有很多工作要做。
    要在 Koa 中使用 Pug，我们需要使用以下命令安装它。 
    $ npm install --save pug koa-pug
    安装了 pug 之后，将其设置为应用程序的模板引擎。将以下代码添加到应用程序 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= router(); 

app.use(_router.routes());
app.listen(3001);
    现在，创建一个名为 views 的新目录。在目录中，创建一个名为 first_view.pug，并在其中输入以下数据。 
    doctype html
html
    head
        title="Hello Pug"
    body
        p.greetings#people Hello Views!
    若要运行此页面，请将以下路由添加到应用程序。 
    _router.get('/hello', async (ctx)=>{
   await ctx.render('first_view');
});
    您将收到的输出为-
    pug
    Pug 所做的是，将这个看起来非常简单的标记转换为 html。我们不需要跟踪结束标记，也不需要使用类和id关键字，而是使用 "." 和 "#" 来定义它们。上面的代码首先转换为 
    <!DOCTYPE html>
<html>
    <head>
        <title>Hello Pug</title>
    </head>
    
    <body>
        <p class = "greetings" id = "people">Hello Views!</p>
    </body>
</html>
    Pug 能够做的不仅仅是简化 HTML 标记。让我们来探讨一下 Pug 的一些特征。

  • 简单标签

    标签根据缩进进行嵌套。与上面的例子一样，<title> 在 >head> 标记中缩进，因此它位于标记内。然而，<body> 标签在同一个缩进上，因此它是 >head> 标签的兄弟。
    我们不需要关闭标签。一旦 Pug 遇到相同或外部缩进级别的下一个标记，它就会为我们关闭标记。
    有三种方法可以将文本放入标记内–

    空间分隔(Space seperated)−

    h1 Welcome to Pug

    Piped text −

    div
  |要插入多行文字，
  |可以使用管道操作符。

    Block of text −

    div
   |但是如果你有大量的文本，那就很乏味了。
   |您可以在标记末尾使用 "." 来表示文本块。
   |要将标记放入此块中，只需在新行中输入tag并
   |相应地缩进。

  • 注释

    Pug 使用与 JavaScript (//) 相同的语法来创建注释。这些注释将转换为 html 注释（）。例如， 
    // 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 _router = router();   //实例化路由器
var Pug = require('koa-pug');
var pug = new Pug({
    viewPath: './views',
    basedir: './views',
    app: app 
});

_router.get('/dynamic_view', async (ctx)=>{
    await ctx.render('dynamic', {
        name: "菜鸟教程",
        url: "https://www.cainiaoya.com"
     });
});
app.use(_router.routes());  //使用路由器定义的路由

app.listen(3001);
    然后，在 views 目录中创建一个新的视图文件，dynamic.pug，使用以下代码。 
    html
head
    title=name
body
    h1=name
    a(href = url) URL
    打开 localhost:3001/dynamic 在你的浏览器和下面应该是输出。−
    pug
    我们也可以在文本中使用这些传递的变量。为了在标记的文本之间插入传递的变量，我们使用#{variableName}语法。例如，在上面的例子中，如果我们想插入来自 菜鸟教程 的问候语，那么我们必须使用以下代码。 
    html
head
    title=name
body
    h1 Greetings from #{name}
    a(href = url) URL
    这种使用值的方法称为插值，推荐使用

  • 条件语句

    我们也可以使用条件语句和循环构造。考虑这个实际的例子，如果一个用户已经登录，我们希望显示 "Hi，user"，如果没有，那么我们希望向他显示一个 "jc2182" 链接。为此，我们可以定义一个简单的模板，例如- 
    html
head
    title Simple template
body
    if(user)
        h1 Hi, #{user.name}
    else
        a(href = "/www.cainiaoya.com") jc2182
    当我们使用我们的路线渲染它，如果我们通过一个像- 
    ctx.render('/dynamic',{user: 
    {name: "Ayush", age: "20"}
 });
    它会发出一条信息显示 Hi, Ayush。但是，如果我们不传递任何对象或传递一个没有用户密钥的对象，那么我们将得到一个另一个链接。

  • 包含和组件

    Pug 提供了一种非常直观的方法来为 web 页面创建组件。例如，如果你看到一个新闻网站，带有 logo 和 categories 的标题总是固定的。我们可以使用 include，而不是将其复制到每个视图。下面的示例显示了如何使用 include-
    使用以下代码创建三个视图–

    header.pug

    div.header.
    这个是网站的页头

    content.pug

    html
head
    title Simple template
body
    include ./header.pug
    h3 我是网站的主要内容
    include ./footer.pug

    footer.pug

    div.footer.
    这个网站的页脚
    为此创建一个路由，如下所示。 
    var koa = require('koa');
var router = require('koa-router'); //实例化路由器
var app = new koa();

var _router = router();   //实例化路由器
var Pug = require('koa-pug');
var pug = new Pug({
    viewPath: './views',
    basedir: './views',
    app: app 
});

_router.get('/components', async (ctx)=>{
    await ctx.render('content.pug');
});
app.use(_router.routes());  //使用路由器定义的路由


app.listen(3001);
    浏览器输入路由 localhost:3000/components 您应该得到以下输出。
    pug
上一节:
下一节: