在koa2中使用handlebars.js的layout的用法

1. 前言

    koa是node.js的一個輕量級框架，與之搭配的模板引擎不少，如ejs，jade，handlebars等等。本人使用最多的handlebars.js,因此用這篇博客，來記錄一下本身的使用心得

2.技術搭配

    在koa2使用handlebars.js,不要使用koa-views這個包，能夠使用koa-hbs與koa-convert搭配就能夠使用async/await的寫法，代碼以下

/* 
* @Author: 2861399191@qq.com
* @Date:   2018-06-24 17:04:16
* @Last Modified by:   lianglizhong
* @Last Modified time: 2018-08-04 15:06:01
*/

'use strict';
const koa=require("koa");
const app =new koa();
const convert=require("koa-convert");
const hbs = require('koa-hbs');//引入handlebars

const helpers = require('handlebars-helpers')({
  handlebars:hbs.handlebars
});//使用幫助方法
const path=require("path");
const serve = require('koa-static');
// const common= require("common");


hbs.registerHelper('fullName', function(person) {
   console.log("111-->",person);
   return `${person}111`
});




app.use(async(ctx,next)=>{
    Object.assign(ctx, {
      
      toValue(){
        console.log("添加到ctx方法上");
      }
    });
    await next();
});

app.use(serve(path.join(__dirname , './www')));
app.use(async(ctx,next)=>{

  const url=ctx.path;
  let  layout=null;
  ctx.toValue();

  console.log("url-->",url);
    const data = {
        title: 'my title',
        author: 'queckezz',
        "accounts": [
            { 'name': 'John', 'email': 'john@example.com' },
            { 'name': 'Malcolm', 'email': 'malcolm@example.com' },
            { 'name': 'David', 'email': 'david@example.com' }
        ]
    }


  // 對pjax進行判斷
     
     console.log(ctx.headers["x-pjax"]);
     layout=ctx.headers["x-pjax"]?layout:"layout";
      console.log("layout-->",layout);
     await convert(hbs.middleware({
      viewPath: path.join(__dirname , './www'),
      layoutsPath: path.join(__dirname , './www'),
      partialsPath: path.join(__dirname , './www'),
      defaultLayout: layout,
      extname: ".html",
      disableCache: true
    }))(ctx,next)
  
  if(url==="/index"){
    console.log(122);
     await ctx.render('index',data);
  }

  if(url==="/other"){



    await ctx.render('other');
   
  }
  
})



app.listen(3012,()=>{
    console.log("模板引擎");
})

3.demo地址在 https://github.com/listtouch/koa2-koa-hbs-pjax.js （裏面還使用了pjax.js 與NProgress.js）