做网站 创业 流程,网页制作素材教学,wordpress定义字体颜色,中国做外贸网站有哪些这次给大家带来如何使用nodejs前端模板引擎swig#xff0c;使用nodejs前端模板引擎swig的注意事项有哪些#xff0c;下面就是实战案例#xff0c;一起来看一下。相对于jade#xff0c;我还是更喜欢swig前端模板引擎#xff0c;jade虽然语法简练高效了不少#xff0c;但是…这次给大家带来如何使用nodejs前端模板引擎swig使用nodejs前端模板引擎swig的注意事项有哪些下面就是实战案例一起来看一下。相对于jade我还是更喜欢swig前端模板引擎jade虽然语法简练高效了不少但是在我这最大的问题是他没有一个html该有的样子。。。所以我还是决定使用swig页面结构样子都是熟悉的样子使用起来顺手了许多。很多朋友也在纠结二者的优缺点这个根据需求因人而异吧这是两者的比较http://vschart.com/compare/swig-template-engine/vs/jade-template-engin下面我们一起学习下swig这个前端模板引擎swig的简单介绍swig是JS模板引擎它有如下特点支持大多数主流浏览器。表达式兼容性好。面向对象的模板继承。将过滤器和转换应用到模板中的输出。可根据路劲渲染页面。支持页面复用。支持动态页面。可扩展、可定制。一. swig的安装npm install swig --save二.和express框架集成app.jsvar express require(express);var swig require(swig);var path require(path)var app express();var port process.env.PORT || 4000//设置swig页面不缓存swig.setDefaults({cache: false})app.set(view cache, false);app.set(views,./views/pages/);app.set(view engine,html);app.engine(html, swig.renderFile);app.listen(port);console.log(server is started at http://localhost:port);//index pageapp.get(/,function(req, res){res.render(index,{title:首页 ,content: hello swig})})index.html{{ title }}{{ content }}然后测试运行node app.js在浏览器输入http://localhost:4000, 执行效果如下浏览器运行.png三.基本用法1.变量{{ name }}这里需要注意的是前后两端都要有空格这样{{name}}写就会报错2.属性{{ student.name }}3.模板继承Swig 使用 extends 和 block 来实现模板继承 layout.html首先我们定义一个模板{% block title %}{% endblock %}{% block head %}{% endblock %}{% block content %}{% endblock %}这个模板里面我们定义了三个block块子模板可以对这三个block继承然后我们写一个index.html继承这个模板{% extends ./layout.html %}{% block title %} index {% endblock %}{% block content %}hello swig{% endblock %}注意我这里并没有复写{% block head %}{% endblock %}这个块也就是说我们可以在layout.html模板页面里面定义很多block而子页面可以有选择性的实现。4.include模板包含一个模板到当前位置这个模板将使用当前上下文{% block title %}{% endblock %}{% include ./includes/head.html %}{% block head %}{% endblock %}{% include ./includes/header.html %}{% block content %}{% endblock %}5.if判断{ % if name 郭靖 % }hello 靖哥哥{ % endif % }6.if-else判断{ % if name 郭靖 % }hello 靖哥哥{ % elseif name 黄蓉 % }hello 蓉妹妹{ % else % }hello 欧阳峰{ % endif % }7.for循环先上栗子// arr [1, 2, 3]{ % for key, val in arr % }{ { key } } -- { { val } }{ % endfor % }for循环内置变量loop.index当前循环的索引(1开始)loop.index0当前循环的索引(0开始)loop.revindex当前循环从结尾开始的索引(1开始)loop.revindex0当前循环从结尾开始的索引(0开始)loop.key如果迭代是对象是当前循环的键否则同 loop.indexloop.first如果是第一个值返回 trueloop.last如果是最后一个值返回 trueloop.cycle一个帮助函数以指定的参数作为周期使用方法// arr [1, 2, 3]{ % for key, val in arr % }{{ loop.index }} -- {{ key }} -- {{ val }}{ % endfor % }8.强大的内置过滤器add(value)使变量与value相加可以转换为数值字符串会自动转换为数值。addslashes用 \ 转义字符串capitalize大写首字母date(format[, tzOffset])转换日期为指定格式format格式tzOffset时区default(value)默认值(如果变量为undefinednullfalse)escape([type])转义字符默认 , , , js: , , , , , -, ;first返回数组第一个值join(glue)同[].joinjson_encode([indent])类似JSON.stringify, indent为缩进空格数last返回数组最后一个值length返回变量的length如果是object返回key的数量lower同.toLowerCase()raw指定输入不会被转义replace(search, replace[, flags])同.replacereverse翻转数组striptags去除html/xml标签title大写首字母uniq数组去重upper同.toUpperCaseurl_encode同encodeURIComponenturl_decode同decodeURIComponemt使用方法例如我们要格式化一个时间使用方法和linux上的管道命令非常像{{ birthday|date(Y-m-d) }}大写首字母{{ name|title }}9.set命令用来设置一个变量在当前上下文中复用{% set foo [0, 1, 2, 3, 4, 5] %}{% for num in foo %}{{ num }}{% endfor %}相信看了本文案例你已经掌握了方法更多精彩请关注php中文网其它相关文章推荐阅读
