§一般的なテンプレートのユースケース

テンプレートは単純な関数であるため、自由に組み合わせることができます。以下は、一般的なシナリオの例です。

§レイアウト

メインレイアウトテンプレートとして機能する`views/main.scala.html`テンプレートを宣言してみましょう。

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

ご覧のとおり、このテンプレートは2つのパラメータを取ります。タイトルとHTMLコンテンツブロックです。これを別の`views/Application/index.scala.html`テンプレートから使用できます。

@main(title = "Home") {

  <h1>Home page</h1>

}

**注:** `@main(title = "Home")`のような名前付きパラメータと、`@main("Home")`のような位置パラメータの両方を使用できます。具体的なコンテキストでより明確な方を選択してください。

サイドバーやパンくずリストなど、ページ固有の2つ目のコンテンツブロックが必要になる場合があります。追加パラメータを使用してこれを行うことができます。

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

}

§タグ（ただの関数ですよね？）

HTML通知を表示する簡単な`views/tags/notice.scala.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 ...

}

**次へ:** カスタムフォーマット

このドキュメントに誤りを見つけましたか？このページのソースコードはこちらにあります。ドキュメントガイドラインを読んだ後、プルリクエストを送信してください。質問やアドバイスがあれば、コミュニティフォーラムにアクセスして、コミュニティとの会話を始めてください。