文件

§Scala 範本常見使用案例

範本是簡單函數，可以依您想要的方式組合。以下是部分常見情境的範例。

§版面

讓我們宣告一個 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="sidebar">@sidebar</section>
    <section class="content">@content</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 ...

}

接下來：自訂格式

在這個文件中發現錯誤？此頁面的原始碼可以在 這裡 找到。在閱讀 文件指南 後，請隨時貢獻一個 pull request。有問題或建議要分享？前往 我們的社群論壇 與社群展開對話。