Year/month/post hierarchy on Vosao blog

Aizkolaring the Vosao blog

Blogging is one of the main activities I'm doing with Vosao. If this is your case too, you better start organizing your posts under months and years or you may end up with a bunch of pages hanging from the Blog page. A hierarchy of years and months can be achieved with no effort, just creating a new page for each year inside the Blog and a new page for each month inside every year is enough.

All right, not so easy, it's also necessary to update the code inside those pages. The default Velocity code for the Blog page will try to show up the years pages as the blog articles, without diving into the tree structure and getting to its leaves, where the actual posts are found. Here, I will publish the code I have used to solve this issue. Moreover, the solution provided will allow your visitors to access to the posts filtering by year or month just removing part of the URL. Let's see how...

Environment

Required software that has already been installed and configured.

Installation steps

Step 1 - Creating the tree structure

The default installation of Vosao have one page called Blog. Inside this page we must create a new page for each year, by now a page called 2011 will be enough. Inside the 2011 page we must create a new page for each month. Right now, pages 01, 02...06 will fit our requirements.

The proposed hierarchical structure of the BlogHierarchycal structure of the Blog.

Blog, years and months pages have the following Page characteristics: Velocity processing enabled and Page type "Simple", nothing else.

Step 2 - Adding the Velocity Template Language snippets

There are three different code snippets: one for the Blog Page, another for the Year pages, and one more for the Month pages. The differences between them are mostly related with the deep of the algorithm.

The Blog page

The Blog page has already checked the Velocity processing option, but we must change the code inside it. It must read the posts inside the new tree structure (Blog/Year/Month/Post). This is the code inside the Blog page:

## Posts number on page
#set ($numPost = 5)
#set ($curPost = 0)
#set ($pageParam = $request.getParameter("page"))
#if ($pageParam)
   #set($pageNum = $math.toInteger($pageParam))
#else
   #set ($pageNum = 0)
#end
#set ($iniPost = $pageNum * $numPost)
#set ($endPost = $iniPost + $numPost)
#set ($years = ${service.findPageChildren($page.friendlyURL)})
#foreach ($y in $years)
   #set ($months = ${service.findPageChildren($y.friendlyURL)})
   #foreach ($m in $months )
  	#set ($posts = ${service.findPageChildren($m.friendlyURL)})
  	#foreach ($p in $posts)
     	#set ($curPost=$curPost +1)
     	#if ($curPost > $endPost)
        	#break
     	#end
     	#if ($curPost > $iniPost)
        	${service.renderStructureContent($p.friendlyURL,"article-overview")}
     	#end
  	#end
  	#if ($curPost > $endPost)
     	#break
  	#end
   #end
   #if ($curPost > $endPost)
  	#break
   #end
#end
#set ($nextPage= $pageNum + 1)
#set ($prevPage= $pageNum - 1)
<div class="navigation clear">
#if ($curPost > $endPost)
   <div><a href="$page.friendlyURL?page=$nextPage">« Older Entries</a></div>
#end
#if ($pageNum > 0)
   <div><a href="$page.friendlyURL?page=$prevPage">Newer Entries »</a></div>
#end
</div>
VTL code inside the Blog page.

The idea is to create a window of posts of configurable size (numPost), and show the posts inside this window while moving trough the pages. The break statements (at lines 20,27,31) are included to finish the execution as soon as possible. With those three break the algorithm only reads a total of numPost*1 posts when accessing to the first page, the most common situation. When someone access the second page it reads a total of numPost*2 posts, and so on.

The Year page

There is not too much to say about that, same code above but without the outer loop iterating over the years.

## Posts number on page
#set ($numPost = 5)
#set ($curPost = 0)
#set ($pageParam = $request.getParameter("page"))
#if ($pageParam)
   #set($pageNum = $math.toInteger($pageParam))
#else
   #set ($pageNum = 0)
#end
#set ($iniPost = $pageNum * $numPost)
#set ($endPost = $iniPost + $numPost)

<h3>Year $page.title</h3>
#set ($months = ${service.findPageChildren($page.friendlyURL)})
#foreach ($m in $months )
   #set ($posts = ${service.findPageChildren($m.friendlyURL)})
   #foreach ($p in $posts)
  	#set ($curPost=$curPost +1)
  	#if ($curPost > $endPost)
     	#break
  	#end
  	#if ($curPost > $iniPost)
     	${service.renderStructureContent($p.friendlyURL,"article-overview")}
  	#end
   #end
   #if ($curPost > $endPost)
  	#break
   #end
#end

#set ($nextPage= $pageNum + 1)
#set ($prevPage= $pageNum - 1)
<div class="navigation clear">
#if ($curPost > $endPost)
   <div><a href="$page.friendlyURL?page=$nextPage">« Older Entries</a></div>
#end
#if ($pageNum > 0)
   <div><a href="$page.friendlyURL?page=$prevPage">Newer Entries »</a></div>
#end
</div>
VTL code inside the Year pages.
The Month page

Again, same code with one less outer loop, this time the one iterating over the months of a year.

## Posts number on page
#set ($numPost = 5)
#set ($curPost = 0)
#set ($pageParam = $request.getParameter("page"))
#if ($pageParam)
   #set($pageNum = $math.toInteger($pageParam))
#else
   #set ($pageNum = 0)
#end
#set ($iniPost = $pageNum * $numPost)
#set ($endPost = $iniPost + $numPost)
<h3>Month $page.title</h3>
#set ($posts = ${service.findPageChildren($page.friendlyURL)})
#foreach ($p in $posts)
   #set ($curPost = $curPost +1)
   #if ($curPost > $endPost)
  	#break
   #end
   #if ($curPost > $iniPost)
  	${service.renderStructureContent($p.friendlyURL,"article-overview")}
   #end
#end
#set ($nextPage = $pageNum + 1)
#set ($prevPage = $pageNum - 1)
<div class="navigation clear">
#if ($curPost > $endPost)
   <div><a href="$page.friendlyURL?page=$nextPage">« Older Entries</a></div>
#end
#if ($pageNum > 0)
   <div><a href="$page.friendlyURL?page=$prevPage">Newer Entries »</a></div>
#end
</div>
VTL code inside the Month pages.

Make sure to save and approve all those pages. We are ready to test the correct behavior of our tree structure.

Test

Now, not only we have the posts of our blog more organised, we also can access them filtering by year or month just removing part of the URL. The implementation of this feature is recommended in the SEO Starter Guide provided by Google, so we have got some SEO improvement here ;-)

We may want to access by year... http://www.rarejava.com/blog/2011

Filter the posts of the blog by yearAccess the blog filtering by year.

Or may be we prefer to access and filter by month... http://www.rarejava.com/blog/2011/03

Filter the posts of the blog by monthAccess the blog filtering by month.

Hope you find it useful!

References

blog comments powered by Disqus

Jun28

Post Sharing