node-framework/wiki/docs/views.md

node-framework

# views

在默认配置下，views目录用以存放前端模板。这个配置可以在`config/global.js`的`templateDir`中修改。下面将默认使用views作为模板目录。

本文使用[etpl](https://github.com/ecomfe/etpl)作为模板引擎，并使用`.tpl`作为模板文件扩展名。因此位于views目录下的所有扩展名为`.tpl`的文件都会被系统载入并等待使用。如果要更换模板引擎请见[这里](#更换模板引擎)

和express类似，在controller的最后调用`response.render('viewName', data)`可以调用到views目录下名为`viewName`的模板文件。为了让模板文件的目录结构更加清晰合理，一般会在views目录下再建立`common`文件夹用以存放通用模板，例如`header.tpl`, `footer.tpl`等。一个常见的目录结构如下所示：

![常见模板目录结构](http://bs.baidu.com/weigou-baidu-com/fbfe829fe1ba00429f12ca9738d103d0.png)

使用`response.render('monitor/overall', data)`即可调用到`common/overall.tpl`模板文件。

__请注意：__通常，页面模板文件开头会使用类似`{{ import: header }}`的语法来调用通用模板。etpl需要手动指明引用目录，因此需要额外在`config/view.js`的`options`增加配置`includedFiles: [ 'common/*' ]`。

关于模板文件的具体写法，可以参见各个模板引擎的具体说明文档，本文不加赘述。

## 更换模板引擎

`node-framework`中引用了`consolidate`作为兼容众多模板的工具，consolidate支持的模板引擎，开发者都可以选择，etpl也支持

选择模板引擎分为两部

1. 引入prefered engine

    package.json

    ```javascript
    {
        "dependencies": {
            "mustache": "~0.8.2"
        }
    }
    ```
    
2. 声明engine

    config/view.js

    ```javascript
    module.exports = {
        engine: 'mustache'
    }
    ```



## 自定义模板引擎

很多时候，大家都会选择自己偏好的模板引擎，甚至使用自己编写的模板引擎，`node-framework`同样给予了支持

### 配置自定义模板

假设我们写了一个模板引擎叫`muffin`

只需要在config/view.js中声明muffin即可，如下所示

```javascript

// muffin需要是function
var muffin = require('muffin');

module.exports = {
    engine: muffin
}

```

即可

### 如何编写自定义模板

```javascript
/**
 * @param {String} file
 * @param {Object} options
 * @param {Function(Error, String)} callback
 *
 */
function muffin(file, options, callback) {
    // blablabla
}

module.exports = muffin;
```

### 支持plugin

`plugin`是框架支持的一个特性，可以通过实现`filter`方法

```javascript

function muffin(file, options, callback) {
    // blablabla
}
/**
 * @param {String} name
 * @param {Function} filter
 */
muffin.filter = function (name, filter) {
    // blablabla
}
module.exports = muffin;
```