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 |
|
9 | Template rendering middleware for `koa@2`.
|
10 |
|
11 | ## Installation
|
12 |
|
13 | ```sh
|
14 | npm 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
|
28 | var views = require('koa-views');
|
29 |
|
30 | const render = views(__dirname + '/views', {
|
31 | map: {
|
32 | html: 'underscore'
|
33 | }
|
34 | })
|
35 |
|
36 | // Must be used before any router is used
|
37 | app.use(render)
|
38 | // OR Expand by app.context
|
39 | // No order restrictions
|
40 | // app.context.render = render()
|
41 |
|
42 | app.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 |
|
54 | For more examples you can take a look at the [tests](./test/index.js).
|
55 |
|
56 | ## Simple middleware
|
57 |
|
58 | If you need to simply render pages with locals, you can install `koa-views-render`:
|
59 |
|
60 | ```sh
|
61 | npm install koa-views-render
|
62 | ```
|
63 |
|
64 | Then simply use it on your routes and its arguments will be passed to `ctx.render`.
|
65 |
|
66 | ```js
|
67 | var render = require('koa-views-render');
|
68 |
|
69 | // ...
|
70 |
|
71 | app.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
|
84 | const render = views(__dirname, { autoRender: false, extension: 'pug' });
|
85 | app.use(render)
|
86 | // OR
|
87 | // app.context.render = render()
|
88 |
|
89 | app.use(async function (ctx) {
|
90 | return await ctx.render('user.pug')
|
91 | })
|
92 | ```
|
93 |
|
94 | vs.
|
95 |
|
96 | ```js
|
97 | const render = views(__dirname, { extension: 'pug' })
|
98 | app.use(render)
|
99 | // OR
|
100 | // app.context.render = render()
|
101 |
|
102 | app.use(async function (ctx) {
|
103 | await ctx.render('user.pug')
|
104 | })
|
105 | ```
|
106 |
|
107 | * `opts.extension`: Default extension for your views
|
108 |
|
109 | Instead of providing the full file extension you can omit it.
|
110 | ```js
|
111 | app.use(async function (ctx) {
|
112 | await ctx.render('user.pug')
|
113 | })
|
114 | ```
|
115 |
|
116 | vs.
|
117 |
|
118 | ```js
|
119 | const render = views(__dirname, { extension: 'pug' })
|
120 | app.use(render)
|
121 | // OR
|
122 | // app.context.render = render()
|
123 |
|
124 | app.use(async function (ctx) {
|
125 | await ctx.render('user')
|
126 | })
|
127 | ```
|
128 |
|
129 | * `opts.map`: Map a file extension to an engine
|
130 |
|
131 | In this example, each file ending with `.html` will get rendered using the `nunjucks` templating engine.
|
132 | ```js
|
133 | const render = views(__dirname, { map: {html: 'nunjucks' }})
|
134 | app.use(render)
|
135 | // OR
|
136 | // app.context.render = render()
|
137 | // render `user.html` with nunjucks
|
138 | app.use(async function (ctx) {
|
139 | await ctx.render('user.html')
|
140 | })
|
141 | ```
|
142 |
|
143 | * `opts.engineSource`: replace consolidate as default engine source
|
144 |
|
145 | If you’re not happy with consolidate or want more control over the engines, you can override it with this options. `engineSource` should
|
146 | 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`.
|
147 |
|
148 | ```js
|
149 | const render = views(__dirname, { engineSource: {foo: () => Promise.resolve('bar')}})
|
150 | app.use(render)
|
151 | // OR
|
152 | // app.context.render = render()
|
153 |
|
154 | app.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
|
162 | const 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 |
|
185 | Set 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
|