11# Template partials
22
3- <Vimeo id =" 936176254 " />
4-
53## The problem
64
75Many pages in a website might share the same content. For example, our views
86might look like this (the repeated content has been highlighted):
97
108::: code-group
119
12- ``` html{1-9,12-13} [index.ejs]
10+ ``` html{1-9,12-13} [index.jte]
11+ @import bleeter.models.Page
12+ @param Page page
13+
1314<!DOCTYPE html>
1415<html lang="en">
1516 <head>
1617 <meta charset="UTF-8" />
1718 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18- <title>Bleeter | <%= title %> </title>
19+ <title>Bleeter | ${page. title} </title>
1920 </head>
2021
2122 <body>
@@ -25,43 +26,54 @@ might look like this (the repeated content has been highlighted):
2526</html>
2627```
2728
28- ``` html{1-9,20-21} [bleets.ejs]
29+ ``` html{1-9,20-21} [bleets.jte]
30+ @import java.util.List
31+ @import bleeter.models.Page
32+ @import bleeter.models.Bleet
33+ @param Page page
34+ @param List<Bleet> bleets
35+
2936<!DOCTYPE html>
3037<html lang="en">
3138 <head>
3239 <meta charset="UTF-8" />
3340 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
34- <title>Bleeter | <%= title %> </title>
41+ <title>Bleeter | ${page. title} </title>
3542 </head>
3643
3744 <body>
3845 <h1>Bleets</h1>
3946 <ol>
40- <% for (let bleet of bleets) { %>
47+ @ for(var bleet : bleets)
4148 <!-- use bleet -->
4249 <li>
43- <%= bleet.content.slice (0, 10) + ' ...' %>
44- <a href="<%= ` /bleets/${bleet.id}` %> ">Read more</a>
50+ ${ bleet.content.substring (0, 10)} ...
51+ <a href="/bleets/${bleet.id}">Read more</a>
4552 </li>
46- <% } %>
53+ @endfor
4754 </ol>
4855 </body>
4956</html>
5057```
5158
52- ``` html{1-9,13-14} [bleet.ejs]
59+ ``` html{1-9,13-14} [bleet.jte]
60+ @import bleeter.models.Page
61+ @import bleeter.models.Bleet
62+ @param Page page
63+ @param Bleet bleet
64+
5365<!DOCTYPE html>
5466<html lang="en">
5567 <head>
5668 <meta charset="UTF-8" />
5769 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
58- <title>Bleeter | <%= title %> </title>
70+ <title>Bleeter | ${page. title} </title>
5971 </head>
6072
6173 <body>
6274 <h1>A bleet</h1>
63- <p><%= bleet.content %> </p>
64- <p><%= bleet.createdAt %> </p>
75+ <p>${ bleet.content} </p>
76+ <p>${ bleet.createdAt} </p>
6577 </body>
6678</html>
6779```
@@ -72,14 +84,14 @@ This is a problem, because if we need to make a change to the shared parts of
7284each view, we need to update each view individually, which is extra work and an
7385opportunity for mistakes.
7486
75- ## Creating partials
87+ ## Template calls
7688
7789We can create partial templates and use them in our views.
7890
7991The directory structure might look like this:
8092
8193``` txt
82- views /
94+ templates /
8395├── bleet.ejs
8496├── bleets.ejs
8597├── index.ejs
0 commit comments