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.jc2182.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.jc2182.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