Swig

A simple, powerful, and extendable JavaScript Template Engine.
一个简单的,强大的,可扩展的JavaScript模板引擎。

Install Swig

npm install swig --save

Source code

创建一个模版文件

<h1>{{ pagename|title }}</h1>
<ul>
{% for author in authors %}
  <li{% if loop.first %} class="first"{% endif %}>
    {{ author }}
  </li>
{% endfor %}
</ul>

读取文件并编译

var swig  = require('swig');
swig.renderFile('/path/to/template.html', {
    pagename: 'awesome people',
    authors: ['Paul', 'Jim', 'Jane']
});

输出结果

<h1>Awesome People</h1>
<ul>
  <li class="first">Paul</li>
  <li>Jim</li>
  <li>Jane</li>
</ul>

Documentation

变量

在模版中可以是用传过来的对象,使用 输出

{{ foo.bar }}
// 或则
{{ foo['bar'] }}

在 javascript 中我们可以使用 . 或则使用[] 里面传入 key 值来获取值

Error

{{ foo.chicken-tacos }}  // 使用 . 取值时不能出现横线

success

{{ foo['chicken-tacos'] }}  // 使用数组模式取值时传入的是一个 key , 这个时候正确的解析

逻辑

模版引擎中如果不支持逻辑语法,就不能称为引擎。

if

{% if object %}
  <h1>条件成立</h1>
{% endif %}

for

//循环,循环是使用 for in 语法
{% for person in people %}
  //loop 是私有对象属性, first 表示循环开始
  {% if loop.first %}
    <li>开始循环</li>
  {% endif %}
  <li>{{ person.name }}</li>
  //lat 表示循环结束
  {% if loop.last %}
    <li>结束循环</li>
  {% endif %}
{% endfor %}

block 自定义模块

//定义一个头部模块
{% block header %}
  <header> 头部 </header>
{% endblock %}

看下面源码

layout.swig
<!DOCTYPE html>
<html>
  <head>
    <title>swig block</title>
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body>
    {% block header %}  // 定义头部模块
    {% endblock %}


    {% block main %}  // 定义中间内容模块
    {% endblock %}


    {% block footer %}  // 定义底部模块
    {% endblock %}
  </body>
</html>
index.swig
// 继承 layout.swig
{% extends 'layout.swig' %}
# 继承后的页面是完整的结构,加入我们只想在某一个地方加入代码,就需要用到模块

{% block header %}
  <header>我是头部</header>
{% endblock %}

{% block main %}
  <div>我是中间部分</div>
{% endblock %}

{% block footer %}
  <footer>我是底部</footer>
{% endblock %}

include

导入其它页面到当前位置

{% include "block.swig" %}
meta.swig
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0"/>
layout.swig
<!DOCTYPE html>
<html>
  <head>
    <title>swig block</title>
    <!-- 导入 meta.swig 的所有代码到当前 -->
    {% include "meta.swig" %}
  </head>
  <body>
    hello swig
  </body>
</html>

Api

名称 类型 说明
autoescape boolean 控制页面是否安全输出
varControls array 变量的打开和关闭 默认为[ { { } } ]。
tagControls array 逻辑的打开和关闭 默认为[ { { } } ]。
locals array 上下文环境
cache Object 配置是否缓存

express + swig

设置 express views 默认使用 swig 解析输出

安装模块

npm install express --save

npm install swig --save
//导入 express 模块
import express from "express";

//系统模块 路径模块
import path from "path";

//引入 swig 模块
import Swig from 'swig';
//配置 swig
Swig.setDefaults({
  cache : false //不缓存文件
});

//实例化 express
const app = express();

//设置 get 请求,路由是 /
app.get("/",function(req,res){
  res.render("index");   // render 加载一个文件 并输出到浏览器
});

// 设置文件后缀的解释器  配置 render 输出的文件的解释器,编译
app.engine('html', Swig.renderFile);
//设置 页面的后缀  配置 render 输出文件的默认后缀
app.set('view engine', 'html');
//设置 页面的 跟目录  配置 render 输出文件的 根目录
app.set("views",path.join(__dirname,"../views"));


//监听本机端口号,运行服务
const server = app.listen(3000,function(){
  let host = server.address().address;
  let port = server.address().port;
  console.log("http:%s:%s",host,port);
});