Skip to content

Instantly share code, notes, and snippets.

@balupton
Last active January 21, 2017 00:40
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save balupton/3695876 to your computer and use it in GitHub Desktop.
Save balupton/3695876 to your computer and use it in GitHub Desktop.
DocPad: Paging Solutions

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)
<!-- 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 %>
---
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>
Copy link

ghost commented Apr 14, 2013

Looks like the paged plugin link is broken.

Copy link

ghost commented Apr 14, 2013

New link to the paged plugin

@fizzvr
Copy link

fizzvr commented Apr 15, 2013

thxs @brickcap

@hyperking
Copy link

When I paste the post.html.eco snippet into my post.html.eco template. I recieve this error:
TypeError: Cannot call method 'toJSON' of undefined

Is there something im missing?

@Hypercubed
Copy link

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

@cipto-hd
Copy link

you can use html minifier plugin, htmlmin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment