6

Swift Web 开发之 Vapor - 模版 Leaf（三）

 3 years ago
source link: https://www.isaced.com/post-284.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Swift Web 开发之 Vapor - 模版 Leaf（三）

1240

模版引擎，对现在的 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> }

需要注意的是不要让用户输入内容用 #raw(){ } 进行原始输出，比如评论，以免造成恶意代码执行的漏洞！

#(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")
  • Embed: #embed("template")

这四个标签都不需要补全 .leaf 后缀，Leaf 会自动查找对应文件。

#import() 用来声明一个插入点在当前模版。

#extend() 用来继承一个模版，使用模版的内容，然后就只能用 #export() 填充之前声明的插入点。

#embed("body") 才是用来引入一个模版的内容到当前位置。

举个栗子：

/// base.leaf
<html>#import("html-content")</html>

/// index.leaf
#extend("base")
#export("html-content") {
    Hello
}

渲染 index.leaf 的内容如下： <html>Hello</html>，index.leaf 页继承了 base.leaf 的内容， 并把 Hello 这个字符串被插入到了 <html> 标记中间。注意之前的描述，继承之后只能使用 #export() 填充，也就是在 index.leaf 文件中其他地方任何内容将不会被渲染。

然后是 #embed() 的用法，可以直接引入另一个文件：

/// html-content.leaf
Hello

/// index.leaf
<html>#embed("html-content")</html>

上面代码渲染 index.leaf 后的结果和之前是一样的。

自定义标签

有时候官方提供的标签功能不够我们使用，当然 Leaf 给我们留出了自定义的空间，我们可以声明自己的标签然后在 .leaf 模版种使用，就像 #equal()、#import() 一样。

我们可以通过声明一个类来自定义一种标签，借用一下官方的例子，定义在 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]
    }
}

然后再向 droplet 注册它：

if let leaf = drop.view as? LeafRenderer {
    leaf.stem.register(Index())
}

有了自定义标签的功能，我们可以丰富很多自己的功能逻辑，甚至定义一个快速解析 Markdown 的标签，用起来会相当方便。

根据 Vapor 官方提示，VSCode 和 Atom 有对应的语法高亮插件，如有需要可以试试。

  • Visual Studio Code - html-leaf
  • Atom - language-leaf
  • Xcode - 目前没有很好支持的插件，不过可以设置 Xcode 编辑器语法高亮为 HTML，稍会有改善

另外如果你喜欢类似于 Django 和 Mustache 式的语法，可以看看 Stencil，也是一个纯 Swift 写的模版引擎。

这是 [Swift Web 开发之 Vapor] 系列的第三篇，说了说 Vapor 中自带的 Leaf 模版引擎，按照笔者目前的使用情况来看其实 Leaf 还不太成熟，虽然还有太多需要优化改进的地方，不过我相信之后一定会越来越好的。所以不要害怕，赶紧来写 Swift Server Side 吧！

之前开的坑在用 Vapor 写一个博客程序 NSPress，如果大家有兴趣欢迎讨论。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK