文档

§常见模板用例

模板作为简单的函数，可以以任何您想要的方式组合。以下是几种常见场景的示例。

§布局

让我们声明一个 views/main.scala.html 模板，它将充当主布局模板

@(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 模板中使用它

@main(title = "Home") {

  <h1>Home page</h1>

}

注意：您可以使用命名参数（如 @main(title = "Home")）和位置参数（如 @main("Home")）。选择在特定上下文中更清晰的选项。

有时您需要第二个页面特定的内容块，例如用于侧边栏或面包屑导航。您可以使用额外的参数来实现这一点

@(title: String)(sidebar: Html)(content: Html)
<!DOCTYPE html>
<html>
  <head>
    <title>@title</title>
  </head>
  <body>
    <section class="content">@content</section>
    <section class="sidebar">@sidebar</section>
  </body>
</html>

从我们的“index”模板中使用它，我们有

@main("Home") {
  <h1>Sidebar</h1>

} {
  <h1>Home page</h1>

}

或者，我们可以单独声明侧边栏块

@sidebar = {
  <h1>Sidebar</h1>
}

@main("Home")(sidebar) {
  <h1>Home page</h1>

}

§标签（它们只是函数，对吧？）

让我们编写一个简单的 views/tags/notice.scala.html 标签，它显示一个 HTML 通知

@(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>
  }

}

现在让我们从另一个模板中使用它

@import tags._

@notice("error") { color =>
  Oops, something is <span style="color:@color">wrong</span>
}

§包含

同样，这里没有什么特别之处。您可以调用您喜欢的任何其他模板（或者实际上是任何其他函数，无论它在哪里定义）

<h1>Home</h1>

<div id="side">
  @common.sideBar()
</div>

§moreScripts 和 moreStyles 等效项

要在 Scala 模板上定义旧的 moreScripts 或 moreStyles 变量等效项（如 Play! 1.x），您可以在主模板中定义一个变量，如下所示

@(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>

在需要额外脚本的扩展模板上

@scripts = {
    <script type="text/javascript">alert("hello !");</script>
}

@main("Title",scripts){

   Html content here ...

}

在不需要额外脚本的扩展模板上，就像这样

@main("Title"){

   Html content here ...

}

下一步：自定义格式

发现文档中的错误？此页面的源代码可以在这里找到。阅读文档指南后，请随时贡献拉取请求。有疑问或建议要分享？前往我们的社区论坛与社区交流。