This time I will show you how to use the nodejs front-end template engine swig, and what are the precautions for using the nodejs front-end template engine swig. The following is a practical case, let's take a look.
Compared with 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 look like html. . . .
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 will vary from person to person depending on the needs.
This is a comparison between the two
http://vschart.com /compare/swig-template-engine/vs/jade-template-engin
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 features:
Supports most mainstream browsers.
Expression compatibility is good.
Object-oriented template inheritance.
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
Copy after login
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'
})
})Copy after login
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
</html>Copy after login
Then test run
node app.js
Copy after login
Enter in the browser: http://localhost :4000, the execution effect is as follows
##Browser run.png
3. Basic usage
1. Variable
{{ name }}Copy after login
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 }}Copy after login
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>Copy after login
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 %}Copy after login
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>Copy after login
5.if judgment
{ % if name === '郭靖' % }
hello 靖哥哥
{ % endif % }Copy after login
6.if-else judgment
{ % if name === '郭靖' % }
hello 靖哥哥
{ % elseif name === '黄蓉' % }
hello 蓉妹妹
{ % else % }
hello 欧阳峰
{ % endif % }Copy after login
7.for loop
Let’s start with chestnuts:
// arr = [1, 2, 3]
{ % for key, val in arr % }
<p>{ { key } } -- { { val } }</p>
{ % endfor % }Copy after login
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 from the end of the current loop (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 % }Copy after login
8. Powerful built-in filters
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') }}Copy after login
大写首字母
{{ name|title }}Copy after login
9.set命令
用来设置一个变量，在当前上下文中复用
{% set foo = [0, 1, 2, 3, 4, 5] %}
{% for num in foo %}
<li>{{ num }}</li>
{% endfor %}Copy after login
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
vue-cli与webpack处理静态资源的方法及webpack打包使用步奏详解
JavaScript常用截取字符串方法使用汇总
The above is the detailed content of How to use nodejs front-end template engine swig. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
