- Spring 5.0 Projects
- Nilang Patel
- 217字
- 2021-07-02 12:34:59
Creating the base template
We mentioned before that we will be using the Thymeleaf Layout Dialect to create a base template and use the base template to decorate all other templates. The base template will contain all the CSS links, JavaScript source file links, the header, and the footer, as shown in the following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">World In Numbers</title>
<meta name="description" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Include all the CSS links -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">WORLD IN NUMBERS</a>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" th:href="@{/countries}">Countries</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="content">
<div layout:fragment="page_content">
<!-- Placeholder for content -->
</div>
</div>
</div>
<div class="modal" id="worldModal" >
</div>
<footer id="footer"></footer>
<!-- /.container -->
<!-- Include all the Javascript source files -->
<th:block layout:fragment="scripts">
<!-- Placeholder for page related javascript -->
</th:block>
</body>
</html>
The two main important parts of the following template are as follows:
- <div layout:fragment="page_content"></div>: The other templates that use the base template as decorator provide their HTML within this section. Thymeleaf Layout Dialect at runtime decorates this HTML with the content from the base template.
- <th:block layout:fragment="scripts"></th:block>: Similar to the HTML previous content, any page-specific JavaScript or links to any specific JavaScript source files can be added within this section. This helps in isolating page-specific JavaScript in their own pages.
Any template that wants to use the base template as the decorator will declare this attribute, layout:decorate="~{base}", in the <html> tag. We will not go into the content of individual templates as it's mostly HTML. All the templates can be found at the location worldgdp/src/main/resources/templates. We have three templates:
- countries.html: This is for showing the countries' list with filtering and pagination
- country-form.html: This is for editing a country's detail
- country.html: This is for showing a country's detail