Play! framework. template “include”
-
24-06-2021 - |
Domanda
I'm planning my website structure as following:
- header.scala.html
- XXX
- footer.scala.html
now, instead of "xxx" there should be a specific page (i.e. "UsersView.scala.html").
what I need is to include (like with well-known languages) the source of the footer and the
header into the the middle page's code.
so my questions are:
- How do you include a page in another with scala templating?
- Do you think it's a good paradigm for Play! framework based website?
Soluzione
A common pattern is to create a template that contains the boilerplate, and takes a parameter of type HTML. Let's say:
main.scala.html
@(content: HTML)
@header
// boilerplate
@content
// more boilerplate
@footer
In fact, you don't really need to separate out header and footer with this approach.
Your UsersView.scala.html then looks like this:
@main {
// all your users page html here.
}
You're wrapping the UsersView with main by passing it in as a parameter.
You can see examples of this in the samples
My usual main template is a little more involved and looks roughly like this:
@(title: String)(headInsert: Html = Html.empty)(content: Html)(implicit user: Option[User] = None)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@title</title>
// bootstrap stuff here
@headInsert
</head>
<body>
@menu(user)
<div id="mainContainer" class="container">
@content
</div>
</body>
</html>
This way a template can pass in a head insert and title, and make a user available, as well as content of course.
Altri suggerimenti
Just call another template like a method. If you want to include footer.scala.html:
@footer()
Play provide a very convenient way to help implement that!
Layout part from official docs:
First we have a base.html (that's we call in django -_-)
// views/main.scala.html
@(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>@title</title>
</head>
<body>
<section class="content">@content</section>
</body>
</html>
How to use the base.html?
@main(title = "Home") {
<h1>Home page</h1>
}
More information here