npm-koa-views

[mowatermelon]

koa-views

个人项目

官方仓库

https://www.github.com/queckezz/koa-views

官方npm地址

依赖包地址

https://www.npmjs.com/package/koa-views

在线运行地址

https://npm.runkit.com/koa-views

基础介绍

Template rendering middleware for koa@2.

基础安装

npm install koa-views --save   # npm
yarn add koa-views             # Yarn

基础使用

Must be used before any router is used app.use(render)

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

const render = views(__dirname + '/views', {
  map: {
    html: 'underscore'
  }
})

// Must be used before any router is used
app.use(render)
// OR Expand by app.context
// No order restrictions
// app.context.render = render()

app.use(async function (ctx) {
  ctx.state = {
    session: this.session,
    title: 'app'
  };

  await ctx.render('user', {
    user: 'John'
  });
});

参数说明

views(root, opts)

• root: Where your views are located. Must be an absolute path. All rendered views are relative to this path

• opts (optional)

• opts.autoRender

Whether to use ctx.body to receive the rendered template string. Defaults to true.

const render = views(__dirname, { autoRender: false, extension: 'pug' });
app.use(render)
// OR
// app.context.render = render()

app.use(async function (ctx) {
  return await ctx.render('user.pug')
})
// vs.

const render = views(__dirname, { extension: 'pug' })
app.use(render)
// OR
// app.context.render = render()

app.use(async function (ctx) {
  await ctx.render('user.pug')
})

opts.extension

Default extension for your views

Instead of providing the full file extension you can omit it.

app.use(async function (ctx) {
  await ctx.render('user.pug')
})
vs.

const render = views(__dirname, { extension: 'pug' })
app.use(render)
// OR
// app.context.render = render()

app.use(async function (ctx) {
  await ctx.render('user')
})

opts.map

Map a file extension to an engine

In this example, each file ending with .html will get rendered using the nunjucks templating engine.

const render = views(__dirname, { map: {html: 'nunjucks' }})
app.use(render)
// OR
// app.context.render = render()
// render `user.html` with nunjucks
app.use(async function (ctx) {
  await ctx.render('user.html')
})

opts.engineSource

replace consolidate as default engine source

If you’re not happy with consolidate or want more control over the engines, you can override it with this options. engineSource should be an object that maps an extension to a function that receives a path and options and returns a promise. In this example templates with the foo extension will always return bar.

const render = views(__dirname, { engineSource: {foo: () => Promise.resolve('bar')}})
app.use(render)
// OR
// app.context.render = render()

app.use(async function (ctx) {
  await ctx.render('index.foo')
})

options

These options will get passed to the view engine. This is the time to add partials and helpers etc.

const app = new Koa()
  .use(views(__dirname, {
    map: { hbs: 'handlebars' },
    options: {
      helpers: {
        uppercase: (str) => str.toUpperCase()
      },

      partials: {
        subTitle: './my-partial' // requires ./my-partial.hbs
      },
      cache: true // cache the template string or not
    }
  }))
  .use(function (ctx) {
    ctx.state = { title: 'my title', author: 'queckezz' }
    return ctx.render('./my-view.hbs')
  })