There are so many common elements in the aforementioned UI sketches, it makes sense to use a common layout to avoid code duplication and enable centralized code in all the pages. The following common/standardPage.ftl template file is used for this purpose:
<#macro page title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="Blog Management System">
<meta name="author" content="Shazin Sadakath">
<title>${title}</title>
<link rel="stylesheet" type="text/css"
href="/webjars/bootstrap/4.0.0/css/bootstrap.min.css"/>
<!-- Custom styles for this template -->
<link href="/css/blog-post.css" rel="stylesheet">
<script src="/webjars/jquery/3.3.1-1/jquery.min.js"></script>
</head>
The preceding head section imports Bootstrap, Blog CSS, and the JQuery JavaScript library. Going ahead, we see the following code:
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/article">Blog Management
System</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/article">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/article/new">Write Article
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<#if user??>
<a class="nav-link" href="#">Welcome, ${user.username}
</a>
<#else>
<a class="nav-link" href="/login">Login</a>
</#if>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
Then, inside the body section, the preceding code is responsible for rendering the header and menu at the top of the page:
<!-- Page Content -->
<div class="container">
<div class="row">
<#nested>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<form action="/article">
<div class="input-group">
<input type="text" name="q" class="form-control"
placeholder="Search for...">
<span class="input-group-btn">
<input type="submit" class="btn btn-secondary"
value="Go!"/>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
Furthermore, for dynamic content, there is a notable Apache FreeMarker tag, which is the following. We wire content here using @p.page:
<#nested>
Dynamic content specific to a web page will be rendered inside this part of the template:
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Shazin
Sadakath 2018</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="/webjars/bootstrap/4.0.0/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
</#macro>
Finally, the template has the footer section, which is common to all pages, and also imports any JavaScript libraries that need to be loaded lazily.
Some noticeable things in the preceding template are that it begins and ends with the following macro tag:
<#macro page title>
All of the common JavaScript, CSS, and HTML will go inside this tag.