nodejs前端模板引擎swig详细介绍

和jade相比，我更喜欢swig前端模板引擎。虽然jade在语法上简洁高效，但这里最大的问题是

他没有html外观。

所以我决定用swig，页面结构和外观都很熟悉，使用起来也容易很多。

很多朋友也纠结于两者的优劣，因人而异，因需要而异

这是两者之间的比较

http://vs chart.com/compare/swig-template-engine/vs/jade-template-engin

让我们了解一下swig，前端模板引擎

swig简介

Swig是JS模板引擎，具有以下特点：

支持大多数主流浏览器。良好的表达兼容性。面向对象的模板继承。对模板中的输出应用过滤器和转换。页面可以根据道路强度进行渲染。支持页面重用。支持动态页面。可扩展且可定制。I .安装开关

Npm安装软件。与express框架的集成

app.js

var express=require(' express ')；var swig=require(' swig ')；var path=require(' path ')var app=express()；var port=process . env . port | | 4000//将swig page设置为不缓存swig . setdefaults({ cache : false })app . set(' view cache '，false)；app . set(' view '，')。/视图/页面/')；app.set('视图引擎'，' html ')；app.engine('html '，swig . Renderfile)；app.listen(端口)；console.log('服务器在http://localhost: '端口启动)；//indexpageapp.get ('/'，function (req，RES) {res.render ('index '，{title :' home page '，content : ' hello swig ' })})index.html

！doctype html lang=' en ' head meta charset=' utf-8 ' title { { title } }/title/head body { { content } }/body/html然后测试运行

在浏览器中输入节点app . js:http://localhost :4000，执行效果如下

浏览器运行。巴布亚新几内亚

三.基本用法

1 .变量

{{ name }}这里需要注意的是，两端应该有空格，这样{{name}}在书写时就会报错。

2.属性

{{ student.name }}3。模板继承

Swig使用扩展和块实现模板继承layout.html

首先，我们定义一个模板

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title { % block title % } { % end block % }/title { % block head % } { % end block % }/流头{ % block content % } { % end block % }/body/html此模板中定义了三个块块，子模板可以继承这三个块

然后我们写一个index.html来继承这个模板

{%extends '。/layout . html“% } { % block title % }索引{ % end block % } { % block content % } div h1 hello swig/h1 div { % end block % }请注意，我没有复制此块{% block head %}{% endblock %}

也就是说，我们可以在layout.html模板页面中定义许多块，并且可以选择性地实现子页面。

4 .包含模板

包括一个模板到当前位置，它将使用当前上下文

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title { % block title % } { % end block % }/title { % include }。/includes/head . html“% } { % block head % } { % end block % }/head body { % include '。/includes/header . html“% } { % block content % } { % end block % }/body/html 5 . if判断

{%if name==='郭靖“%}你好靖哥{%endif% }6.if-else判断

{%if name=='郭靖' %}你好靖哥{%elseif name=='黄蓉' %}你好蓉姐{%else%}你好欧阳锋{%endif% }7.for循环

先上栗子：

//arr=[1，2，3] {%for key，val inarr % } p { { key } }-{ { val } }/p { % end for % } for loop内置变量：

Loop.index:当前循环的索引(从1开始)loop.index0:当前循环的索引(从0开始)loop.revindex:当前循环的索引，从结束(从0开始)loop.key:如果iteration是一个对象，则它是当前循环的键。否则，与loop.index loop.first相同：如果是第一个值，则返回true loop.last如果它是最后一个值，它将返回true loop.cycle:一个帮助函数，使用指定的参数作为循环使用方法：

//arr=[1，2，3] {%for key，val inarr%} p {{loop。index } }-{ { key } }-{ { val } }/p { % end for % } 8。强大的内置过滤器

Add(value):将变量添加到值中，该值可以转换为数值。该字符串将自动转换为数值。Addslashes:转义字符串大写\:大写初始日期(格式[，tzOffset]):将日期转换为指定的格式格式：format tzOffset:时区默认值(值):默认值(如果变量未定义，则为null，则为True)转义([type]):转义字符默认值：'，'，js:'，'，=，-，First:返回数组联接(glue)的第一个值：与[]相同。join json_encode([indent]):类似于JSON.stringify，indent是缩进的空格数last:返回数组长度的最后一个值：返回变量的长度，如果是object，返回键的个数lower:与“”相同。toLowerCase() raw:指定输入不会被转义替换(搜索，替换[，标志]):与“”相同。替换反向：翻转数组striptags:移除html/xml标记标题：大写首字母uniq:数组重复数据消除大写：与“”相同。toUpperCase url_encode:与encodeURIComponent url_decode相同：与decodeURIComponemt用法相同：

例如，我们想要格式化时间，使用的方法与linux上的pipeline命令非常相似

{{生日|日期(' Y-m-d') }}大写首字母

{{ name|title }}9.set命令

用于设置变量并在当前上下文中重用它

{%set foo=[0，1，2，3，4，5]% } { % for num in foo % } Li { { num } }/Li { % end for % }参考：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。