模版引擎,对现在的 Web 开发极为重要,几乎所有主流 Web 框架都会支持一种或多种模版引擎,模版引擎可以分离用户界面和业务逻辑,工作原理主要是一种翻译,后端对特定的标记、语法、变量等渲染后再输送给浏览器,如今模版引擎已经非常强大,在相关领域可以帮助开发者节约很多时间精力,比如缓存、设计分层、插件化。不同的模版引擎千变万化,各种语言也是层出不穷,比如 PHP 模版引擎中的老大哥 Smarty,Python 的 Jinja2,也是 Flask 中内置的模版引擎,如今前端也有新生模版引擎,依赖前端的性能提升,像后端一样处理模版语言渲染数据。
Leaf 作为 Vapor 官方提供的组件之一原生集成在 Vapor 中,Leaf 模版文件以 .leaf
结尾,模版语法夹杂在 HTML 之间,我们可以直接使用而不需要引入其他外部依赖。
渲染
我们可以在路由中进行模版的渲染,同时附带给模版传参数,参数以 Dict 的形式放在第二个位置,然后在 .leaf
模版文件中就能拿到对应的数据。
drop.get { req in return try drop.view.make("index.leaf",['greeting': "Hello World!"]) }
标记 (#)
Leaf 使用 #
作为模版语法的标记,笔者也很苦恼为啥 Vapor 的作者要用井号做语法标记,在 Github 也有人提出 #
会与 HTML/CSS
有冲突(issue #11)。
我们可以用 #()
来输出 HTML, 这里需要注意的是这样输出 Leaf 会对其中的 HTML 进行转义,举个例子,如下代码输出到浏览器,HTML 源代码真是内容其实是:hello
,并没有被 A 标签包起来。
#(<a>hello</a>)
如果想输出原始 HTML 怎么办呢?我们可以用 raw() {}
来输出不会被转移的 HTML,也就是说到浏览器会被解析成对应的 HTML 代码,如下会在浏览器输出:<a>hello</a>
。
#raw() { <a>hello</a> }
变量
#(variable)
比较
#equal(leaf,leaf)
判断
下面这段代码逻辑就是 if:elif:else
#if(entering) { Hello,there! } ##if(leaving) { Goodbye! } ##else() { I've been here the whole time. }
循环
#loop(users,"user") { Hello,#(user.name)! </br > }
基本循环用 #loop
,第一个参数传入数组,第二个参数写出循环内部的实例变量名,假设我的 users
内容是 ["Objective-C"、"Swift"、"Vapor"],输出内容在浏览器看起来就会是这个样子:
Hello,Objective-C!
Hello,Swift!
Hello,Vapor!
模块化
我们构建一些多页面 Web 程序,常常会有每个页面或者一种页面部分相似的内容,比如网站的头部、脚部,头部一般用来放导航栏,脚部放一些版权声明、三方链接等等,那么在整个网站任何页面中这两部分的内容基本都是一致的,那么我们可以把这两部分的内容抽出一个单独的 .leaf
文件存放,并在需要的地方引入进来就可以了。
Leaf 提供了四个方法来引入/包含其他模版:
Import:
#import("template")
Export:
#export("template") { Leaf/HTML }
Extend:
#extend("template")
#import()
用来声明一个插入点在当前模版。
#extend()
用来继承一个模版,使用模版的内容,然后就只能用 #export()
填充之前声明的插入点。
#embed("body")
才是用来引入一个模版的内容到当前位置。
举个栗子
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。