好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

swig

swig 介绍

swig是js模板引擎,它有如下特点:

支持 大多数主流浏览器。

表达式兼容性好。

面向对象的模板继承。

将过滤器和转换应用到模板中的 输出 。

可根据路劲渲染 页面 。

支持 页面 复用。

支持 动态 页面 。

可扩展、可定制。

1、API

swig.init({

allowErrors: false,

autoescape: true,

cache: true,

encoding: 'utf8',

filters: {},

root: '/',

tags: {},

extensions: {},

tzOffset: 0

});

options:

allowErrors : 默 认值为 false。将所有模板解析和编译 错误 直接 输出 到模板。如果为 true,则将引发 错误 ,抛出到 Node.js 进程中,可能会使您的应用程序崩溃。

autoescape : 默 认true,强烈建议保持。字符转换表请参阅转义过滤器。

true: html安全转义

false: 不转义,除非使用转义过滤器或者转义 标签

'js': js安全转义

cache : 更改为 false 将重新编译每个请求的模板的 文件 。正式环境建议保持true。

encoding : 模板 文件 编码

root : 需要 搜索 模板的目录。如果模板传递给 swig.compileFile 绝对路径 (以/开头),Swig不会在模板root中 搜索 。如果传递 一个 数组,使用第 一个 匹配成功的数组项。

tzOffset : 设置 默 认时区偏移量。此设置会使转换日期过滤器会 自动 的修正相应时区偏移量。

filters : 自定义 过滤器或者重写 默 认过滤器,参见 自定义 过滤器指南。

tags : 自定义 标签 或者重写 默 认 标签 ,参见 自定义 标签 指南。

extensions : 添加 第三方库,可以在编译模板时使用,参见参见 自定义 标签 指南。

2、nodejs var tpl = swig.compileFile("path/to/template/file.html");var renderedhtml = tpl.render({ vars: 'to be inserted in template' });或者var tpl = swig.compile("Template string here");var renderedhtml = tpl({ vars: 'to be inserted in template' }); 3、结合Express npm install expressnpm install consolidate然后app.engine('.html',cons.swig);app.set('view engine','html'); 4、浏览器

Swig浏览器版本的api基本与nodejs版相同,不同点如下:

不能使用swig.compileFile,浏览器没有 文件 系统

你必须提前使用swig.compile编译好模板

按顺序使用extends,import,and include,同时在swig.compile里使用参数templateKey来查找模板

var template = swig.compile('<p>{% block content %}{% endblock %}</p>',{ filename: 'main' });

var mypage = swig.compile('{% extends "main" %}{% block content %}Oh hey there!{% endblock %}',{ filename: 'mypage' });

GitHub: https://github.com/paularmstrong/swig

网站描述: nodejs前端模板引擎

swig官方网站

官方网站:

如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。

查看更多关于swig的详细内容...

  阅读:31次

上一篇

下一篇

第1节:curl.js    第2节:jade    第3节:jspm-cli    第4节:angular-cli    第5节:lerna    第6节:duo.js    第7节:swc    第8节:WebJars    第9节:fetch    第10节:babel-plugin-preval    第11节:browserify    第12节:Lebab    第13节:bundle-buddy    第14节:esprima    第15节:FIS3    第16节:prerender-loader    第17节:Parcel    第18节:lit-html    第19节:Neutrino    第20节:walle    第21节:webpack    第22节:pug    第23节:bower    第24节:Snowpack    第25节:template.js    第26节:Forge    第27节:stylis.js    第28节:Liquid    第29节:npx    第30节:jss    第31节:component    第32节:faster.js    第33节:Juicer    第34节:Jiko    第35节:laytpl    第36节:CoffeeScript    第37节:ghcjs    第38节:critters    第39节:vue-loader    第40节:swig    第41节:Workerize    第42节:Bit    第43节:Acorn    第44节:hyperHTML    第45节:ESL    第46节:script.js    第47节:yarn    第48节:MobX    第49节:Vulcan    第50节:vue-cli    第51节:WeFlow    第52节:qiankun乾坤    第53节:elf    第54节:create-react-app    第55节:CNPM    第56节:codelyzer    第57节:electron-webpack    第58节:dot-dom    第59节:prerender    第60节:assemblyscript    第61节:jarvis    第62节:Rollup    第63节:webpack-dashboard    第64节:worker-plugin    第65节:webpack-encore    第66节:HEAD    第67节:poi    第68节:dawn    第69节:mustache.js    第70节:shipit    第71节:Flow    第72节:teletype    第73节:Dust.js    第74节:Athena    第75节:npm    第76节:Koala    第77节:webpackmonitor    第78节:ndm    第79节:size-plugin    第80节:seajs    第81节:prepack-webpack-plugin    第82节:webpack-simple-starter    第83节:Verdaccio    第84节:doT.js    第85节:bonsai    第86节:arttemplate    第87节:UiBot RPA    第88节:EJS    第89节:mern-starter    第90节:v8.dev    第91节:renovate    第92节:happypack    第93节:gulp    第94节:grunt    第95节:microbundle    第96节:handlebars.js    第97节:micro    第98节:tink    第99节:min-cli    第100节:Snibox    第101节:Codekit    第102节:WebAssembly    第103节:webpack-bundle-analyzer    第104节:htm    第105节:yeoman    第106节:Broccoli.js    第107节:jetpack    第108节:ied    第109节:Ender    第110节:Nunjucks    第111节:splittable    第112节:closure-compiler    第113节:react-boilerplate    第114节:SystemJS    第115节:electron-webpack-dashboard    第116节:fuse-box    第117节:jsvu    第118节:tmt-workflow    第119节:Cooking    第120节:hogan.js