UNPKG

4.88 kBMarkdownView Raw
1# koa-views
2
3[![Build status][travis-image]][travis-url]
4[![NPM version][npm-image]][npm-url]
5[![NPM downloads][npm-downloads-image]][npm-url]
6[![Dependency Status][david-image]][david-url]
7[![License][license-image]][license-url]
8
9Template rendering middleware for `koa@2`.
10
11## Installation
12
13```sh
14npm install koa-views
15```
16
17## Templating engines
18
19`koa-views` is using [consolidate](https://github.com/tj/consolidate.js) under the hood.
20
21[List of supported engines](https://github.com/tj/consolidate.js#supported-template-engines)
22
23**NOTE**: you must still install the engines you wish to use, add them to your package.json dependencies.
24
25## Example
26
27```js
28var views = require('koa-views');
29
30const render = views(__dirname + '/views', {
31 map: {
32 html: 'underscore'
33 }
34})
35
36// Must be used before any router is used
37app.use(render)
38// OR Expand by app.context
39// No order restrictions
40// app.context.render = render()
41
42app.use(async function (ctx) {
43 ctx.state = {
44 session: this.session,
45 title: 'app'
46 };
47
48 await ctx.render('user', {
49 user: 'John'
50 });
51});
52```
53
54For more examples you can take a look at the [tests](./test/index.js).
55
56## Simple middleware
57
58If you need to simply render pages with locals, you can install `koa-views-render`:
59
60```sh
61npm install koa-views-render
62```
63
64Then simply use it on your routes and its arguments will be passed to `ctx.render`.
65
66```js
67var render = require('koa-views-render');
68
69// ...
70
71app.use(render('home', { title : 'Home Page' }));
72```
73
74## API
75
76#### `views(root, opts)`
77
78* `root`: Where your views are located. Must be an absolute path. All rendered views are relative to this path
79* `opts` (optional)
80
81* `opts.autoRender`: Whether to use `ctx.body` to receive the rendered template string. Defaults to `true`.
82
83```js
84const render = views(__dirname, { autoRender: false, extension: 'pug' });
85app.use(render)
86// OR
87// app.context.render = render()
88
89app.use(async function (ctx) {
90 return await ctx.render('user.pug')
91})
92```
93
94vs.
95
96```js
97const render = views(__dirname, { extension: 'pug' })
98app.use(render)
99// OR
100// app.context.render = render()
101
102app.use(async function (ctx) {
103 await ctx.render('user.pug')
104})
105```
106
107* `opts.extension`: Default extension for your views
108
109Instead of providing the full file extension you can omit it.
110```js
111app.use(async function (ctx) {
112 await ctx.render('user.pug')
113})
114```
115
116vs.
117
118```js
119const render = views(__dirname, { extension: 'pug' })
120app.use(render)
121// OR
122// app.context.render = render()
123
124app.use(async function (ctx) {
125 await ctx.render('user')
126})
127```
128
129* `opts.map`: Map a file extension to an engine
130
131In this example, each file ending with `.html` will get rendered using the `nunjucks` templating engine.
132```js
133const render = views(__dirname, { map: {html: 'nunjucks' }})
134app.use(render)
135// OR
136// app.context.render = render()
137// render `user.html` with nunjucks
138app.use(async function (ctx) {
139 await ctx.render('user.html')
140})
141```
142
143* `opts.engineSource`: replace consolidate as default engine source
144
145If you’re not happy with consolidate or want more control over the engines, you can override it with this options. `engineSource` should
146be 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`.
147
148```js
149const render = views(__dirname, { engineSource: {foo: () => Promise.resolve('bar')}})
150app.use(render)
151// OR
152// app.context.render = render()
153
154app.use(async function (ctx) {
155 await ctx.render('index.foo')
156})
157```
158
159* `opts.options`: These options will get passed to the view engine. This is the time to add `partials` and `helpers` etc.
160
161```js
162const app = new Koa()
163 .use(views(__dirname, {
164 map: { hbs: 'handlebars' },
165 options: {
166 helpers: {
167 uppercase: (str) => str.toUpperCase()
168 },
169
170 partials: {
171 subTitle: './my-partial' // requires ./my-partial.hbs
172 },
173
174 cache: true // cache the template string or not
175 }
176 }))
177 .use(function (ctx) {
178 ctx.state = { title: 'my title', author: 'queckezz' }
179 return ctx.render('./my-view.hbs')
180 })
181```
182
183## Debug
184
185Set the `DEBUG` environment variable to `koa-views` when starting your server.
186
187```bash
188$ DEBUG=koa-views
189```
190
191## License
192
193[MIT](./license)
194
195[travis-image]: https://img.shields.io/travis/queckezz/koa-views.svg?style=flat-square
196[travis-url]: https://travis-ci.org/queckezz/koa-views
197[npm-image]: https://img.shields.io/npm/v/koa-views.svg?style=flat-square
198[npm-downloads-image]: https://img.shields.io/npm/dm/koa-views.svg?style=flat-square
199[npm-url]: https://npmjs.org/package/koa-views
200[david-image]: http://img.shields.io/david/queckezz/koa-views.svg?style=flat-square
201[david-url]: https://david-dm.org/queckezz/koa-views
202[license-image]: http://img.shields.io/npm/l/koa-views.svg?style=flat-square
203[license-url]: ./license