Category Detail Code Sample

Here is some example code and CSS to build a category detail page for the blog. This is just an example and you have the flexibility to lay out the page to suit your own design.

Below is a screenshot of the layout that this code will build.  

HTML:

Below is the HTML / Branch code that would go in the Template field for the Category Detail content template. 

<h1>{#category.name}</h1>
{if #category.posts exists}
  {loop items="#category.posts" value="post"}
    <div class="blog-listing">
      <div class="blog-date">
        <div class="month">{#post.publishedOnTimestamp|date format="M"}</div>
        <div class="day">{#post.publishedOnTimestamp|date format="j"}</div>
        <div class="year">{#post.publishedOnTimestamp|date format="Y"}</div>
      </div>
      <h2><a href="{#post.url}">{#post.postTitle}</a></h2>
      <div class="abstract">
        {if #post.abstract}
          {#post.abstract}
        {/else}
          {#post.content|truncate length="200"}
        {/if}
        <a href="{#post.url}">Read more...</a>
      </div>
      {if #post.tagCount > 0}
        <div class="tags-container">
          <img src="/images/documentation/tags.png" alt="tags" class="tags-icon" />
          <div class="tags">
            {loop items="#post.tags" value="tag"}
              <a href="{#tag.url}">{#tag.tagName}</a>
            {/loop}
          </div>
        </div>
      {/if}
      <div class="clear"></div>
    </div>
  {/loop}
{else}
  <p>There are currently no posts.</p>
{/if}
{if #pagination.pageCount > 1}
  <p>
    {if #pagination.previousUrl}
      <a href="{#pagination.previousUrl}" title="Previous Page">&lt; Previous</a> |
    {/if}
    {loop items="#pagination.pagesInRange" value="page"}
      {if #page.number != #pagination.current}
        <a href="{#page.url}" title="Go to Page {#page.number}">{#page.number}</a>
      {else}
        <strong>{#page.number}</strong>
      {/if}
    {/loop}

    {if #pagination.nextUrl}
      | <a href="{#pagination.nextUrl}" title="Next Page">Next &gt;</a>
    {/if}
  </p>
{/if}