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:041684browse
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
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.htmlFirst 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 blocksThen 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 %} blockThat 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
// 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中文网其它相关文章！
推荐阅读：
The above is the detailed content of Nodejs front-end template engine swig usage tutorial. For more information, please follow other related articles on the PHP Chinese website!