@H_
502_2@模版引擎,对现在的 Web 开发极为重要,几乎所有主流 Web 框架都会
支持一种或多种模版引擎,模版引擎可以分离
用户界面和业务逻辑,工作原理主要是一种翻译,后端对特定的
标记、语法、变量等渲染后再输送给浏览器,如今模版引擎已经非常强大,在相关领域可以帮助开发者节约很多时间精力,比如缓存、设计分层、
插件化。不同的模版引擎千变万化,各种语言也是层出不穷,比如
PHP 模版引擎中的老大哥
Smarty,Python 的
Jinja2,也是 Flask 中内置的模版引擎,如今前端也有新生模版引擎,依赖前端的
性能提升,像后端一样处理模版语言渲染数据。
@H_
502_2@Leaf 作为 Vapor 官方提供的组件之一原生集成在 Vapor 中,Leaf 模版
文件以
.leaf
结尾,模版语法夹杂在 HTML 之间,我们可以直接使用而不需要引入其他外部依赖。
渲染
@H_
502_2@我们可以在路由中进行模版的渲染,同时附带给模版传参数,参数以 Dict 的形式放在第二个位置,然后在
.leaf
模版
文件中就能拿到对应的数据。
drop.get { req in return try drop.view.make("index.leaf",['greeting': "Hello world!"]) }
@H_
502_2@Leaf 使用
#
作为模版语法的
标记,笔者也很苦恼为啥 Vapor 的作者要用井号做语法
标记,在 Github 也有人提出
#
会与
HTML/CSS
有冲突(
issue #11)。
@H_
502_2@我们可以用
#()
来
输出 HTML, 这里需要注意的是这样
输出 Leaf 会对其中的 HTML 进行转义,举个例子,如下
代码输出到浏览器,HTML 源
代码真是
内容其实是:
hello
,并没有被 A
标签包起来。
#(<a>hello</a>)
@H_
502_2@如果想
输出原始 HTML 怎么办呢?我们可以用
raw() {}
来
输出不会被转移的 HTML,也就是说到浏览器会被解析成对应的 HTML
代码,如下会在浏览器
输出:
<a>hello</a>
。
#raw() { <a>hello</a> }
@H_502_2@需要注意的是不要让用户输入内容用 #raw(){ }
进行原始输出,比如评论,以免造成恶意代码执行的漏洞!
变量
#(variable)
比较
#equal(leaf,leaf)
判断
@H_
502_2@下面这段
代码逻辑就是
if:elif:else
Hello,there!
}
Goodbye!
}
I've been here the whole time.
}
循环
#loop(users,) {
Hello,#(user.name)! </br >
}
@H_
502_2@基本循环用
#loop
,第一个参数传入数组,第二个参数写出循环内部的实例变量名,假设我的
users
内容是 [“Objective-C”、”Swift”、”Vapor”],
输出内容在浏览器看起来就会是这个样子:
@H_502_2@Hello,Objective-C!
@H_502_2@Hello,Swift!
@H_502_2@Hello,Vapor!
模块化
@H_
502_2@我们构建一些多
页面 Web 程序,常常会有每个
页面或者一种
页面部分相似的
内容,比如网站的头部、脚部,头部一般用来放导航栏,脚部放一些版权声明、三方
链接等等,那么在整个网站任何
页面中这两部分的
内容基本都是一致的,那么我们可以把这两部分的
内容抽出一个单独的
.leaf
文件存放,并在需要的地方引入进来就可以了。
@H_
502_2@Leaf 提供了四个
方法来引入/包含其他模版:
- Import:
#import("template")
- Export:
#export("template") { Leaf/HTML }
- Extend:
#extend("template")
- Embed:
#embed("template")
@H_502_2@这四个标签都不需要补全 .leaf
后缀,Leaf 会自动查找对应文件。
@H_
502_2@
#import()
用来声明一个插入点在当前模版。
@H_
502_2@
#extend()
用来继承一个模版,使用模版的
内容,然后就
只能用
#export()
填充之前声明的插入点。
@H_
502_2@
#embed("body")
才是用来引入一个模版的
内容到当前位置。
@H_
502_2@举个栗子:
/// base.leaf
<html>#import("html-content")</html>
/// index.leaf
#extend("base")
#export("html-content") {
Hello
}
@H_
502_2@渲染
index.leaf
的
内容如下:
<html>Hello</html>
,
index.leaf
页继承了
base.leaf
的
内容, 并把
Hello
这个字符串被插入到了
<html>
标记中间。注意之前的描述,继承之后
只能使用
#export()
填充,也就是在
index.leaf
文件中其他地方任何
内容将不会被渲染。
@H_
502_2@然后是
#embed()
的
用法,可以直接引入另一个
文件:
/// html-content.leaf
Hello
/// index.leaf
<html>#embed("html-content")</html>
@H_
502_2@上面
代码渲染
index.leaf
后的结果和之前是一样的。
@H_
502_2@有时候官方提供的
标签功能不够我们使用,当然 Leaf 给我们留出了
自定义的空间,我们可以声明自己的
标签然后在
.leaf
模版种使用,就像
#equal()
、
#import()
一样。
@H_
502_2@我们可以通过声明一个类来
自定义一种
标签,借用一下官方的例子,定义在
Leaf/Tag/Models/Index.swift:,该
代码定义了一个
方法用来
获取数组中指定下标的一个元素:
class Index: BasicTag {
let name = "index1"
func run(arguments: [Argument]) throws -> Node? {
guard
arguments.count == 2,let array = arguments[0].value?.nodeArray,let index = arguments[1].value?.int,index < array.count
else { return nil }
return array[index]
}
}
@H_
502_2@然后再向
droplet
注册它:
if let leaf = drop.view as? LeafRenderer {
leaf.stem.register(Index())
}
@H_
502_2@有了
自定义标签的
功能,我们可以丰富很多自己的
功能逻辑,甚至定义一个
快速解析 Markdown 的
标签,用起来会相当方便。
语法高亮
@H_
502_2@根据 Vapor 官方
提示,VSCode 和 Atom 有对应的语法高亮
插件,如有需要可以试试。
结语
@H_502_2@另外如果你喜欢类似于 Django 和 Mustache 式的语法,可以看看 Stencil,也是一个纯 Swift 写的模版引擎。
@H_
502_2@这是 [Swift Web 开发之 Vapor] 系列的第三篇,说了说 Vapor 中
自带的 Leaf 模版引擎,按照笔者目前的使用情况来看其实 Leaf 还不太成熟,虽然还有太多需要优化改进的地方,不过我相信之后一定会越来越好的。所以不要害怕,赶紧来写 Swift Server Side 吧!
@H_
502_2@之前开的坑在写一个
博客程序
NSPress,如果大家有兴趣欢迎讨论。
原文链接:https://www.f2er.com/swift/322057.html