koa2 引擎模版html,koa2 动态模板渲染引擎中间件 koa-views + pug

koa2 的模板渲染有很多，比如pug(原 jade)、ejs 等等，这里以 pug 为例。同时使用 koa-views 中间件，将动态模板渲染集成到 koa2 中。

安装：npm install koa-views pug -s

新建一个简单的 server/index.js，代码如下：

const Koa = require('koa');

const app = new Koa();

const views = require('koa-views');

const { resolve } = require('path');

// view 接受两个参数，一个是根路径，一个是配置项

// 根路径我们可以设置成为 上一层的 views 文件夹，把所有 .pug 模板文件都到里面

// extension 是我们要使用的工具，这里使用 pug

app.use(views(resove(__dirname, './views'), {

extension: 'pug'

}));

// 上一个中间件，会对 context 注入 render 方法，我们可以直接使用 render 方法渲染模板

// index 指的是 views 文件夹里面的 index.pug 文件，后缀名可以省略

// render 的第二个参数我们可以向模板文件传递变量。

app.use(async (ctx, next) => {

await ctx.render('index', {

name: 'bluescurry'

});

})

views 文件夹中的 index.pug：

doctype html

html

head

meta(charset='utf-8')

meta(name='viewport', content='width=device-width, initial-scale=1')

title Koa Server Pug

link(href='https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css' rel='stylesheet')

script(src='https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js')

script(src='https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js')

body

.container

.row

.col-md-8

p I am #{name}

.col-md-4

p 测试动态 Pug 模板引擎

简单说一下 koa-views 的源码实现：

源码如下：

'use strict'

const { resolve } = require('path')

const debug = require('debug')('koa-views')

// 核心包，Template engine consolidation library.

const consolidate = require('consolidate')

// 发送静态文件

const send = require('koa-send')

// 获取路径

const getPaths = require('get-paths')

// 美化代码格式

const pretty = require('pretty')

module.exports = viewsMiddleware

function viewsMiddleware(

path,

{ engineSource = consolidate, extension = 'html', options = {}, map } = {}

) {

return function views(ctx, next) {

if (ctx.render) return next()

// 将 render 注入到 context 和 response 对象中

ctx.response.render = ctx.render = function(relPath, locals = {}) {

return getPaths(path, relPath, extension).then(paths => {

const suffix = paths.ext

const state = Object.assign(locals, options, ctx.state || {})

// deep copy partials

state.partials = Object.assign({}, options.partials || {})

debug('render `%s` with %j', paths.rel, state)

ctx.type = 'text/html'

// 如果是 html 文件，不编译直接 send 静态文件

if (isHtml(suffix) && !map) {

return send(ctx, paths.rel, {

root: path

})

} else {

const engineName = map && map[suffix] ? map[suffix] : suffix

// 使用 engineSource 配置的渲染引擎 render

const render = engineSource[engineName]

if (!engineName || !render)

return Promise.reject(

new Error(`Engine not found for the ".${suffix}" file extension`)

)

return render(resolve(path, paths.rel), state).then(html => {

// since pug has deprecated `pretty` option

// we'll use the `pretty` package in the meanwhile

if (locals.pretty) {

debug('using `pretty` package to beautify HTML')

html = pretty(html)

}

ctx.body = html

})

}

})

}

// 中间件执行结束

return next()

}

}

function isHtml(ext) {

return ext === 'html'

}

很简单，一共就60多行代码，主要的功能是把 consolidate 改造为 koa2 的中间件。