【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

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官网地址;

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



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

相关文章推荐

thinkjs

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

最全前端资源汇集

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

前端资源教程

资源教程 综合类 前端知识体系前端知识结构Web前端开发大系概览Web前端开发大系概览-中文版Web Front-end Stack v2.2免费的编程中文书籍索引前端书籍前端免费书籍大全前端...

最全的前端资源教程

https://github.com/AutumnsWind/Front-end-tutorial 部分内容是出自: https://github.com/jsfront/src/blob/mast...

github上最全的资源教程-前端涉及的所有知识体系

前端无疑是2016年最火热的技术,没有之一。 各种前端mvc框架层出不穷,angular js,vue,react,前端组件化开发概念已经深入人心。前端工资已经比手机端开发还要高了。 作为...

linqjs的常用方法

var myList = [ { Name: "Jim", Age: 20,type:1 }, { Name: "Kate", Age: 20 ,type:2}, { Name: "Lil...

直接拿来用!最火前端开源项目(三)

摘要:在前面的(一)、(二)中为开发者提供了十九个类别的开源项目列表,你们是否会感到目不暇接呢?没关系,只要对你有所帮助,我们的目的也就达到了,这里继续向你推荐剩下的二十六个类别的开源项目列表,供你查...

前端涉及的所有知识体系

今天分享下前端所有的知识体系。 综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3...

github上的学习材料一:前端涉及的所有知识体系

前面分享了前端入门资源汇总,今天分享下前端所有的知识体系。 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要...

前端资源2

综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 ht...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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