Home > Article > Web Front-end > Nodejs front-end template engine swig usage tutorial

Nodejs front-end template engine swig usage tutorial

php中世界最好的语言Original: 2018-05-21 13:50:041749browse

This time I will bring you nodejs front-endtemplate engineswig usage tutorial, nodejsfront-end templateengine swigprecautionsWhat are the following, the actual combat Let’s take a look at the case.

Compared to jade, I still prefer the swig front-end template engine. Although jade's syntax is much more concise and efficient, the biggest problem for me is that

it doesn't have the look that HTML should have. . . .

So I decided to use swig. The page structure and appearance are all familiar, and it is much easier to use.

Many friends are also struggling with the advantages and disadvantages of the two. This varies from person to person depending on the needs.

Let’s learn about swig, the front-end template engine

A brief introduction to swig

swig is a JS template engine. It has the following characteristics:

Supports most mainstream browsers.
Expression compatibility is good.
Template inheritance for object-oriented.
Apply filters and transformations to the output in the template.
The page can be rendered according to the road strength.
Support page reuse.
Support dynamic pages.
Extensible and customizable.

1. Installation of swig

npm install swig --save

2. Integration with express framework

app.js

var 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 page
app.get('/',function(req, res){
 res.render('index',{
  title:'首页 ',
  content: 'hello swig'
 })
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{{ title }}</title>
</head>
<body>
 {{ content }}
</body>
</html>

Then test run

node app.js

Enter in the browser: http://localhost :4000, the execution effect is as follows

##Browser run.png

3. Basic usage

1. Variable

{{ name }}

What needs to be noted here is that there must be spaces at both ends, so that when writing {{name}}, an error will be reported

2. Attributes

{{ student.name }}

3. Template inheritance

Swig uses extends and block to implement template inheritance layout.html

First We define a template

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{% block title %}{% endblock %}</title>
 {% block head %}{% endblock %}
</head>
<body>
 {% block content %}{% endblock %}
</body>
</html>

In this template we define three blocks. Subtemplates can inherit these three blocks

Then we write an index.html to inherit this template

{% extends './layout.html' %}
{% block title %} index {% endblock %}
{% block content %}
 <p>
   <h1>hello swig</h1>
  <p>
{% endblock %}

Note that I did not overwrite the {% block head %}{% endblock %} block

That is to say, we can define many blocks in the layout.html template page, and the subpages can have Selective implementation.

4.include template

Includes a template to the current location, this template will use the current context

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{% block title %}{% endblock %}</title>
 {% include "./includes/head.html" %}
 {% block head %}{% endblock %}
</head>
<body>
 {% include "./includes/header.html" %}
 {% block content %}{% endblock %}
</body>
</html>

5.if judgment

{ % if name === '郭靖' % }
 hello 靖哥哥
{ % endif % }

6.if-else judgment

{ % if name === '郭靖' % }
 hello 靖哥哥
{ % elseif name === '黄蓉' % }
 hello 蓉妹妹
{ % else % }
 hello 欧阳峰
{ % endif % }

7.for loop

Let’s start with chestnuts:

// arr = [1, 2, 3]
{ % for key, val in arr % }
 <p>{ { key } } -- { { val } }</p>
{ % endfor % }

For loop built-in variables:

loop.index: The index of the current loop (starting with 1)
loop.index0: The index of the current loop (starting from 0)
loop.revindex: The index of the current loop starting from the end (starting from 1)
loop.revindex0 : The index of the current loop starting from the end (starting from 0)
loop.key: If the iteration is an object, it is the key of the current loop, otherwise it is the same as loop.index
loop.first: Returns true if it is the first value
loop.last: Returns true if it is the last value
loop.cycle: A helper function that takes the specified parameters as the cycle

Usage:

// arr = [1, 2, 3]
{ % for key, val in arr % }
 <p>{{ loop.index }} -- {{ key }} -- {{ val }}</p>
{ % endfor % }

8.强大的内置过滤器

add(value)：使变量与value相加，可以转换为数值字符串会自动转换为数值。
addslashes：用 \ 转义字符串
capitalize：大写首字母
date(format[, tzOffset])：转换日期为指定格式
format：格式
tzOffset：时区
default(value)：默认值（如果变量为undefined，null，false）
escape([type])：转义字符
默认： &, <, >, ", '
js: &, <, >, ", ', =, -, ;
first：返回数组第一个值
join(glue)：同[].join
json_encode([indent])：类似JSON.stringify, indent为缩进空格数
last：返回数组最后一个值
length：返回变量的length，如果是object，返回key的数量
lower：同''.toLowerCase()
raw：指定输入不会被转义
replace(search, replace[, flags])：同''.replace
reverse：翻转数组
striptags：去除html/xml标签
title：大写首字母
uniq：数组去重
upper：同''.toUpperCase
url_encode：同encodeURIComponent
url_decode：同decodeURIComponemt

使用方法：

例如我们要格式化一个时间，使用方法和linux上的管道命令非常像

{{ birthday|date('Y-m-d') }}

大写首字母

{{ name|title }}

9.set命令

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Nodejs front-end template engine swig usage tutorial

Related articles