- 模板引擎
模板, 实际作为简单函数存在的, 它可以任何你希望的方式被组合应用. 下面是一些通用场景的使用案例.
布局
我们来声明一个 views/main.scala.html 模板来用作主布局模板:
|
1 2 3 4 5 6 7 8 9 10 |
@(title: String)(content: Html) <!DOCTYPE html> <html> <head> <title>@title</title> </head> <body> <section class="content">@content</section> </body> </html> |
正如你所看到的, 这个模板有两个参数: 一个标题和一个 HTML 内容块. 现在我们可在另一个模板 views/Application/index.scala.html 中用它:
|
1 2 3 4 5 |
@main(title = "Home") { <h1>Home page</h1> } |
注: 我们有时候使用命名参数(像
@main(title = "Home"), 而不是像@main("Home") 那样来使用. 这由你而定, 只要选择在特定上下文中你认为表达清晰的即可.
有时你需要第二个页面特定的内容块作为侧边栏(sidebar) 或面包屑导航(breadcrumb trail). 你可以附加一个参数来做到:
|
1 2 3 4 5 6 7 8 9 10 11 |
@(title: String)(sidebar: Html)(content: Html) <!DOCTYPE html> <html> <head> <title>@title</title> </head> <body> <section class="sidebar">@sidebar</section> <section class="content">@content</section> </body> </html> |
在我们的 ‘index’ 模板中应用它, 是这样:
|
1 2 3 4 5 6 7 |
@main("Home") { <h1>Sidebar</h1> } { <h1>Home page</h1> } |
另一种做法是, 我们能单独声明 sidebar 块:
|
1 2 3 4 5 6 7 8 |
@sidebar = { <h1>Sidebar</h1> } @main("Home")(sidebar) { <h1>Home page</h1> } |
标签 (它们就是函数, 对吗?)
我们来写一个用来显示 HTML 通知的简单的标签 views/tags/notice.scala.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@(level: String = "error")(body: (String) => Html) @level match { case "success" => { <p class="success"> @body("green") </p> } case "warning" => { <p class="warning"> @body("orange") </p> } case "error" => { <p class="error"> @body("red") </p> } } |
Unmi 注: body 是一个 （String)=> Html 类型的函数参数, Level 的默认值为 "error"
然后现在从另一个模板中使用它:
|
1 2 3 4 5 |
@import tags._ @notice("error") { color => Oops, something is <span style="color:@color">wrong</span> } |
包含
再一次(Unmi 注: 像标签那样就是个函数), 这儿也没什么特殊的. 你可以调用其他任何你喜欢的模板 (实际上任何的函数是有其来源的):
|
1 2 3 4 5 |
<h1>Home</h1> <div id="side"> @common.sideBar() </div> |
moreScripts 和 moreStyles 等价物
欲在 Scala 模板中定义一个等价于老式的 moreScripts 或 moreStyles 变量 (像在 Play! 1.x 中的那样), 你可像下面那样在主模板中定义一个变量 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@(title: String, scripts: Html = Html(""))(content: Html) <!DOCTYPE html> <html> <head> <title>@title</title> <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")"> <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")"> <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script> @scripts </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Movies</a> </div> </div> </div> <div class="container"> @content </div> </body> </html> |
Unmi 注: 在 Play！ 1.x 中像下面那样写就能引入相应目录下的 js 或 css 文件：
|
1 2 |
#{script 'jquery.js'/} #{stylesheet 'main.css'/} |
上面标签会各自用 <script> 和 <link> 去引入 /public/javascrips/jquery.js 和 /public/stylesheets/main.css 文件。
然后在继承模板中就需要一个额外的脚本参数 :
|
1 2 3 4 5 6 7 8 9 |
@scripts = { <script type="text/javascript">alert("hello !");</script> } @main("Title",scripts){ Html content here ... } |
如果是在继承模板中不需要额外的脚本参数(Unmi 注: 因为声明 main 时，scripts 参数是带默认值的 Html("")), 就这样 :
|
1 2 3 4 5 |
@main("Title"){ Html content here ... } |
