Let's continue adding some more components to our templates by learning how to use the Pagination component. For our blog project, we want to use the Pager version of the component. Open up index.ejs and insert the following code after the last Card component in our blog feed:
<nav>
<ul class="pager m-t-3">
<li class="pager-prev"><a href="#">Older Posts</a></li>
<li class="pager-next disabled"><a href="#">Newer Posts</a></li>
</ul>
</nav>
The Pager is wrapped in an HTML5 <nav> tag and uses an unordered list as its base:
The
<ul>tag should have a class of.pageradded to it.The first list item in the group should have a class of
.pager-prevon it.The second list item should have a class of
.pager-nexton it. In this case, I've also added the class.disabledwhich means there are no more posts to go to.
After you've added this code...