thinkjs使用Nunjucks模板以及简单的使用方法

原创 2016年06月01日 16:39:48

Nunjucks 是一个更复杂的 JavaScript 模板引擎,提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。

之前项目一直使用的是art-template模板引擎, 今天在别人的项目中见到使用Nunjucks模板引擎,真的很强大,用过的人都说好!

我们的项目都是thinkjs做的,我这里也用的是thinkjs,引用的内容基本上都是thinks官网的配置方法

首先是样创建新的项目,创建项目就说了,详细见官网,创建好项目,

第一步是创建adapter里面创建两个文件base.js和nunjucks.js,nunjucks.js继承base.js


base.js程序如下:

'use strict';

import fs from 'fs';

/**
 * template base class
 * @type {Class}
 */
export default class extends think.adapter.base {
    /**
     * merge config
     * @param  {Object} defaultConf []
     * @param  {Object} extraConf   []
     * @return {}             []
     */
    parseConfig(defaultConf, extraConf){
        let config = think.parseConfig(think.extend({}, defaultConf, think.config('view'), extraConf));
        //compatibility with view.options
        if(!think.isEmpty(config.options)){
            think.log(`view.options is deprecated, use view.adapter.${config.type} instead`, 'WARNING');
            config = think.extend(config, config.options);
        }
        return config;
    }
    /**
     * pre render
     * @param  {Object}    config []
     * @param  {...[type]} args   []
     * @return {}           []
     */
    prerender(config = {}, ...args){
        if(think.isFunction(config.prerender)){
            config.prerender(...args);
        }
    }
    /**
     * get template file content
     * @return {} []
     */
    async getContent(file){
        let stat = await think.promisify(fs.stat, fs)(file);
        let mTime = stat.mtime.getTime();
        let fileCache = thinkCache(thinkCache.VIEW_CONTENT, file);
        if(fileCache && fileCache[0] >= mTime){
            return fileCache[1];
        }
        return think.await(`template_${file}`, () => {
            let fn = think.promisify(fs.readFile, fs);
            return fn(file, 'utf8');
        }).then(content => {
            //if content is empty, not cached
            if(!content){
                return content;
            }
            thinkCache(thinkCache.VIEW_CONTENT, file, [mTime, content]);
            return content;
        });
    }
    /**
     * run
     * @param  {String} templateFile []
     * @param  {Object} tVar         []
     * @return {promise}             []
     */
    run(templateFile){
        return this.getContent(templateFile);
    }
}

nunjucks.js里面程序如下:

'use strict';

import path from 'path';
import Base from './base.js';
/**
 * nunjucks template
 * @type {Class}
 */
export default class extends Base {
  /**
   * run
   * @param  {String} templateFile []
   * @param  {Object} tVar         []
   * @return {Promise}             []
   */
  async run(templateFile, tVar, config){

    let options = this.parseConfig({
      autoescape: true,
      watch: false,
      noCache: false,
      throwOnUndefined: false
    }, config);

    let nunjucks = await think.npm('nunjucks');

    let env;
    if(options.root_path){
      //if templateFile not start with root_path, can not set root_path
      if(path.isAbsolute(templateFile) && templateFile.indexOf(options.root_path) !== 0){
        env = nunjucks.configure(options);
      }else{
        env = nunjucks.configure(options.root_path, options);
      }
    }else{
      env = nunjucks.configure(options);
    }

    env.addGlobal('think', think);
    env.addGlobal('JSON', JSON);
    env.addGlobal('eval', eval);

    this.prerender(options, nunjucks, env);

    let fn = think.promisify(nunjucks.render);
    return fn(templateFile, tVar);
  }
}
接下来是修改引用模板,修改config下的view.js 文件,路径如图:


修改内容如下:


'use strict';
/**
 * template config
 */
export default {
  type: 'nunjucks',
  content_type: 'text/html',
  file_ext: '.html',
  file_depr: '_',
  root_path: think.ROOT_PATH + '/view',
  adapter: {
    nunjucks: {
      prerender:(nunjucks, env) => {
        env.addFilter("addS", function (str) {
            return str+'S';
        })
      }
    }
  }
};
上面的文件我添加了一个测试filter,当然也可不用管它,这样thinkjs的Nunjucks就算配置完了
controller里面的index控制器添加数据:

页面测试代码:

这段代码调用了前面配置的自定义fillter方法addS,页面显示效果如下:

说明配置成功了;
还有很多功能,Nunjucks官网地址;

另外温馨提示下:官网地址的右上角有中文页面,我看完了才发现了尴尬



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

06、一步一步学thinkjs之实现登录验证

1、建立一个view(F:\thinkjs\2hwl\view\home\user_login.html)供登录。(关于为什么目录及文件结构如此,引用官方说明:视图文件默认的命名规则为 模块/控制器_...

最全前端资源汇集

综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 ht...

05、一步一步学thinkjs之model增删改查

紧接上章的内容实现数据的增删改查。实际上上章已经实现了查的效果,这里不再说查的问题了。 1、打开F:\thinkjs\2hwl\src\home\controller\user.js,输入内...

送给前端的你,推荐几篇前端汇总文章。(来自知乎专栏)

来源:https://zhuanlan.zhihu.com/p/22229868   作者:路人甲 链接:https://zhuanlan.zhihu.com/p/22229868 来源:知乎 著作权...

thinkjs

thinkjs入门 安装 npm install -g thinkjs-cmd 查看是否安装成功 thinkjs -v 新建项目 mkdir new_dir_name; cd new_dir...

PPT模板制作及使用方法

  • 2014-03-11 21:31
  • 69KB
  • 下载

PPT模板制作及使用方法

  • 2013-10-22 11:33
  • 69KB
  • 下载

Samrty模板引擎在php项目中的使用方法

(1)在smarty官网http://www.smarty.net/download上去下载smarty; (2)打开文件夹,demo文件夹是smarty使用的一些案例,libs文件夹下是smart...

SVN使用方法简单总结

  • 2013-05-02 20:05
  • 529KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)