各种模板引擎
作者: dkvirus 发表于: 2018-06-25 15:41:00 最近更新: 2018-08-10 23:11:21

一、Ejs 模板引擎

1. 流程语句 <% %>

1
2
3
<% for (let i = 0; i < data.length; i++) { %>
<div class="bookcase"></bookcase>
<% } %>

2. 赋值 <%= %>

1
2
3
<a href="/book/<%= data[i].category %>/<%= data[i].books[j] %>">
<%= data[i].books[j] %>
</a>

3. html 代码

content 为 html 代码,不解析,原生展示。

1
<%- content %>

4. script 中接收变量

用引号包裹 <%= %> 即可。

1
2
3
4
<script>
// books 是 Express 传过来的变量
let books = '<%= books %>';
</script>

5. 引入 css 文件

使用 css() 方法。path 可以是数组或字符串,如果 path 开头不是 / 或任何协议,则会自动加上根路径;如果后面没有加上 .css 扩展名的话,也会自动加上。

1
<%- css(path, ...) %>

6. 公共模板复用

index.ejs 和 album.ejs 都有的公共部分可以单独写成一个文件 header.ejs,之后只要依次引入即可。已知目录结构如下:

1
2
3
4
|-- index.ejs
|-- album.ejs
|-- partials
|-- header.ejs

在 index.ejs 中引用 header.ejs 写法:include 表示引用其它模板,./partials/header.ejs 为相对于 index.ejs 的相对路径,简写为 partials/header.ejs。

1
<% include partials/header.ejs %>

二、Swig 模板引擎

1. 变量

1
2
3
要这么写 {{ name }},中间有空格,{{name}} 这么写会报错。

{{ people.name }} 调用对象的属性。

想要在 swig 中定义一个变量,使用 set 关键字:

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

2. if 条件语句

1
2
3
{% if name === '郭靖' %}
hello 靖哥哥
{% endif %}
1
2
3
4
5
6
7
{% if name === '郭靖' %}
hello 靖哥哥
{% elseif name === '黄蓉' %}
hello 蓉妹妹
{% else %}
hello 欧阳峰
{% endif %}

3. for 循环语句

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

循环中的内置变量:

变量 说明
loop.index 当前循环的索引(1开始)
loop.index0 当前循环的索引(0开始)
loop.key 如果迭代是对象,是当前循环的键,否则同 loop.index
loop.first 如果是第一个值返回 true
loop.last 如果是最后一个值返回 true

4. 注释

1
<!-- <h1></h1> -->

5. 引入 js 文件

1
{{ js('js/search') }}

6. 模板继承

layout.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}My Site{% endblock %}</title>
{% block head %}
<link rel="stylesheet" href="main.css">
{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>

index.html

1
2
3
4
5
6
7
8
9
{% extends 'layout.html' %}
{% block title %}My Page{% endblock %}
{% block head %}
{% parent %}
<link rel="stylesheet" href="custom.css">
{% endblock %}
{% block content %}
<p>This is just an awesome page.</p>
{% endblock %}

最终 index.html 也应用了 layout.html 的布局,只是将 block 定义的变量替换了而已。

7. 变量过滤器

类似 linux 中的管道。

用法:

1
<h1>{{ name|title }}</h1>

内置过滤器:

过滤器 说明
add(value) 使变量与value相加,可以转换为数值字符串会自动转换为数值。
addslashes 用 \ 转义字符串
capitalize 大写首字母
title 大写首字母
date(format[, tzOffset]) 转换日期为指定格式
default(value) 默认值(如果变量为 undefined,null,false 设置的值)
first 返回数组第一个值
last 返回数组最后一个值
reverse 翻转数组
uniq 数组去重
join(glue) 同 [].join
json_encode([indent]) 类似JSON.stringify, indent为缩进空格数
length 返回变量的length,如果是object,返回key的数量
lower 同’’.toLowerCase()
upper 同’’.toUpperCase
replace(search, replace[, flags]) 同’’.replace
striptags 去除html/xml标签
raw 指定输入不会被转义

想要不转义 html,让 html 以字符串的形式展示在页面上,使用内置过滤器 raw 即可。

首页
友链
归档
dkvirus
动态
RSS