专栏首页IMWeb前端团队简单而强大的swig.js

简单而强大的swig.js

本文作者:IMWeb json 原文出处:IMWeb社区 未经同意,禁止转载

swig的简单介绍

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

  • 根据路劲渲染页面
  • 面向对象的模板继承,页面复用
  • 动态页面
  • 快速上手
  • 功能强大 swig的使用

swig的变量

{{ foo.bar }}
{{ foo['bar'] }}
//如果变量未定义,输出空字符。

swig的标签

extends

使当前模板继承父模板,必须在文件最前 参数: file 父模板相对模板 root 的相对路径,将在后面介绍如何实现模板继承。

block

定义一个块,使之可以被继承的模板重写,或者重写父模板的同名块 参数: name 块的名字,必须以字母数字下划线开头

parent

将父模板中同名块注入当前块中

include

包含一个模板到当前位置,这个模板将使用当前上下文 参数: file 包含模板相对模板 root 的相对路径

      {% include "a.html" %}
      {% include "template.js" %} 
      //将引入的文件内容放到被引用的地方

raw

停止解析标记中任何内容,所有内容都将输出 参数: file 父模板相对模板 root 的相对路径

for

遍历对象和数组 参数:x 当前循环迭代名 in: 语法标记 y: 可迭代对象。

    {% for x in y %}
          <p> {{ x }}</p>
    {% endfor %}

if

条件语句,参数:

接受任何有效的 JavaScript条件语句

    {% if foo %}
        <p> foo is true </p>
    {% else if "foo" in bar %}
        <p> foo in bar</p>
    {% else %}
        <p> fail </p>
    {% endif %}

autoescape

改变当前变量的自动转义行为 参数: on 当前内容是否转义 type: 转义类型,js 或者 html,默认 html

    input  = '<p>Hello "you" & \'them\'</p>';

    {% autoescape false %}
        {{ input }}
    {% endautoescape %}

    // <p>Hello "you" & 'them'</p>
    {% autoescape true %}
        {{ input }}
    {% endautoescape %}
    //&lt;p&gt;Hello &quot;you&quot; &amp; &#39;them&#39; &lt;/p&gt;
    {% autoescape true "js" %}
        {{ input }}
    {% endautoescape %}

    // \u003Cp\u003EHello \u0022you\u0022 & \u0027them\u0027\u003C\u005Cp\u003E

set

设置一个变量,在当前上下文中复用

    {% set foo = [0, 1, 2, 3, 4, 5] %}
    {% for num in foo %}
        <li>{{ num }}</li>
    {% endfor %}

模板继承

Swig 使用 extends 和 block 来实现模板继承

example:

//layout.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block title %}My Site{% endblock %}</title>

    {% block head %}

    {% endblock %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>
//index.html


{% extends './layout.html' %}

{% block title %}My Page{% endblock %}

{% block head %}
{% parent %}

{% endblock %}

{% block content %}
    <p>This is just an awesome page.</p>
    <h1>hello,lego.</h1>
    <script>

        //require('pages/index/main');
    </script>
{% endblock %}

swig模板经过编译后:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Page</title>
<body>

    <p>This is just an awesome page.</p>
    <h1>hello,lego.</h1>
    <p>test</p>
    <script>
        //require('pages/index/main');
    </script>
</body>
</html>

swig模板在fis3中的应用

swig的模板继承可以更好的帮我们组织代码结构,更好的复用代码。类似jello扩展的velocity标签。 如上个例子,可以将公用代码写在一个文件里,作为母版页,需要的页面就继承这个页面,而且页面中的block又可以方便我们自定义需要的内容。 在fis3构建中使用时,调用swig编译插件,将swig标签解析成正常的html文件即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简单而强大的swig.js

    使当前模板继承父模板,必须在文件最前 参数: file 父模板相对模板 root 的相对路径,将在后面介绍如何实现模板继承。

    IMWeb前端团队
  • node网页分段渲染与bigpipe(一)

    ? 页面渲染,通常来说分为前端渲染以及后端渲染。前端渲染指的是服务端返回html框架以及模版,前端通过ajax异步请求拉取数据渲染模版,并动态修改dom,形成...

    IMWeb前端团队
  • node网页分段渲染与bigpipe(一)

    页面渲染,通常来说分为前端渲染以及后端渲染。前端渲染指的是服务端返回html框架以及模版,前端通过ajax异步请求拉取数据渲染模版,并动态修改dom,形成最终页...

    IMWeb前端团队
  • 简单而强大的swig.js

    使当前模板继承父模板,必须在文件最前 参数: file 父模板相对模板 root 的相对路径,将在后面介绍如何实现模板继承。

    IMWeb前端团队
  • 深入Spring Boot (八):模板引擎使用详解

    《深入Spring Boot (六):使用SpringMVC框架创建Web应用》示例代码创建的是REST web服务,Spring MVC除了可以实现REST ...

    JavaQ
  • 开发 | 如何在小程序页面之间,传递数据和变量?

    最近组里开发小程序,遇到了一个困扰前端很长时间的话题:页面之间,如何传递数据和变量?

    知晓君
  • 编码效率提升之Pycharm活动模板(Live Templates )

    是不是效率提升了许多,简单来说,活动模板就是事先定义好代码模板,然后输入快捷命令,快速实现自定义代码补全。可以实现循环,条件,函数,代码框架等一键输入。

    吾非同
  • Java EE基础之JSP

         从本篇文章开始,我会用文章记录下我在学习Java EE过程中的一些笔记和感悟,至于还没有更新结束的Java SE还是会继续写的,只是我觉得一直写语法很...

    Single
  • 如何套印防伪单证?

    如何批量打印防伪单证?批量生成个性化及智能化的纸质或者PDF单证-防伪单证智能输出系统通过表单设计工具,以快捷直观的方式创建包括但不限于公司徽标、图形及条码等复...

    用户6457849
  • 要不要迎合用户的口味

    今天有人给我留言,大意是说他微信里都是Whatsapp被巨资收购的消息,这么大件事你怎么都不谈啊?还在这扯什么敏捷? 我为什么要谈?一来我不熟,二来我也谈不出个...

    tyrchen

扫码关注云+社区

领取腾讯云代金券