Let's have a look at the article/index.ftl page, which implements the List Articles page and makes use of the common template shown in the preceding section:

<#import "../common/standardPage.ftl" as p>

<@p.page title="Posts">
        <!-- Post Content Column -->
        <div class="col-lg-8">

          <#if message??>
          <div id="success-alert" class="alert alert-success">
            ${message}
          </div>
          <script type="text/javascript">
            $( document ).ready(function() {
                $("#success-alert").fadeTo(2000, 500).slideUp(500, 
                 function(){
                    $("#success-alert").slideUp(500);
                });
            });
          </script>
          </#if>          

The preceding section is responsible for showing any message to the user for up to two seconds. The message can be anything from information, to a warning, or an error. The code actually uses the JQuery slide up animation and fade effect. Now, consider the following code:

    <#if articles?? >
          <#list articles.content as article>
          <!-- Title -->
          <h1 class="mt-4"><a 
           href="/article/show/${article.link}">${article.title}</a>
          </h1>

          <!-- Author -->
          <p class="lead">
            by
            <#if article.author??>
                <a href="#">${article.author.username}</a>
            <#else>
                Anonymous
            </#if>
          </p>

          <hr>
          <!-- Date/Time -->
          <p>Posted on ${article.createdDate?string
          ('dd.MM.yyyy HH:mm:ss')}</p>

          <p>${article.summary}</p>
          

If there are articles to be shown, then the preceding code will loop through each of them and show the title of the Article that will be linked to that article's link. Also, it will show the name of the author of the Article, the Article that was created, and also a summary of the Article:

          <#if article.author?? && user??>
            <#if article.author.username == user.username || user.role?
             contains("ADMIN")>
              <form id="form_delete_${article.id}" method="post" 
               action="/article/delete/${article.id}"></form>
              <p><a class="btn btn-success" 
              href="/article/edit/${article.id}">Edit</a>
            <a href="#" class="btn btn-danger" 
            onclick="$('#form_delete_${article.id}').submit();">Delete
            </a></p>
             </#if>
          </#if>

          <hr>
          </#list>   

These objects, ??, these objects are the ones that are sent in the Model object. If there is a user logged-in, the preceding logic will check whether the logged in user is actually the author of Article or an administrator. In both of those cases, only then will it show the Edit and Delete buttons.

Finally, the previous code generates the pagination for the list of articles available in the List Articles page. Consider the following code:

    <nav aria-label="Page navigation example">
         <ul class="pagination">
           <#if articles.hasPrevious()>
             <li class="page-item"><a class="page-link" 
             href="/article?      
              page=${articles.previousPageable().pageNumber}&size=20">
               Previous</a></li>
              </#if>
              <#list 1..articles.totalPages as i>
                <li class="page-item"><a class="page-link" 
                 href="/article?page=${i-1}&size=20">${i}</a></li>
              </#list>
              <#if articles.hasNext()>
                <li class="page-item"><a class="page-link" 
                 href="/article?
             page=${articles.nextPageable().pageNumber}&size=20">
             Next</a></li>
              </#if>
            </ul>
          </nav>
          </#if>

        </div>
</@p.page>

The common template is imported using the following Apache FreeMarker tag:

<#import "../common/standardPage.ftl" as p>

This tag imports the common/standardPage.ftl as the variable p, and dynamic content for the page is specified inside the tags p.page as follows:

<@p.page title="Posts">

The content within the preceding tags will be replaced with the <#nested> tag available in the common template, and the value specified in title will replace ${title} in the common template.