Sep 10 2015 0

Changing the look-n-feel of the Archives page

I was not completely satisfied with the way the Archives looked within the design template I was using.

Default layout Desired layout
Default layout Desired layout

At first I had no idea if this would even be possible, but reading David’s post on Custom Metadata gave me the confidence it should be doable.

Custom metadata within each post document

To drive the information required on the archives page I have added to custom metadata variables to all of my posts, Month and Day. These variables can then be used within the template archive.html.

For this post the following variables are set.

Date: 2015-09-10 21:00
Month: September 2015
Day: 10
Permalink: changing-the-look-n-feel-of-the-archives-page
Tags: blot, styling, mustache, metadata

For all to be written posts I generate these headers using a TextExpander snippet, which makes it an easy task.

Modified archive view (archive.html)

1

<!DOCTYPE html>
<html>
  {{> head}}
  <body>
    {{> header}}
    <div class="container">
      <div class="main">
        <h1>Archives</h1>
        <div>
          {{#allEntries}}
          <h2 class="archive">{{metadata.month}}</h2>
          <span class="archive">{{metadata.day}}:</span> <a class="archive" href="{{url}}">{{title}}</a><br />
          {{/allEntries}}
        </div>
        {{> footer}}
      </div>
    </div>
  </body>
</html>

Additional CSS (styles.css)

1

/* Styling for the archive page */
h2.archive {
  margin-bottom: 0px;
  font-variant: small-caps;
}

span.archive {
  font-size: medium;
  font-weight: bold;
  margin-left: 20px;
}

a.archive {
  font-size: medium;
}

Additional jQuery (scripts.js)

The following piece of jQuery loops through all h2-elements of class archive. When the content of the h2’-element is equal to the previous one (i.e. the posts is within the same month) the element gets hidden.

1

// Handling of 'dividers' for archive page
var smd_divider = "";
$('h2.archive').each(
    function(){
        if ( smd_divider != $(this).text() ) {
            smd_divider = $(this).text();
        } else {
            $(this).toggle();
        }
    }
);


Previous post
Improving the Tag Cloud script The script used to update the Tag Cloud has a couple of issues. Tags are not counted correctly when the Markdown file has been saved using
Next post
Praise for Blot.im I have been using Blot.im as my blogging service for almost a month now and I am extremely satisfied with the service itself and even more so with
This blog is powered by Blot