Play 2.0 中文资料 - 模板引擎(用例)

calendar Oct 25, 2012   ---   · 2 min read · 翻译 Scala PlayFramework  ·
Share on: linkedin copy


模板, 实际作为简单函数存在的, 它可以任何你希望的方式被组合应用. 下面是一些通用场景的使用案例.

布局

我们来声明一个 views/main.scala.html 模板来用作主布局模板:
 1@(title: String)(content: Html)
 2<!DOCTYPE html>
 3<html>
 4  <head>
 5    <title>@title</title>
 6  </head>
 7  <body>
 8    <section class="content">@content</section>
 9  </body>
10</html>

正如你所看到的, 这个模板有两个参数: 一个标题和一个 HTML 内容块. 现在我们可在另一个模板 views/Application/index.scala.html 中用它:
1@main(title = "Home") {
2  <h1>Home page</h1>
3}
注: 我们有时候使用命名参数(像 @main(title = "Home"), 而不是像 @main("Home") 那样来使用. 这由你而定, 只要选择在特定上下文中你认为表达清晰的即可.
有时你需要第二个页面特定的内容块作为侧边栏(sidebar) 或面包屑导航(breadcrumb trail). 你可以附加一个参数来做到:
 1@(title: String)(sidebar: Html)(content: Html)
 2<!DOCTYPE html>
 3<html>
 4  <head>
 5    <title>@title</title>
 6  </head>
 7  <body>
 8    <section class="sidebar">@sidebar</section>
 9    <section class="content">@content</section>
10  </body>
11</html>

在我们的 ‘index’ 模板中应用它, 是这样:
1@main("Home") {
2  <h1>Sidebar</h1>
3} {
4  <h1>Home page</h1>
5}

另一种做法是, 我们能单独声明 sidebar 块:
1@sidebar = {
2  <h1>Sidebar</h1>
3}
4
5@main("Home")(sidebar) {
6  <h1>Home page</h1>
7}

标签 (它们就是函数, 对吗?)

我们来写一个用来显示 HTML 通知的简单的标签 views/tags/notice.scala.html:
 1@(level: String = "error")(body: (String) => Html)
 2
 3@level match {
 4
 5  case "success" => {
 6    <p class="success">
 7      @body("green")
 8    </p>
 9  }
10
11  case "warning" => {
12    <p class="warning">
13      @body("orange")
14    </p>
15  }
16
17  case "error" => {
18    <p class="error">
19      @body("red")
20    </p>
21  }
22
23}

Unmi 注: body 是一个 （String)=> Html 类型的函数参数, Level 的默认值为  "error"

然后现在从另一个模板中使用它:
1@import tags._
2
3@notice("error") { color =>
4  Oops, something is <span style="color:@color">wrong</span>
5}

包含

再一次(Unmi 注: 像标签那样就是个函数), 这儿也没什么特殊的. 你可以调用其他任何你喜欢的模板 (实际上任何的函数是有其来源的):
1<h1>Home</h1>
2
3<div id="side">
4  @common.sideBar()
5</div>

moreScripts 和 moreStyles 等价物

欲在 Scala 模板中定义一个等价于老式的 moreScripts 或 moreStyles 变量 (像在 Play! 1.x 中的那样), 你可像下面那样在主模板中定义一个变量 :
 1@(title: String, scripts: Html = Html(""))(content: Html)
 2
 3<!DOCTYPE html>
 4
 5<html>
 6    <head>
 7        <title>@title</title>
 8        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
 9        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
10        <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
11        @scripts
12    </head>
13    <body>
14        <div class="navbar navbar-fixed-top">
15            <div class="navbar-inner">
16                <div class="container">
17                    <a class="brand" href="#">Movies</a>
18                </div>
19            </div>
20        </div>
21        <div class="container">
22            @content
23        </div>
24    </body>
25</html>

Unmi 注: 在 Play！ 1.x 中像下面那样写就能引入相应目录下的 js 或  css 文件：
1#{script 'jquery.js'/}
2#{stylesheet 'main.css'/}

上面标签会各自用 <script> 和 <link> 去引入 /public/javascrips/jquery.js 和  /public/stylesheets/main.css 文件。

然后在继承模板中就需要一个额外的脚本参数 :
1@scripts = {
2    <script type="text/javascript">alert("hello !");</script>
3}
4
5@main("Title",scripts){
6   Html content here ...
7}

如果是在继承模板中不需要额外的脚本参数(Unmi 注: 因为声明 main 时，scripts 参数是带默认值的 Html("")), 就这样 :
1@main("Title"){
2   Html content here ...
3}
永久链接 https://yanbin.blog/play2-0-tutorials-cn-template-engine-common-use-cases/, 来自 隔叶黄莺 Yanbin's Blog
[版权声明] 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。