DocPad: Paging Solutions

README.md

DocPad: Paging Solutions

• post.html.eco used for displaying prev and next page links on your current page (static site friendly)
• posts.html.eco used for displaying a content listing, that is split up onto multiple pages (requires dynamic site)
• paged plugin used for splitting a document into a different pages, very neat (static site friendly)

post.html.eco

<!-- Use for displaying prev and next page links on your current page -->

<!-- Get the next and previous document from the current document -->
<% for document,documentIndex in @getCollection('projects').toJSON(): %>
    
    <!-- Get the current document, from there, we will be able to get the next and previous -->
    <% if @document.id is document.id: %>

        <!-- We have the current document, do the next and previous buttons -->
        
        <!-- Check if we have a previous page -->
        <% if documentIndex >= 1: %>
            <a href="<%= @getCollection('projects').toJSON()[documentIndex-1].url %>" class="previous"><img src="/images/lft_arrow.png" alt="" /></a>
        <% end %>

        <!-- Check if we have a next page -->
        <% if documentIndex < @getCollection('projects').length - 1: %>
             <a href="<%= @getCollection('projects').toJSON()[documentIndex+1].url %>" class="next"><img src="/images/rt_arrow.png" alt="" /></a>
        <% end %>

    <% end %>
<% end %>

posts.html.eco

---
dynamic: true
---

<!-- Use for displaying a content listing, that is split up onto multiple pages -->

<!-- Get the next and previous page from the current page -->
<nav class="linklist">
	<% for document in @getCollection('posts').createChildCollection().setPaging({limit:2,page:parseInt(@req.query.page,10) or 1}).query().toJSON(): %>
		<li><span><%= document.date.toShortDateString() %></span>
		&raquo;
		<a href="<%= document.url %>"><%= document.title %></a></li>
	<% end %>

	<% if (@req.query.page or 1) > 1: %>
		<a href="?page=<%-(parseInt(@req.query.page,10) or 1)-1%>">prev</a>
	<% end %>

	<% if @getCollection('posts').createChildCollection().setPaging({limit:2,page:(parseInt(@req.query.page,10) or 1)+1}).query().length: %>
		<a href="?page=<%-(parseInt(@req.query.page,10) or 1)+1%>">next</a>
	<% end %>
</nav>

All the comments and whitespace within the for loop lead to a lot of junk in the render html... especially for large collections.

you can use html minifier plugin, htmlmin