使用Nunjucks

作者: 大盗老袁 | 来源:发表于2017-07-16 09:20 被阅读4903次

Nunjucks模板引擎的使用涉及三个对象:

  1. 实例化Enviroment对象,即创建env对象
  2. 模板(html文件),通常在views文件夹下
  3. {varName:Data...}数据
env对象的创建
  1. var env = new Environment([loaders],[opts])

    在node端使用new FileSystemLoader([searchPaths],[opt]) 加载[loaders],searchPaths为模板所在路径,一般为views,opts包含noCachewatch 具体介绍

    [opts] 中opts的配置有 autoescape(默认为true,控制转义)、throwOnUndefined、trimBlocks 和 lstripBlocks

  2. env.addFilters(...) 在env上添加过滤函数

廖大代码,创建env的fn:

function createEnv(path,opts){
    //nunjucks配置项
    var 
        autoescape = autoescape = opts.autoescape && true,
        noCache = opts.noCache || false,
        watch = opts.watch || false,
        throwOnUndefined = opts.throwOnUndefined || false,
        env = new nunjucks.Environment(
            new nunjucks.FileSystemLoader(path,{
                noCache:noCache,
                watch:watch
            }),{
                autoescape:autoescape,
                throwOnUndefined:throwOnUndefined
            });
    
    //自定义过滤器
    if(opts.filters){
        for(var f in opts.filters){
            env.addFilter(f,opts.filters[f]);     //如果一个对象的属性名存储在变量中,通过object[var] 方式遍历
        }
    }

    return env;
}

实例化env:

var env = createEnv('views',{
    // autoescape:false,
    watch:true,
    filters:{
        hex : function(n){
            if(typeof n === 'number'){
                return 'Ox'+n.toString(16);
            }else{
                return n;
            }
            
        }
    }
});
模板
数据

{varName:Data...} varName即在模板中被使用

var test = env.render('cycle.html',{fruits:['apple','orange']});console.log(test); 渲染和控制台输出

摘自使用Nunjucks(廖雪峰)

use-nunjucks源码

Nunjucks官网

Nunjucks在使用npm下载时出现以 Error: EPERM: operation not permitted 开头的error,自己尝试过的有两个方法可以试下:

相关文章

网友评论

    本文标题:使用Nunjucks

    本文链接:https://www.haomeiwen.com/subject/mlrtkxtx.html